HEX vs RGB vs HSL vs OKLCH — When Each CSS Color Format Actually Makes Sense

Open any codebase written by someone who learned CSS from W3Schools in 2011, and you’ll find a wall of #rrggbb values. HEX is everywhere — not because it’s the best format for the job, but because it was the format in every tutorial and color picker when most of us first picked up CSS. It still works. It’s not going anywhere. But in 2026, using HEX for alles is like writing JavaScript without const because you learned from a 2009 blog post.

There are four color formats worth knowing: HEX, RGB, HSL, and OKLCH. Each one is the right call in specific situations — and the wrong call in others. Here’s when to use which.

HEX (#rrggbb / #rrggbbaa)

HEX encodes color as pairs of hexadecimal digits: two for red, two for green, two for blue. #ff5733 translates to rgb(255, 87, 51) — an orange-red. Without a color picker open, you can’t read that value; you just have to know it.

There’s a shorthand: #f53 expands to #ff5533. It only works when both digits in each pair are identical. Transparency is the fourth pair: #ff5733cc — where cc is the alpha channel. That’s approximately 80% opacity for those keeping score at home (0xCC / 0xFF ≈ 0.8). Totally valid, completely illegible.

When HEX makes sense

• Design tokens from Figma or Sketch. Designers export HEX. You paste HEX. That’s the workflow. Don’t fight it.
• Anywhere the value is static and visual tooling controls it. If a VS Code color picker or browser DevTools is the thing producing the value, HEX is fine.
• Third-party integrations that only accept HEX input.

When HEX is the wrong call

• Modifying colors programmatically — you can’t reasonably do math on #ff5733
• Expressing tonal relationships — there’s no intuitive way to derive a lighter or darker variant
• Building a design system with semantic tokens

RGB / RGBA

RGB spells out the same red, green, blue channels in plain decimal. rgb(255, 87, 51) is the same orange-red as #ff5733, but the channel values are at least human-readable numbers. The modern CSS Color Level 4 syntax drops the commas: rgb(255 87 51). Transparency is expressed with a slash: rgb(255 87 51 / 50%). The old rgba(255, 87, 51, 0.5) still works — browsers haven’t dropped it and won’t.

When RGB makes sense

• Color manipulation in JavaScript. When you need to adjust brightness by blending with white: you can do arithmetic directly on the channel values.
• Canvas and WebGL. The APIs deal in 0–255 integers or 0–1 floats. RGB maps directly to what the underlying pixel pipeline expects.
• When you get channel values from a hardware sensor or image library and you don’t need to convert.

When RGB is the wrong call

• Designing color schemes — there’s no visual mental model for what small RGB adjustments look like
• Dark mode theming — you’d need to recalculate all three channels to shift lightness

HSL (Hue / Saturation / Lightness)

HSL is the first color format that maps to how humans actually think about color. Hue is an angle on the color wheel (0–360°), saturation controls how vivid the color is (0% = gray, 100% = pure), and lightness controls how bright it is (0% = black, 100% = white). hsl(14 100% 60%) is that same orange-red.

The practical advantage: if you want a darker variant of a color, decrease the lightness value. A muted version? Decrease saturation. You can derive a full tonal palette from a single hue value. This is why CSS custom property systems built on HSL are so common:

:root {
  --brand-hue: 14;
  --brand-saturation: 100%;

  --brand-400: hsl(var(--brand-hue) var(--brand-saturation) 70%);
  --brand-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --brand-600: hsl(var(--brand-hue) var(--brand-saturation) 50%);
  --brand-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
}

Transparency works the same way as the others: hsl(14 100% 60% / 50%).

There’s one real limitation with HSL: its lightness scale is not perceptually uniform. Two colors with the same L value can look very different in brightness — try hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) side by side. Yellow looks dramatically brighter, even though they share L=50%. This matters for accessible design and especially for color gradients.

When HSL makes sense

• Color systems and design tokens. The single-hue palette pattern above is ergonomic and readable.
• Dark mode theming. Swap L values, keep everything else. It works cleanly.
• Tints and shades in CSS custom properties — the use case it was designed for.

OKLCH — The Modern Replacement

