CSS Color Formats: HEX vs RGB vs HSL vs OKLCH

HEX Colors

HEX is the most common format in CSS. It represents red, green, and blue channels as two-digit hexadecimal values (00-FF). A shorthand version compresses 6-digit hex to 3 when each pair has repeated digits.

/* Full 6-digit */
color: #ff6600;

/* Shorthand 3-digit (same as #ff6600) */
color: #f60;

/* With alpha (8-digit hex) */
color: #ff6600cc;  /* 80% opacity */

HEX is compact and universally supported. Design tools like Figma export colors as HEX by default. The downside: it's not human-readable. You can't tell that #639 is a shade of purple without converting it.

RGB and RGBA

RGB represents colors as three decimal values (0-255) for red, green, and blue channels. The modern syntax supports a slash-separated alpha value:

/* Legacy syntax */
color: rgb(255, 102, 0);

/* Modern syntax with alpha */
color: rgb(255 102 0 / 0.8);  /* 80% opacity */

/* Percentage-based */
color: rgb(100% 40% 0%);

RGB is useful when working with programmatic color manipulation — generating lighter/darker variants by adjusting channel values. The modern space-separated syntax is cleaner and the recommended form.

HSL and HSLA

HSL (Hue, Saturation, Lightness) maps colors the way humans think about them. Hue is the angle on the color wheel (0-360), saturation is intensity (0-100%), and lightness is brightness (0-100%).

/* Classic orange */
color: hsl(24, 100%, 50%);

/* Same orange, 50% opacity */
color: hsl(24 100% 50% / 0.5);

/* Darker variant: just reduce lightness */
color: hsl(24, 100%, 30%);

HSL makes creating color palettes intuitive. Need a lighter shade? Increase lightness. Want a muted version? Decrease saturation. No mental conversion between channels required.

Modern OKLCH

OKLCH (Oklab Lightness, Chroma, Hue) is a perceptually uniform color space. Unlike HSL, equal changes in values produce visually equal changes in color. This makes it the best format for creating consistent, accessible color systems.

/* Base color */
color: oklch(70% 0.15 30);

/* Lighter variant (perceptually uniform) */
color: oklch(85% 0.15 30);

/* Muted variant */
color: oklch(70% 0.05 30);

When to Use What

Modern CSS also introduces color-mix() for blending colors and relative color syntax for deriving variants. These work with any format:

/* Mix two colors in srgb */
color: color-mix(in srgb, #ff6600 50%, #0066ff 50%);

/* Derive lighter variant using relative color */
.primary-lighter {
  --base: oklch(70% 0.15 30);
  color: oklch(from var(--base) calc(l + 0.1) c h);
}