Color Converter: HEX, RGB, HSL, HWB, CMYK, OKLCH
Convert one colour between HEX, RGB, HSL, HWB, CMYK, OKLCH and CSS names in your browser. Type any notation or use the picker, copy each result, and see when OKLCH falls outside sRGB. Nothing is uploaded.
Detected notation: HEX
- HEX
#ff8000 - RGB
rgb(255, 128, 0) - HSL
hsl(30, 100%, 50%) - HWB
hwb(30 0% 0%) - CMYK
cmyk(0%, 50%, 100%, 0%) - OKLCH
oklch(73.19% 0.1858 52.98)
CMYK here is a device estimate without a print profile; printed colours depend on the press. Convert many colours at once with the line-by-line hex to RGB converter, or test two colours with the colour contrast checker.
About the Color Converter
The Color Converter takes one colour written in any common notation and shows it in all the others at once. Type a hex code such as #ff8000, an rgb() or rgba() value, hsl(), hwb(), cmyk(), oklch() or a CSS colour name such as rebeccapurple, or pick a colour with the colour picker. The tool tells you which notation it read, shows a swatch, and lists the colour as HEX, RGB, HSL, HWB, CMYK and OKLCH. Every row has its own Copy button, so you can paste the exact text into a stylesheet, a design tool or a print brief.
Nothing is uploaded; every conversion runs in your browser and never leaves your device.
How to use it
Type or pick
Type a colour in the Colour field. The results update as you type. Use Pick a colour to choose a colour visually; the picker writes its hex value into the field. When the text cannot be read, the field explains why, for example that a hex colour has 3, 4, 6 or 8 digits, and the result rows are cleared so no stale value is left on screen.
Transparency
Alpha is kept in the CSS notations: 8-digit hex, rgba(), hsla() and the / alpha part of hwb() and oklch(). CMYK has no transparency, so the CMYK row ignores alpha and says so.
The formulas and rounding
HSL and HWB
HSL comes from the largest and smallest of the red, green and blue channels. HWB is built from HSV: whiteness is and blackness is . When whiteness and blackness add up to more than 100%, they are scaled down to add up to exactly 100%, which gives a grey, as CSS Color 4 requires. Hue is shown as a whole number of degrees from 0 to 359, and every percentage is a whole number, rounded half up.
CMYK
CMYK here is naive device CMYK without a print profile:
with magenta and yellow worked out the same way from green and blue. Pure black is cmyk(0%, 0%, 0%, 100%). Printed colours depend on the paper, the inks and the press profile, so treat the CMYK row as an estimate and ask your printer for a proof. Because the percentages are rounded, a CMYK value does not always read back to exactly the same RGB colour.
OKLCH and the sRGB gamut
OKLCH uses the OKLab matrices of Björn Ottosson, as published in CSS Color 4, over linear sRGB. Lightness is a percentage with two decimals, chroma has four decimals and hue has two. When the chroma rounds to 0 the hue is shown as 0. OKLCH can describe colours a normal screen cannot show. When a channel falls outside the sRGB range, it is clipped to the nearest value and the page says Outside sRGB: the nearest channels were clipped.
Related tools
To convert a long list of hex codes line by line, use the hex to RGB converter. To check whether two colours are readable together under WCAG 2.x, use the colour contrast checker. For whole colour schemes, try the color palette generator.
Frequently asked questions
Which colour notations can I type?
Hex with 3, 4, 6 or 8 digits, rgb() and rgba(), hsl() and hsla(), hwb(), cmyk() with percentages or values from 0 to 1, oklch() and the CSS colour names such as rebeccapurple. The page shows which notation it read.
How do I convert RGB to HSL?
Type the rgb() value, for example rgb(51, 102, 153), and read the HSL row: hsl(210, 50%, 40%). Hue is a whole number of degrees and saturation and lightness are whole percentages, rounded half up.
Why does my CMYK value not match what my printer uses?
The CMYK row is naive device CMYK, worked out without a print profile. Real printed colour depends on the paper, the inks and the press profile, so use it as an estimate and ask your printer for a proof.
Why does a CMYK value not read back to the exact same RGB colour?
The percentages are rounded to whole numbers. cmyk(67%, 33%, 0%, 40%) is the rounded form of #336699, but it reads back as rgb(50, 103, 153) because 255 × 0.33 × 0.6 is 50.49.
What does Outside sRGB mean?
OKLCH can describe colours that a normal screen cannot show. When a channel falls outside the sRGB range, the converter clips it to the nearest value, shows the clipped colour and says that it did so.
Is my colour sent anywhere?
No. Every conversion runs in your browser on your own device. The colour you type or pick is never uploaded, logged or stored by this site, so you can convert private brand colours safely.