Developer

HEX to RGB Converter

Convert HEX, RGB, HSL and OKLCH in any direction as you type, with 8-digit alpha support and a live swatch — every conversion runs in your own browser.

Below 100% the HEX row grows to eight digits and RGB and HSL gain a fourth value.

3, 4, 6 or 8 digits. The leading marker is optional.

Three channels 0-255, commas or spaces, with an optional fourth for alpha.

Hue in degrees, then saturation and lightness as percentages.

Perceptual lightness, chroma and hue — the space-separated CSS grammar.

Recent colors

Nothing here yet. Copy a value above and the color is kept on this device, so you can pick it up again on your next visit.

Paste a color into any of the four fields above and the other three rewrite themselves on the keystroke. Every field is an input, not a readout, so there is no direction to choose and no convert button to press: type a hex value to get RGB, type an rgb() call to get hex, or drop an OKLCH value in and see what it looks like in the notation your stylesheet already uses. The swatch on the left is there because a wrong-but-valid color is the most common mistake in this whole job, and the only reliable way to catch it is to look at it.

HEX to RGB converter: reading the three channels

A 6-digit hex color is three bytes written in base 16, in red-green-blue order. Each pair runs from 00 to ff, which is 0 to 255 — exactly the range an rgb() function takes — so the conversion is a change of notation and not a change of value. Nothing is approximated, and going back and forth is lossless however many times you do it.

The 3-digit shorthand is the one place people get caught. #f53 expands by DOUBLING each digit — ff, 55, 33 — not by padding it with a zero. Doubling is what makes the shorthand able to reach pure white (#fff is ffffff); zero-padding would cap it at #f0f0f0, a noticeably dirty grey. The field above accepts either length and expands the short one for you.

RGB to HEX converter: going the other way

Divide each channel by 16 and write the quotient and remainder as base-16 digits. The only step worth slowing down for is padding: a channel below 16 produces a single digit and must be written with a leading zero, so a blue channel of 5 is 05. Drop the zero and the string shortens to five characters, which is not a valid hex length at all — the tool above will tell you exactly that rather than guessing what you meant.

Percentages are accepted in the RGB field too. rgb(100%, 0%, 50%) is the same color as rgb(255, 0, 128), and both spellings convert to the same hex.

HEX to HSL converter: when hue, saturation and lightness help

HSL rearranges the same three numbers into an angle on a color wheel, a saturation percentage and a lightness percentage. It is not a different color space — it is sRGB in polar coordinates — but the rearrangement is useful, because "the same hue, ten percent darker" is a single-number edit in HSL and a three-number puzzle in hex.

Its weakness is that its lightness is geometric rather than perceptual. A saturated yellow and a saturated blue at the same HSL lightness are nowhere near equally bright to the eye, so a palette built by holding HSL lightness constant comes out visually lumpy. That is the specific problem the next section is about.

HEX to OKLCH converter: why the newest notation exists

OKLCH is lightness, chroma and hue again — but measured in a space built by fitting a model to human colour-matching data rather than to display hardware. Its lightness axis is perceptually uniform, so two colors with the same first number really do read as equally light, and a ramp with evenly spaced lightness values really does look evenly spaced.

Two practical notes when you read the OKLCH row above. Chroma is not a percentage and has no fixed maximum — it runs from 0 for a neutral grey up to around 0.37 for the most saturated color sRGB can display, and further for colors it cannot. That is the second note: OKLCH can address colors outside sRGB, and when you type one in, the value that comes back out in the hex row is the nearest thing a normal screen can actually show. Convert that hex back to OKLCH and you will land somewhere slightly different, which is not a bug in the arithmetic but the boundary of the gamut.

8-digit hex with alpha, and the 4-digit shorthand

Add a fourth pair to a hex value and it becomes opacity, on the same 0-to-255 scale: #RRGGBBAA, where 00 is invisible and ff is solid. The 4-digit shorthand expands the same way the 3-digit one does. Move the opacity slider above 0 and below 100 and you will see the HEX row grow from six digits to eight and the RGB row switch from three arguments to four — that transformation is the whole thing most people arrive at this page to see.

One compatibility trap is worth repeating from the FAQ: Android writes alpha first, as #AARRGGBB. A value copied out of an Android colors file and pasted into CSS will be read here as red-green-blue-alpha and will usually come out close to invisible, because the leading alpha byte lands in the red channel and the intended red byte becomes opacity.

