HEX, RGB, HSL and OKLCH: which colour format to use
Design · 6 min read
Every colour on a screen eventually becomes a set of numbers, but which numbers you write depends on what you are trying to do. HEX, RGB, HSL and OKLCH all describe the same colours, yet each one makes a different kind of edit easy and a different kind of mistake likely.
HEX: compact and universal, but opaque to edit
HEX packs red, green and blue into a six-digit code like #3B82F6, sometimes with an extra pair of digits for alpha transparency. It is compact, easy to paste around, and understood by essentially every design and development tool that exists, which is why it remains the default in so many style guides.
The catch is that HEX is nearly impossible to reason about by eye. Nobody can look at #3B82F6 and tell you it is a mid-tone blue, let alone predict what a slightly lighter version would look like. Any edit means pasting it into a colour converter and working from there.
Use HEX as your storage and hand-off format, the thing you write into a design token or a CSS variable once you have already decided on the colour. It is a poor format for actually exploring or tweaking a palette.
RGB: closer to how screens work, still hard to tune
RGB describes a colour as three channel values, each from 0 to 255, matching how a screen's red, green and blue subpixels are actually driven. It is the same information as HEX, just in decimal rather than hexadecimal, so it shares HEX's core weakness: adjusting lightness or saturation by eye is guesswork.
RGB earns its keep in code that needs to do maths on colour, such as blending two colours, animating between states, or generating a gradient. Because the numbers map directly to hardware channels, calculations on them are simple, even if the visual result is not always intuitive.
HSL: the format built for human intuition
HSL splits a colour into hue, saturation and lightness, which matches roughly how people actually think about colour. Want the same colour but darker? Lower the lightness. Want it more muted? Lower the saturation. This is a huge usability win over HEX and RGB for anyone building or adjusting a palette by hand.
HSL's weakness is that it does not account for how the human eye perceives brightness differently across hues. Two HSL colours with identical lightness values, one yellow and one blue, can look wildly different in actual perceived brightness. That inconsistency causes visible unevenness in gradients and generated palettes.
OKLCH: perceptually even and increasingly practical in CSS
OKLCH is a newer format, built on the OKLab colour space, that fixes HSL's core flaw: its lightness value is calibrated to match how bright colours actually look to human eyes, not just their mathematical brightness. That means two OKLCH colours with the same lightness genuinely look similarly bright, whatever their hue.
It also uses a wider gamut than HEX or RGB can represent, so it can describe vivid colours available on modern wide-gamut screens that sRGB formats simply cannot reach. Browser support has caught up fast, and OKLCH is now usable directly in CSS in every current major browser.
The practical benefit shows up most in generated palettes and gradients, where OKLCH produces noticeably smoother, more even transitions than the same operation done in HSL or RGB.
Converting between formats without losing your mind
Manually converting HEX to HSL, or working out what an OKLCH value looks like in RGB, is not something worth doing by hand. A colour converter tool is the sane approach: paste one format in, read off the others, and keep working in whichever one suits the task in front of you.
It is worth keeping a converter open as a matter of habit whenever you are moving a palette between a design tool, a CSS file and a design token system, since each of those tends to default to a different format.
Choosing a format for design tokens
Store your source-of-truth tokens in whichever format your team finds easiest to review, but be consistent. Many teams now define brand colours in OKLCH because it is easy to generate a full tint and shade scale from a single hue by only varying the lightness channel, producing evenly spaced steps.
Whatever the source format, most teams still export HEX values for anywhere HEX is expected, such as older tooling or brand guideline PDFs, since it remains the most universally understood format even as OKLCH gains ground in day-to-day CSS.
Format choice inside a CSS file
For static, one-off colours in a stylesheet, HEX is fine and arguably clearer to scan than a long OKLCH string. For colours that are generated, animated, or derived from another colour with calc-like logic, OKLCH's separate lightness, chroma and hue channels make the intent of the code much clearer.
Modern CSS also supports relative colour syntax, letting you write something like a slightly darker version of an existing OKLCH colour directly in the stylesheet, without needing a preprocessor or a separate converter step for every variant.
Accessibility considerations across formats
None of these formats calculate contrast for you automatically, so switching formats alone will not fix an accessibility issue. However, OKLCH's perceptual evenness makes it noticeably easier to eyeball a plausible contrast pair, because equal lightness values genuinely look like equal lightness.
Always confirm contrast with a proper contrast check rather than relying on any format's numbers alone, since perceived contrast also depends on surrounding colours and screen calibration.
A simple rule of thumb
Use HSL or OKLCH while you are designing and tweaking a palette, because both let you reason in terms of hue, saturation and lightness rather than raw channel numbers. Use HEX for compact storage and communication once a colour is finalised. Reach for RGB mainly when code needs to do direct channel maths, and reach for OKLCH specifically when you want even-looking gradients or generated tint scales.
Common questions
- Is OKLCH better than HSL?
- For most design work, yes. OKLCH's lightness value matches how bright a colour actually looks to the human eye, so palettes and gradients built with it look more even than the equivalent built in HSL, where equal lightness numbers can look very different in practice.
- Can I use OKLCH in CSS today?
- Yes, OKLCH is supported directly in CSS in all current major browsers. If you need to support much older browsers, provide a HEX or RGB fallback value before the OKLCH declaration, since unsupported browsers will simply ignore the line they cannot parse.
- Why do designers still use HEX if it has downsides?
- HEX is compact, universally recognised and easy to paste into almost any tool, which makes it ideal for storing and sharing a finished colour. Its downside is only that it is hard to edit or reason about by eye, which matters during design, not after.
- What is the easiest way to convert between colour formats?
- Use a dedicated colour converter rather than converting by hand. Paste in a HEX, RGB, HSL or OKLCH value and read off the equivalents in the other formats, which avoids the rounding mistakes that are easy to make with manual conversion formulas.
- Does colour format affect accessibility compliance?
- The format itself does not change whether a colour combination passes contrast guidelines, since all formats can describe the same colours. What changes is how easy it is to predict contrast by eye, and OKLCH's perceptual evenness makes that prediction noticeably more reliable than HSL or RGB.