Color
HEX, RGB, HSL, OKLCH and CMYK
The same colour has many spellings. Hex and RGB describe it as amounts of red, green and blue light; HSL restates the same value as hue, saturation and lightness, which is far easier to adjust by hand; CMYK describes inks for print; and OKLCH describes it in a space built so that equal numeric steps look like equal perceptual steps.
Converting between them is exact for hex, RGB and HSL, which are three views of one sRGB value. It is not exact for CMYK, where the result depends on the printing process, nor for wide-gamut OKLCH values that fall outside sRGB and must be brought back inside it. This tool shows every notation at once, with a live swatch.
How to use it
- Enter a colour in any notationPaste a hex code, an rgb() or hsl() function, or pick from the swatch. Every other format updates from it.
- Adjust in whichever space suitsHSL is the practical one for building a hover state or a muted variant — change lightness or saturation and leave the hue alone.
- Copy the CSS you needEach format is offered in the exact syntax a stylesheet expects, so there is no reformatting between here and the code.
Frequently asked questions
What do the digits in a hex colour mean?
Two hex digits each for red, green and blue, from 00 to FF — that is 0 to 255 per channel. The three-digit shorthand doubles each digit, so #F0A is exactly #FF00AA. An eight-digit value adds an alpha channel as a fourth pair, which is supported by every current browser.
When should I use HSL instead of hex?
Whenever a colour is going to be varied. Deriving a hover state from hsl(210 90% 45%) means changing one number; deriving it from #0b6fd6 means opening a picker. HSL also makes it obvious at a glance whether two colours share a hue, which hex hides completely.
Why does my CMYK conversion look wrong?
Because CMYK is not a colour space on its own — it describes ink on a particular paper with a particular press profile. A conversion without an ICC profile is an approximation, and vivid screen colours in particular have no ink equivalent. For real print work, convert in software that knows the target profile.
What problem does OKLCH solve?
In HSL, two colours with the same lightness value can look very different in brightness — yellow at 50% reads far lighter than blue at 50%. OKLCH is built on a perceptual model, so its lightness number corresponds to what the eye sees. That makes it much better for generating colour scales where every step should feel evenly spaced.
What is the alpha channel and how do I write it?
Alpha is opacity, from 0 for fully transparent to 1 for fully opaque. In CSS you can write rgb(0 0 0 / 50%) or hsl(210 90% 45% / 0.5), or append a pair of hex digits to a hex colour. Note that a semi-transparent colour composites against whatever is behind it, so its contrast ratio depends on the background.