A colour converter turns one way of writing a colour into the others. Paste a
HEX code, an rgb() value, a colour name or anything else CSS understands, and
every format updates at once, ready to copy.
Everything runs in your browser. Nothing you type or pick is uploaded.
How to use it
Type or paste into Any CSS colour, or into any of the format boxes: each one
accepts any colour, not just its own format, so pasting #663399 into the HSL
box works too. The other boxes follow as you type, and the one you are typing in
keeps exactly what you wrote until you move away from it, when it tidies itself
into the standard form. Use the picker to choose by eye and the Alpha slider
for transparency, then press the copy button next to the format you need.
Everything runs in your browser. Nothing you type or pick is uploaded.
The formats compared
These are the same colour, rebeccapurple, written six ways.
| Format | Example | What the numbers mean | Reach for it when |
|---|---|---|---|
| HEX | #663399 | Red, green and blue, 00 to ff each | Copying from design tools, short and universal |
| RGB | rgb(102, 51, 153) | Red, green and blue, 0 to 255 each | You need the channels as numbers, in code or a canvas |
| HSL | hsl(270, 50%, 40%) | Hue angle, saturation, lightness | Tweaking by hand: a lighter or duller version of a colour |
| HWB | hwb(270 20% 40%) | Hue, how much white, how much black | Thinking like mixing paint: add white to tint, black to shade |
| OKLCH | oklch(44.03% 0.1603 303.37) | Perceived lightness, chroma, hue | Building palettes and design tokens that look even |
| CMYK | cmyk(33.3%, 66.7%, 0%, 40%) | Cyan, magenta, yellow and black ink | A rough idea of print values. Not CSS |
All of them except CMYK take an alpha for transparency: two more hex digits, as
in #66339980, or a fourth value, as in rgba(102, 51, 153, 0.5) or
oklch(44.03% 0.1603 303.37 / 0.5).
HEX to RGB by hand
A hex code is three bytes written in base 16. Split it into pairs and convert each pair.
| Pair | Base 16 | Working | Decimal |
|---|---|---|---|
| Red | 66 | 6 × 16 + 6 | 102 |
| Green | 33 | 3 × 16 + 3 | 51 |
| Blue | 99 | 9 × 16 + 9 | 153 |
So #663399 is rgb(102, 51, 153). The letters a to f stand for 10 to 15,
so ff is 15 × 16 + 15 = 255, the most a channel can hold. Going from RGB to
HEX is the same table read backwards: divide by 16 for the first digit, keep the
remainder for the second.
The short form #639 doubles each digit, so it is #663399. That is why only
some colours have a three-digit version.
RGB to HSL
HSL is worked out from the largest and smallest of the three channels, scaled to
0 to 1. rgb(102, 51, 153) is red 0.4, green 0.2 and blue 0.6, so the largest
is 0.6 (blue), the smallest 0.2 (green), and the difference between them 0.4.
- Lightness is the average of the largest and smallest: (0.6 + 0.2) ÷ 2 = 0.4, so 40%.
- Saturation is the difference over how far lightness is from either end: 0.4 ÷ (1 − |2 × 0.4 − 1|) = 0.4 ÷ 0.8 = 50%.
- Hue depends on which channel is largest. For blue it is 60 × ((red − green) ÷ difference + 4) = 60 × (0.5 + 4) = 270°. Red and green have their own versions, starting from 0 and 2 instead of 4.
The hue step is the fiddly one, which is why most people use a tool. Greys have no hue at all, since all three channels are equal, and are written with a hue of 0.
Why OKLCH is worth learning
HSL's lightness is arithmetic, not perception. Pure yellow and pure blue are
both 50% lightness in HSL, yet one is almost white to the eye and the other
almost navy. OKLCH measures lightness the way people see it, so the same pair
comes out as 96.8% and 45.2%.
| Colour | HSL | OKLCH |
|---|---|---|
Yellow #ffff00 | hsl(60, 100%, 50%) | oklch(96.8% 0.211 109.77) |
Blue #0000ff | hsl(240, 100%, 50%) | oklch(45.2% 0.3132 264.05) |
That makes OKLCH the format to build palettes in. Keep lightness fixed and
change the hue, and every swatch has the same visual weight, so text on top of
them stays equally readable. oklch() works in every current browser.
Out-of-gamut colours
OKLCH can describe colours more vivid than a normal sRGB screen can show.
oklch(70% 0.4 150) is a perfectly valid CSS colour, but no sRGB value
matches it. When that happens this tool does what the CSS specification tells
browsers to do: keep the lightness and hue, lower the chroma until the colour
fits, and flag that it did. Clipping the red, green and blue channels instead is
simpler, but it shifts the hue, so a vivid blue turns purple.
The same applies to lab(), lch(), oklab() and color(display-p3 …),
which the converter also reads.
Gotchas
- CMYK here is an estimate. It is the textbook formula. Real printing depends on the ink and paper, and a print shop converts with an ICC profile, not with this.
- HSL and OKLCH values get rounded. They are printed to one or two decimal places, which is enough that converting back gives you the same hex. Rounding harder than that can nudge the colour by one step.
rgba()andhsla()are the same asrgb()andhsl(). Modern CSS accepts a fourth value in either. Both spellings work in every browser.- Named colours are not evenly spaced.
darkgray(#a9a9a9) is lighter thangray(#808080), a quirk inherited from old X11 colour lists. transparentis black at zero alpha. It isrgba(0, 0, 0, 0). The hex box shows#00000000, and the colour boxes show black, because there is no colour to show.
Keep going
Picked a text colour? The WCAG Contrast Checker
tells you whether it is readable on its background, and suggests the nearest
colour that is. The CSS cheat sheet covers where each of these
colour values can go, from color and background to gradients and custom
properties, and the HTML cheat sheet covers the
markup they style. More free tools that run in your browser are on the
tools page.
Common questions
How do I convert HEX to RGB?
Split the six digits into three pairs and read each pair as a base 16 number from 0 to 255. #663399 is 66, 33 and 99, which are 102, 51 and 153, so it is rgb(102, 51, 153). A three-digit code doubles each digit first: #639 is #663399. An eighth and ninth digit, as in #66339980, is alpha: 80 is 128 out of 255, about 50% opaque. Paste the hex above and the RGB box shows the answer.
How do I convert RGB to HEX?
Write each of the three numbers as two base 16 digits and join them after a #. 102 is 66, 51 is 33 and 153 is 99, so rgb(102, 51, 153) is #663399. Numbers under 16 need a leading zero: 10 is 0a, not a. Type the RGB into the RGB box above and the HEX box updates as you go.
What is the difference between HEX, RGB and HSL?
HEX and RGB are the same thing written two ways: an amount of red, green and blue from 0 to 255, in base 16 for HEX and in decimal for RGB. HSL describes the same colours by hue, saturation and lightness, which is easier to adjust by hand: to make a colour darker you lower one number instead of three. Every HEX colour has an exact RGB and HSL equivalent.
What is OKLCH and why use it?
OKLCH describes a colour by lightness, chroma and hue, in a space designed so that equal steps look equal to a person. HSL's lightness does not: yellow and blue at 50% lightness look nothing alike, while in OKLCH their lightness is 97% and 45%, which matches what you see. That makes OKLCH the better choice for building palettes and for keeping text contrast consistent across hues. Every current browser supports oklch() in CSS.
What does out of gamut mean?
It means the colour exists but a standard sRGB screen cannot show it. OKLCH, Lab and Display P3 can describe more vivid colours than sRGB holds, so some values have no sRGB equivalent. This tool does what browsers do: it keeps the lightness and hue, lowers the chroma until the colour fits, flags that it did so, and converts that nearest colour.
Is the CMYK value accurate for print?
It is the standard formula, which is what every online converter gives you, but it is not what a printer will produce. Real print conversion goes through an ICC profile for a particular press, ink and paper, and the same CMYK numbers print differently on different stock. Use this CMYK as a starting point and let your design software or print shop convert with the right profile.
Is anything I type sent to a server?
No. The conversion runs in your browser and none of the boxes are submitted anywhere. The site records that the tool was used, which box was edited, which format the input was and whether it parsed, so we know which tools are worth building next. The colour itself is never part of that.