CSS Advanced

CSS Colors (Advanced)

Beyond named colors and hex codes, CSS offers color models that separate hue, saturation, transparency, and lightness. Understanding rgba, hsl, currentColor, and modern functions like oklch gives you precise, maintainable control over your palette.

RGB and RGBA

The rgb() function mixes red, green, and blue channels. The optional alpha channel adds transparency, where 0 is fully transparent and 1 is fully opaque. Modern syntax also allows a slash for alpha.

RGB variations

.a { color: rgb(37, 99, 235); }         /* solid blue */
.b { color: rgba(37, 99, 235, 0.4); }   /* 40% opaque */
.c { color: rgb(37 99 235 / 40%); }     /* modern slash syntax */

HSL and HSLA

hsl() describes color as hue (0-360 degrees around the color wheel), saturation (0-100%), and lightness (0-100%). It is intuitive for building tints and shades because you only adjust one number to lighten or darken.

Channel	Range	Meaning
Hue	0-360	Position on the color wheel (0=red, 120=green, 240=blue)
Saturation	0-100%	Grayscale to vivid
Lightness	0-100%	Black to white
Alpha	0-1 or %	Transparency

Try it: HSL lightness scale

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; display: flex; padding: 30px; background: #111; }
  .sw { flex: 1; height: 90px; display: flex; align-items: flex-end;
        justify-content: center; color: #000; font-size: 12px; padding-bottom: 6px; }
  .s1 { background: hsl(265 90% 85%); }
  .s2 { background: hsl(265 90% 70%); }
  .s3 { background: hsl(265 90% 55%); }
  .s4 { background: hsl(265 90% 40%); color:#fff; }
  .s5 { background: hsl(265 90% 25%); color:#fff; }
</style>
</head>
<body>
  <div class="sw s1">85%</div>
  <div class="sw s2">70%</div>
  <div class="sw s3">55%</div>
  <div class="sw s4">40%</div>
  <div class="sw s5">25%</div>
</body>
</html>

currentColor and opacity

The currentColor keyword equals the element's computed color value, so borders, icons, and shadows can automatically match the text color. The opacity property fades an entire element, including its children, unlike an alpha channel that affects only one color.

Try it: currentColor and opacity

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 30px; background: #f1f5f9; display: flex; gap: 24px; }
  .chip {
    color: #7c3aed;
    border: 2px solid currentColor;   /* matches text */
    padding: 10px 18px; border-radius: 10px; font-weight: bold;
  }
  .faded { opacity: 0.45; }
</style>
</head>
<body>
  <span class="chip">currentColor border</span>
  <span class="chip faded">opacity 0.45</span>
</body>
</html>

Modern color functions

Newer functions describe color in more perceptual or human-friendly ways. hwb() uses hue, whiteness, and blackness. oklch() is a perceptually uniform space where equal lightness changes look equally different to the eye, making it excellent for accessible palettes.

Modern syntax

.a { color: hwb(200 10% 20%); }        /* hue, whiteness, blackness */
.b { color: oklch(70% 0.15 250); }     /* lightness, chroma, hue */
.c { color: oklch(70% 0.15 250 / 0.5); }

💡

Prefer opacity for fading whole components (like a disabled button) and rgba/hsla when you only want one color to be semi-transparent.

⚠️

opacity affects the entire element including text and children; it cannot be un-inherited by a child. Use a transparent background color instead if you need readable text on a faded panel.

Key points

rgba and hsla add an alpha channel for per-color transparency.
HSL makes tints and shades easy by adjusting lightness only.
currentColor mirrors the element's text color for borders and icons.
opacity fades the whole element and its children.
oklch() gives perceptually uniform, accessible color scales.