Color Converter (HEX, RGB, HSL, CMYK)
Convert a colour between hex, rgb, hsl, hwb, cmyk and oklch, with a swatch, reading any of those formats as input.
Enable JavaScript to convert another colour; the values below are for the default.
Any of the formats below: a hex value, rgb(), hsl(), hwb(), cmyk() or oklch().
For the formats with fractions. Chroma always gets four, because it is a small number.
hex #1e56ec
hex short —
rgb rgb(30 86 236)
rgb legacy rgb(30, 86, 236)
hsl hsl(223.69 84.43% 52.16%)
hwb hwb(223.69 11.76% 7.45%)
cmyk cmyk(87.29% 63.56% 0% 7.45%)
oklch oklch(52.12% 0.2326 264.04)
# cmyk has no colour profile here, so treat it as a starting point for print, not a match.Convert one colour between every format CSS understands, and read it back in any of them.
How to use
- Type the colour. A hex value,
rgb(),hsl(),hwb(),cmyk()oroklch()all parse. - Read the formats. The swatch is the colour itself, so a typo is visible rather than arithmetic.
- Copy the line you need. Both the modern space-separated
rgb()and the legacy comma form are given, because older tooling still wants the commas. - Treat the cmyk row as a starting point. Without a colour profile there is no true conversion from a screen colour to ink.
Example
#1E56EC converts to:
hex #1e56ec
hex short —
rgb rgb(30 86 236)
rgb legacy rgb(30, 86, 236)
hsl hsl(223.69 84.43% 52.16%)
hwb hwb(223.69 11.76% 7.45%)
cmyk cmyk(87.29% 63.56% 0% 7.45%)
oklch oklch(52.12% 0.2326 264.04)The three digit hex is only offered when it is lossless: #ffcc00 is #fc0, and #1e56ec has no short form.
Pitfalls
- hsl lightness is not perceived lightness.
hsl(60 100% 50%)is yellow andhsl(240 100% 50%)is blue; both claim 50% and one is far brighter. That is what oklch fixes. - oklch is worth learning for exactly that reason: at the same lightness and chroma, every hue looks equally bright, so “10% lighter” means one thing across a palette.
- oklch can describe colours a screen cannot show. A value outside the sRGB gamut is clipped here, so a round trip through hex loses it.
- cmyk without an ICC profile is a guess. The naive conversion every design tool offers gives a number, not a match; a printer’s profile is what makes it real.
- A three digit hex is a shorthand, not a different colour:
#fc0and#ffcc00are identical. hsl()andhwb()take a bare hue, no unit, and the newer syntax uses spaces rather than commas. Both spellings work in every current browser.- Rounding a conversion and converting back rarely lands on the same hex. The values here keep enough decimals to round trip, which is why hsl shows two.
- Named colours are not a format so much as a list of 148 specific values.
rebeccapurpleis exactly#663399, and nothing between the names has a name.
Compatibility
rgb(), hsl() and hex are universal. The space-separated syntax with a slash for alpha needs Chrome 65, Firefox 52 or Safari 12.1. hwb() needs Chrome 101, Firefox 96 or Safari 15. oklch() needs Chrome 111, Firefox 113 or Safari 15.4, and is worth a fallback in older browsers. cmyk() is not a CSS colour function at all: it is here because print work asks for the numbers. The tool runs entirely in your browser.
Frequently asked questions
Which format should I write in my CSS?
rgb() for compatibility, oklch() when you are building a palette and want lightness to mean something. Keep one and be consistent.Why is the oklch lightness not the same as the hsl one?
Can I convert cmyk to hex accurately?
What about alpha?
/ 0.5 to the modern syntax or use the a variants.