Color converter
Type a colour in any format and read every other one at once. Nothing is uploaded, and nothing is sent anywhere — the conversion happens in this tab.
#3e7a66
Closest name: Teal (closest)
Colour #3e7a66, closest name Teal (closest)
Hex, rgb(), hsl() or oklch() — the colour above is also rgb(62, 122, 102), hsl(160 32.6% 36.1%) or oklch(0.5329 0.0709 169.66). Alpha is not supported; this tool is opaque-only.
Kept on this device only, in the same palette every page shares.
- RGB
62, 122, 102- HSL
160°, 33%, 36%- HSV
160°, 49%, 48%- OKLCH
0.533 0.071 170- P3(Display P3)
77, 121, 103- CMYK(approximate)
49%, 0%, 16%, 52%
CSS
rgb(62, 122, 102) · oklch(0.5329 0.0709 169.66) · color(display-p3 0.3019 0.4728 0.4043)
This page is a single-colour color space converter: HEX, RGB, HSL, HSV and OKLCH all come from one sRGB colour and convert between them in both directions. OKLCH — oklch(lightness chroma hue) — is now an input as well as an output, so you can convert oklch to hex, enter a hex to oklch value, or convert between OKLCH and the other CSS colour spaces here. Anything outside sRGB is clipped to the nearest displayable colour, which is why round-tripping a saturated oklch to hsl value may not return what you typed.
CMYK is an approximation, not a print separation: it assumes an idealised subtractive process with no ink, paper or ICC profile involved. Use it as a starting point and separate properly before you send anything to press. OKLCH values are shown at full precision, but anything outside sRGB is clipped to the nearest displayable colour, so round-tripping a very saturated OKLCH value will not return the number you typed. An 8-bit hex holds 16.7 million colours; that is plenty for screens and not enough for every value the wider spaces can name. The P3 row and the display-p3 button are the same colour carried into Display P3, a wider space than sRGB — declare it after the hex so browsers that cannot use it still get the hex. Because every colour here arrived as sRGB, it is inside the sRGB gamut by construction; if you typed an OKLCH value that fell outside it, the clipping above already happened before this page saw it.
Why this page tells you what it loses
Every value on this page is derived from one canonical colour, so no two rows can contradict each other — which also means a format that cannot represent a colour exactly will show you the closest value it can hold, rather than a number that looks precise and is not.
- HSL is not a perfect round trip. Measured in this project across the non-degenerate range, only 49% of HSL values survive a trip out to an 8-bit hex and back unchanged. Low-saturation colours lose the most. That is why the HSL fields here keep what you type while you type it.
- OKLCH values outside sRGB are clipped. An 8-bit screen colour cannot hold every OKLCH value, so a very saturated one comes back different from the number you entered. The swatch always shows the displayable colour, because that is the colour you will actually get. This is also why the Display P3 row cannot rescue a colour that has already been clipped on the way in: the P3 value is derived from the sRGB colour this page holds, so it describes that colour rather than the wider one you might have typed.
- CMYK here is an approximation. It assumes an idealised subtractive process with no ink, paper or ICC profile involved. Real separation is device-specific and belongs in your print workflow, not on a web page.
The worst 8-bit loss measured while testing this tool was about 0.05 in OKLCH lightness, at the near-black end where one step of green is a large fraction of the total. Mid-tone, in-gamut colours round-trip to within 0.001.
Which format do you actually want?
- In CSS —
oklch()for anything you intend to edit by hand later, since equal numeric steps look like equal visual steps. Use the copy buttons above; browsers have supported it for years now. - In a design tool or handoff — hex, because every tool reads it and it cannot be misread.
- For gradients and palettes — work in OKLCH and finish in whatever the use site needs. The reason is in HEX, RGB, HSL and OKLCH explained .
- For a wide-gamut display — the P3 row and the
display-p3button give you thecolor(display-p3 …)value for the colour above. Declare it after the hex so a browser that cannot read it still gets the hex. Why the two differ, and when a P3 value is worth the trouble, is in sRGB vs Display P3 .
OKLCH is now an input as well as an output on this page. You can type an oklch()
value into the OKLCH fields and read it back as HEX, RGB, HSL, HSV and Display P3, or paste
any of those into one of those fields and read it back as OKLCH — so this page handles oklch to hex, hex to oklch, oklch to rgb,
oklch to hsl, oklch to hsv and oklch to display p3
as genuine two-way conversions. The CMYK row is also reachable from an OKLCH value, but only
as an approximation for the same reason it always is: it is a useful starting point, not a
print separation. Because every value here is ultimately an 8-bit sRGB colour, anything
outside sRGB is clipped to the nearest displayable colour on the way in, which is why
round-tripping a very saturated OKLCH value will not return the number you typed.
Where to go next
If the colour you want is inside an image rather than in a text field, the image color picker reads the pixel you click and gives you these same values. To pull a whole set of colours out of one picture, use palette from image . And if you have a colour but not its name, the color name finder will suggest one — including how close the match really is.
And once you have a colour you intend to set text in, the contrast checker says whether it clears WCAG AA and AAA against whatever it sits on — the question the values above are usually the first step towards.
If you do not have a second colour to compare against, the harmony generator derives one from the colour you do have — complementary, triadic and four other rules.
If the second colour is one of these values, the gradient generator turns the pair into CSS you can paste, with the angle and every stop under your control.