Color formats explained: HEX, RGB, HSL, OKLCH and the rest
The same color can be written a dozen ways. Here is what each format means, when to use it and how the same color looks in all of them.
One color in every format
All values below describe the same color and are calculated live. Click through to the converter to try your own color.
| Format | Value |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| HWB | |
| Lab | |
| LCH | |
| OKLab | |
| OKLCH | |
| Display P3 | |
| CMYK |
HEX and RGB
HEX writes red, green and blue as two hexadecimal digits each, from 00 to ff. Three-digit HEX is a shorthand where each digit is doubled, and eight digits add transparency. rgb() writes the same channels as numbers from 0 to 255. Both describe sRGB and are the safest choice for maximum compatibility.
HSL and HWB
HSL describes hue, saturation and lightness, and HWB describes hue, whiteness and blackness. They are easy to read, but their lightness does not match perception, so equal numbers can look very different across hues.
LAB, LCH, OKLAB and OKLCH
These formats are designed around human vision. LAB and LCH come from CIELAB. OKLAB and OKLCH are a modern refinement with more stable hues, especially for blues. Use OKLCH for design systems, shade scales and anything where lightness must be consistent.
CMYK
CMYK describes cyan, magenta, yellow and black ink. The conversion shown here is a simple device-independent formula. Real print results depend on the paper, ink and printer profile, so treat it as a starting point and ask your printer for the profile.
Swift, Flutter and Android
Mobile platforms use their own syntax. SwiftUI and UIKit take red, green and blue as numbers from 0 to 1. Flutter and Android take a 32-bit ARGB number, where the first two hex digits are the alpha channel.
| Format | Value |
|---|---|
| SwiftUI | |
| UIKit | |
| Flutter / Compose | |
| Android XML |
Questions and answers
Which color format should I use in CSS?
Use HEX or rgb() when you need the widest compatibility, and OKLCH for design tokens, shade scales and wide-gamut colors. All current browsers support OKLCH.
What is the difference between HEX and RGB?
None in meaning. HEX writes each channel in base 16, rgb() in base 10. #ff5733 and rgb(255 87 51) are the same color.
Why is Android color code order different?
Android and Flutter use ARGB, so alpha comes first: 0xFFFF5733 is a fully opaque #ff5733. CSS eight-digit HEX puts alpha last.