Named colors are not supported here, and why

The 147 CSS keyword colors — the tomato and rebeccapurple family — are deliberately not accepted. Supporting them means shipping a table of 147 hard-coded color values inside a tool, and the rule this site holds itself to is that a tool declares a hue and never carries a color value in its source. That rule is what keeps every tool on the same palette, and one lookup table is not worth an exception to it. Paste the hex your browser resolves the keyword to instead; the tool tells you plainly when it has been given a name rather than a value.

Questions

What is #ff5733 in RGB?
It is rgb(255, 87, 51). A 6-digit hex value is three pairs of base-16 digits read left to right as red, green and blue, and each pair covers exactly one byte — 00 through ff, which is 0 through 255 in the decimal numbers an rgb() function wants. So ff is 15x16 + 15 = 255, 57 is 5x16 + 7 = 87, and 33 is 3x16 + 3 = 51. Nothing is lost or approximated in either direction: hex and RGB are two spellings of the same three bytes, which is why this conversion is exact while the HSL and OKLCH ones involve real arithmetic. Paste any hex into the field above and the RGB row updates on the keystroke.
How do I convert RGB to HEX by hand?
Take each channel, divide by 16, and write the quotient and the remainder as base-16 digits where 10 through 15 are a through f. For 87: 87 divided by 16 is 5 remainder 7, so the pair is 57. For 51: 3 remainder 3, so 33. For 255: 15 remainder 15, so ff. Concatenate the three pairs in red-green-blue order and put a # in front. Two things people get wrong doing this in their head: a single-digit result must be padded to two digits (a channel of 5 is 05, never 5), and the pairs are not independently reorderable — swapping two of them gives a completely different, and completely valid-looking, color. That second failure is the reason the tool above shows a swatch rather than only text.
What do the last two digits of an 8-digit hex color mean?
They are alpha — opacity — on the same 00-to-ff scale as the other three channels, where 00 is fully transparent and ff is fully opaque. So 80 is 128 out of 255, or roughly 50%. The form is written #RRGGBBAA and is supported by every current browser in CSS. Two traps are worth knowing. Some tools and design applications write the alpha FIRST (#AARRGGBB), which is the convention in Android development, so a value copied out of an Android resource file will produce a wrong and often near-invisible color when pasted into CSS. And an alpha of ff is redundant: the 6-digit form already means fully opaque, which is why the field above drops back to six digits the moment you return the opacity slider to 100%.
Is hex or RGB better for CSS?
For a fixed, opaque color they are interchangeable and the choice is house style — hex is shorter to type and is what most design tools hand you, so it dominates in practice. RGB earns its place the moment a value needs to be computed or read: rgb() takes decimal numbers, so it composes with calc() and with custom properties in a way a hex string cannot, and a channel written as 87 is legible to a person in a way 57 is not. The real answer for new stylesheets, though, is that both are sRGB-only notations describing a signal sent to a display rather than a color a person sees, which is what the newer notations set out to fix. See the OKLCH section in the guide below.
What is OKLCH and should I use it instead of HSL?
OKLCH describes a color as perceptual lightness, chroma (how colorful it is) and hue angle, using a model fitted to how human vision actually works rather than to how a monitor is wired. The practical consequence is that its lightness number means something consistent: oklch(60% 0.15 250) and oklch(60% 0.15 90) genuinely look equally light, whereas hsl(250, 60%, 50%) and hsl(90, 60%, 50%) do not — the yellow is dramatically brighter than the blue at identical HSL lightness. That makes OKLCH the right notation for generating a palette, for tuning contrast, and for any color ramp where the steps should feel evenly spaced. It also addresses colors outside sRGB, which hex and rgb() cannot express at all. It is supported in every current browser; if you need to support older ones, ship a hex fallback alongside it.
Why does my color change slightly when I convert it to HSL and back?
Because the HSL row is rounded for legibility and the round trip goes through that rounding. Hue is shown to a whole degree and saturation and lightness to a whole percent, which is how a stylesheet is normally written, but the true value almost always sits between two of those steps — a color whose real hue is 11.4 degrees is displayed as 11, and converting 11 back gives a red channel one or two units away from where you started. This tool keeps the unrounded value internally and only rounds at the moment of display, so editing HEX and reading RGB is always exact; the drift only appears if you copy the rounded HSL out and paste it back in. If you need a lossless round trip, work in HEX or RGB, which are integer notations with nothing to round.