HEX, RGB, HSL, and OKLCH: when to use each CSS color format

Published: 2026-09-05

When to write colors as HEX, RGB, HSL, or OKLCH in CSS—gamut, alpha, perceptual lightness, and how to convert between them locally.

CSS accepts several color notations for the same pixel. Design tools often export HEX; older stylesheets lean on rgb(); designers think in hue / saturation / lightness; modern tokens increasingly use oklch() because lightness tracks perception better. Picking a format is about who edits the value, whether you need alpha, and how you want gradients and scales to behave—not about which one is “more correct.”

Quick comparison

Format	Looks like	Best for	Watch-outs
HEX	`#6366f1`, `#6366f180`	Tokens, design-tool paste, compact CSS	Hard to nudge lightness by eye; 3/4/6/8 digit forms
RGB	`rgb(99 102 241)`, `rgba(…)`	Channel math, canvas/WebGL, APIs	Equal RGB steps ≠ equal perceived change
HSL	`hsl(239 84% 67%)`	Hue wheels, tint/shade by hand	Lightness is not perceptual; yellows/blues feel uneven
OKLCH	`oklch(62.7% 0.17 149.2)`	Even palettes, fluid themes, wide-gamut intent	Newer; out-of-sRGB values need care when targeting screens

All four can describe colors in the common sRGB display space. HEX and classic RGB are tightly tied to that model. HSL is a cylindrical remapping of sRGB. OKLCH sits on OKLab—a space built so equal steps in lightness feel more even to human vision.

HEX: compact and everywhere

Hexadecimal colors encode each RGB channel as two hex digits (00–ff):

color: #6366f1;      /* RRGGBB */
color: #639;         /* RGB shorthand → #663399 */
color: #6366f180;    /* RRGGBBAA — alpha as hex */

Use HEX when:

You copy from Figma, Sketch, or a brand sheet that already lists hex.
You want short, stable design tokens (--color-brand: #6366f1).
Opacity is either 100% or you are fine encoding alpha as two trailing hex digits.

Skip HEX when you need to tweak “make it 10% lighter” by hand—channel hex is opaque for that. Prefer HSL or OKLCH for interactive editing, then export HEX for storage if your team still standardizes on it.

RGB: channels and alpha in decimal

Modern CSS prefers space-separated syntax (comma form still works):

background: rgb(99 102 241);
background: rgb(99 102 241 / 0.8); /* alpha as a separate slash component */

Use RGB when:

You already have 0–255 channel values from code, a screenshot sampler, or an API.
You are blending or lerping channels in JavaScript (canvas, shaders, simple animations).
You need a clear alpha without switching to a different mental model.

RGB and HEX are two spellings of the same sRGB triple. Converting between them is lossless for opaque colors (aside from rounding).

HSL: think like a color wheel

HSL separates hue (0–360° around the wheel), saturation, and lightness:

color: hsl(239 84% 67%);
color: hsl(239 84% 67% / 50%);

Use HSL when:

You want to spin hue (same saturation/lightness, different brand accent).
You are building simple light/dark variants by changing L only.
Non-specialists will edit the stylesheet and need names that match a picker UI.

Caveat: HSL “lightness” is not how bright a color looks. Pure yellow at 50% L looks brighter than pure blue at 50% L. Palettes stepped only in HSL L often look uneven. For even steps, prefer OKLCH (or check contrast separately—see WCAG Contrast Checker).

OKLCH: perceptual lightness and modern tokens

OKLCH is CSS Color Level 4. Channels are roughly:

Channel	Meaning	Typical range in CSS
L	Lightness	`0%`–`100%` (perceptual)
C	Chroma (colorfulness)	`0` upward (higher = more vivid)
H	Hue angle	`0`–`360`

color: oklch(62.7% 0.17 149.2);
color: oklch(62.7% 0.17 149.2 / 0.9);

Use OKLCH when:

You build a scale (50 → 900) and want steps that feel even.
You keep L fixed and rotate H for harmonious accents.
You are designing toward displays that can show colors outside classic sRGB (wide-gamut pipelines), while still writing one CSS function.

Caveat: Not every OKLCH triple maps into sRGB. When a converter (or browser) maps back to HEX/RGB for older pipelines, out-of-gamut values get clamped—the swatch may shift slightly. Treat HEX/RGB as the sRGB projection, not a second independent source of truth.

Browser support for oklch() is strong in current evergreen browsers; keep a HEX fallback only if you still ship to very old clients.

Which format should your tokens use?

Practical defaults many teams land on:

Author in OKLCH or HSL (easy to adjust), store HEX if tooling and legacy CSS expect it—or store OKLCH if your build already assumes modern CSS.
Use RGB at the boundary with canvas, WebGL, or image processing.
Convert at edit time, not by hand. Rounding differences of one RGB unit are normal; lock one format as canonical in the design system so PRs do not thrash between #6366f1 and rgb(99 102 241).

Opacity belongs in the format you edit (/ alpha in modern functions, or 8-digit HEX). Mixing opaque HEX tokens with a separate opacity property is fine for whole elements, but for translucent fills prefer color-level alpha so stacking and blending stay predictable.

Convert locally before you paste into production

Brand palettes are not usually secret, but dropping production tokens into a random online converter still sends your scale to someone else’s server. A client-side converter keeps HEX ↔ RGB ↔ HSL ↔ OKLCH in your tab—same privacy model as other LocalTools utilities (Why “local only” matters for developer tools).

Try it on LocalTools

Open the Color converter:

Pick a color with the swatch, type HEX, or click a sample chip (HEX, HSL, or OKLCH).
Fine-tune RGB, HSL, or OKLCH channels—the live preview and every CSS line stay in sync, including opacity.
Copy one format or the full block for design tokens and stylesheets.

Conversions run as JavaScript in your browser; colors are not uploaded. The tool notes that OKLCH follows CSS Color Level 4 (sRGB ↔ OKLab) and clamps out-of-gamut values when projecting back to sRGB.

For type and spacing next to color work, see the CSS Unit Converter & Fluid Type. After you lock a foreground/background pair, check readability with the WCAG Contrast Checker.