HEX, RGB, HSL, CMYK and OKLCH: Color Formats Explained
What each colour format means, when designers, developers and printers use them, and how to convert between them accurately.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
The same green can be written as #2E8B57, rgb(46, 139, 87), hsl(146, 50%, 36%), cmyk(67%, 0%, 37%, 45%) or oklch(55% 0.12 155). They're different ways of describing one colour, each suited to a different job.
The formats
HEX
Six hex digits for red, green and blue: #RRGGBB. Compact and the default in design tools and CSS. #2E8B57 = red 0x2E (46), green 0x8B (139), blue 0x57 (87).
RGB
The same three channels as decimal 0–255. Use rgb(46 139 87 / 50%) for transparency.
HSL
Hue (0–360° around the colour wheel), saturation (0–100%) and lightness (0–100%). Easy for humans to tweak: make a colour lighter by raising L, more muted by lowering S.
HSV / HSB
Hue, saturation and value/brightness — what most colour pickers in Photoshop and Figma show.
CMYK
Cyan, magenta, yellow and black ink percentages for print. Conversion from RGB depends on the printer's colour profile; a simple formula is a starting point, not a press-ready value.
OKLCH
A modern CSS colour space with perceptually uniform lightness, chroma and hue. Two colours with the same L genuinely look equally light — HSL can't promise that (yellow at 50% lightness looks far brighter than blue at 50%). OKLCH makes consistent colour scales and accessible palettes much easier, and works in all modern browsers.
Which to use where
| Job | Format |
|---|---|
| Handing over brand colours | HEX + CMYK (and Pantone for print-critical work) |
| Writing CSS | HEX, RGB or OKLCH |
| Generating tints/shades | HSL or OKLCH |
| CMYK from the printer's profile | |
| Tailwind arbitrary values | bg-[#2E8B57] |
Convert instantly
Paste any format — even a CSS name like seagreen — into the free Color Converter to get every other format, a tints-and-shades scale and a WCAG contrast check.
Contrast in one minute
The contrast ratio compares the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). WCAG AA needs 4.5:1 for normal text and 3:1 for large text and UI components.
Rather have it built?
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on — with a consistent design system, accessible colours and technical SEO built in.
Related free tools
Color Palette Generator | Color Converter | Box Shadow Generator | Flexbox Playground | All free tools