RGB to Hex Converter

Turn RGB channel numbers into a hex code for CSS

You have three numbers and you need six characters. The eyedropper in your screenshot tool reported 168, 85, 247. A chart library handed back rgb(16, 185, 129). A colleague read channel values off a slide over a call. None of that is what a stylesheet, an HTML attribute or a design token file wants to store, so it has to be compacted into #RRGGBB.

This page is where you produce that code. Drag the picker square, work the hue wheel, or switch to the Sliders tab and set red, green and blue on their own 0–255 tracks — each slider's track is tinted to show what moving that one channel would do while the other two stay put, which makes matching a target colour much faster than guessing. The HEX field updates live, and the copy button next to it puts the finished code on your clipboard.

Nothing leaves the browser. The arithmetic is a few lines of JavaScript running in your tab: no file is uploaded, no colour is logged, and the swatches you save live in your own browser storage. Client-side is also why the output is instant — there is no request to wait on between moving a slider and reading the code.

How one channel becomes two hex digits

Each channel is a whole number from 0 to 255, and each becomes exactly two base-16 digits. The conversion is one division:

• Divide the channel by 16. The quotient is the first hex digit.
• The remainder is the second hex digit.
• Any digit from 10 to 15 is written as a letter: A, B, C, D, E, F.
• A result below 16 gets a leading zero, so 9 is 09, never 9.

That leading zero is the single most common hand-conversion bug. Drop it and every character after it shifts one place left, which silently turns your code into a different colour rather than an error you would notice.

Worked example: rgb(37, 99, 235) by hand

Three divisions, joined end to end.

• Red, 37. 37 ÷ 16 = 2 remainder 5. Digits 2 and 5 → 25.
• Green, 99. 99 ÷ 16 = 6 remainder 3. Digits 6 and 3 → 63.
• Blue, 235. 235 ÷ 16 = 14 remainder 11. Fourteen is E, eleven is B → EB.

Concatenate in red-green-blue order and prefix a hash: #2563EB. Order matters and there is no separator to protect you, so a transposed pair produces a perfectly valid code for the wrong colour. When you have converted by hand, paste the result back in and check the swatch matches what you expected before committing it.

More channel triplets and their codes

When the source gives percentages or floats

Plenty of tools do not report 0–255 integers, and converting the wrong scale is a quiet way to produce a colour that is close but not right.

• Percentages (CSS accepts rgb(100%, 40%, 0%)) multiply by 2.55. Forty percent is 102, giving #FF6600. Multiplying by 2.55 rather than 2.5 matters: 2.5 would give 100, or #FF6400, a visibly different orange at the extremes.
• 0–1 floats, as used by OpenGL, many 3D and motion tools, and some colour APIs, multiply by 255. A float of 0.5 gives 127.5.
• 16-bit channels from a high-bit-depth image editor divide by 257 to land back in 0–255, not by 256 — 65535 ÷ 257 is exactly 255, which is what you want at the top of the range.

Any of those can leave you with a fraction, and hex has no room for one. This tool rounds to the nearest whole number, with halves rounding up, so 127.5 becomes 128 and produces 80. That is a real, if tiny, loss: the code you get back is the nearest expressible colour, not the exact one your source described. It is invisible to the eye but worth knowing if you are comparing a generated code against a reference value and find it off by one.

Six digits, three digits, and eight

This tool always writes the full six-digit form in uppercase with a leading #. Two shorter or longer forms exist and are worth a word.

Three-digit shorthand is only available when every pair happens to be a doubled digit. #FF6600 qualifies and can be written #F60; #FF6601 does not and cannot be shortened at all. The saving is three characters, which is why most codebases have stopped bothering — a build step gzips it away, and a consistent six-digit form is easier to search for.

Eight-digit hex appends a fourth pair for alpha. This page does not emit it. Set transparency with the opacity slider and copy the rgba() or hsla() line instead, where alpha appears as a 0–1 decimal. That is the form CSS has supported longest and the form most design tools will accept without complaint.

Where hex is required, and where it is not

Modern CSS treats #2563EB and rgb(37, 99, 235) as interchangeable in any property that takes a colour, so choosing between them is a house-style decision, not a technical one. A handful of places do insist on hex:

• <input type="color"> only accepts a seven-character #rrggbb value. No shorthand, no rgb(), no alpha — anything else is discarded and the control falls back to black.
• The <meta name="theme-color"> tag and web app manifests are conventionally written as hex, and some consumers parse nothing else.
• Terminal themes, editor themes, many CI badge services and most design-token exchange formats are hex-only.
• Older email clients are far more reliable with hex than with functional colour notation.

The reverse case — needing the channels back out of a code someone gave you — is the job of the hex to RGB converter.

Building a shade ramp from one hex

Producing one code is rarely the whole task; usually you need a hover state and a pressed state to go with it. The Color Tools row on this page gives you Lighten, Darken, Saturate, Desaturate, Complement, Invert and Grayscale, each applied to the current colour. Lighten and Darken step the HSL lightness by ten points and leave hue and saturation alone, so pressing Darken once gives you a defensible hover shade of the same colour rather than a different colour; press it again for a pressed state, and copy the hex at each stop. Because those steps route through HSL and round to whole numbers, repeated presses drift slightly — generate each stop from the base colour rather than compounding a long chain if you need the ramp to be exactly reproducible.

Questions people actually ask

Does converting to hex lose anything? Not if you start from integer channels — hex is the same three bytes written differently, so it round-trips exactly. Loss only enters when your source had fractions, percentages or more than 8 bits per channel, as above.

Should the letters be uppercase or lowercase? Neither is more correct; CSS is case-insensitive here. This tool emits uppercase. Pick one and enforce it with a linter, because mixed case in a codebase defeats find-and-replace when a brand colour changes.

Why does my code look different in print? Hex describes light being emitted, and it is interpreted as sRGB. Print is ink on paper, described by CMYK, and no automatic conversion between them is faithful — the CMYK line on this page is a useful approximation for a rough check, not a value to hand a printer.

Can I share the exact colour I landed on? Yes. Press Share Color to copy a link that reopens this page on the same colour, so a reviewer sees what you saw without you pasting a code into chat and hoping they paste it back correctly.