CSS Color Functions: Values, Alpha and Fallbacks

Use rgb() for channel values, hsl() for hue-oriented edits and oklch() for perceptual palette exploration. Choosing a notation is separate from choosing a readable foreground/background pair. Start with an opaque example, then add transparency only when you know what will be behind it.

Write equivalent opaque sRGB values

.hex { color: #FF0000; }
.rgb { color: rgb(255 0 0); }
.hsl { color: hsl(0 100% 50%); }

These three declarations describe the same red. In modern space-separated syntax, an optional alpha follows a slash. A transparent color describes a compositing input; its appearance depends on the background, so passing the original RGB triplet to an opaque checker is insufficient.

Treat alpha as part of the design

.overlay { background: rgb(0 0 0 / 50%); }

Place this overlay over white and then over a photograph. The results differ even though the declaration does not. For a contrast test, flatten or calculate the relevant foreground/background composition in its actual context. Keep essential text on a controlled surface when that composition varies.

Declare a deliberate fallback

.badge {
  background: #6366F1;
  background: oklch(60% 0.20 280);
  color: #FFFFFF;
}

The two backgrounds are intentionally separate candidates, not equivalent conversions. Inspect both in the browsers you support and test each with white text. Syntax support alone does not promise identical gamut mapping across displays.

Mix only after choosing a color space

.tint { background: #FF8080; background: color-mix(in srgb, red 50%, white); }

Open the converter to inspect a chosen opaque value. Use the color-mix guide for weighting and interpolation examples, then check the finished pair rather than assuming that lightening a color improves every role.