OKLCH is what HSL should have been. It describes color in three values: Lightness (0–1), Chroma (like saturation, roughly 0–0.4), and Hue (0–360°). oklch(0.65 0.18 28) is approximately the same orange-red.

The key difference from HSL is perceptual uniformity. In OKLCH, two colors at the same L value actually look equally bright to the human eye. Yellow at L=0.65 and blue at L=0.65 will appear to have similar luminance — unlike in HSL where yellow dominates. This matters in two specific ways:

• Accessible design. When you calculate contrast ratios based on L values, they reflect what users actually perceive — not just what the math says.
• Gradients. An HSL gradient from blue to yellow goes through a muddy gray band in the middle. The same gradient in OKLCH stays vivid throughout because the intermediate steps stay at consistent perceived brightness.

Browser support as of 2023: all modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+). No IE11 support — and nobody shipping new code in 2026 is targeting IE11.

Tailwind v4 moved its entire color palette to OKLCH. That’s not a minor implementation detail — it’s a signal from the most widely-used CSS framework that this is the right direction for color systems.

If you’re building or experimenting with HSL or OKLCH gradients, the CSS-Gradient-Generator on IO Tools supports both formats directly — useful for seeing the difference in gradient quality side by side.

When OKLCH makes sense

• New design systems built from scratch. If you’re defining your color tokens today, OKLCH gives you perceptual uniformity that HSL doesn’t.
• Gradient-heavy UIs. The difference in gradient quality is visible and meaningful.
• Accessible color palettes where you need contrast ratios to reflect actual visual perception.

The Same Color in All Four Formats

Here’s rgb(255, 87, 51) — a warm orange-red — expressed in every format, with 50% transparency variants:

Format	Einfarbige Fläche	50% Transparent
HEX	#ff5733	#ff573380
RGB	rgb(255 87 51)	rgb(255 87 51 / 50%)
HSL	hsl(14 100% 60%)	hsl(14 100% 60% / 50%)
OKLCH	oklch(0.65 0.18 28)	oklch(0.65 0.18 28 / 50%)

Notice which one you’d want to edit by hand if you needed to make the color 20% darker. HEX: you’d open a color picker. RGB: you’d do arithmetic on three values. HSL: change the L value from 60% to 40%. OKLCH: change the L value from 0.65 to 0.45. The HSL and OKLCH versions express the intent directly.

The Practical Migration Path

Don’t go refactor your existing HEX values. They work, they’re not broken, and the ROI on that change is essentially zero. Leave them.

For new work, apply these rules:

• Static colors from a designer or design tool → HEX. Paste what Figma gives you. No conversion needed.
• Colors you manipulate in JavaScript, or pass to canvas/WebGL → RGB. The channel-based math maps cleanly.
• New CSS custom properties and design tokens → HSL or OKLCH. You want the ability to derive tints and shades without recalculating three separate values.
• New design system from scratch, or gradient-heavy work → OKLCH. The perceptual uniformity is worth the slight learning curve for Chroma values.

A concrete pattern for CSS custom properties in a new project:

:root {
  /* Define the base in OKLCH */
  --brand: oklch(0.65 0.18 28);

  /* Derive tonal variants by adjusting L */
  --brand-light: oklch(0.78 0.14 28);
  --brand-dark:  oklch(0.48 0.20 28);
  --brand-muted: oklch(0.65 0.08 28);

  /* Transparency with the slash syntax */
  --brand-ghost: oklch(0.65 0.18 28 / 15%);
}

This is readable, editable without tooling, and produces better gradients than the equivalent HSL approach.

Das Fazit

HEX isn’t wrong — it’s just specialized. It’s optimized for values you get from visual tools and paste into code, not for values you think about or modify. RGB is useful when you need to interface with JavaScript or canvas APIs. HSL is still a solid choice for design tokens if you’re working in an existing codebase that uses it. OKLCH is where you want to land for new design systems.

The barrier to adopting HSL or OKLCH is lower than it looks. You don’t need to migrate anything — just start using them for the next set of tokens you write. The Farbauswahl on IO Tools shows any color across all four formats simultaneously, which is a useful reference when you’re converting existing HEX values into HSL or OKLCH for a new token.

Das könnte Ihnen auch gefallen