Color Functions

ELI5 — The Vibe Check

CSS color functions let you mix, lighten, darken, and adjust colors right in your stylesheet. No more opening Figma to find 'slightly darker blue' — just tell CSS to do the math. It's like having a tiny paint-mixing station in your code.

Real Talk

Modern CSS color functions include color-mix(), relative color syntax, and wide-gamut color spaces (display-p3, oklch). They enable dynamic color manipulation without preprocessors — adjusting lightness, saturation, and alpha directly in CSS.

Show Me The Code

.btn {
  --accent: oklch(0.7 0.15 250);
  background: var(--accent);
}
.btn:hover {
  background: color-mix(in oklch, var(--accent), black 20%);
}

When You'll Hear This

"Use color-mix() to generate hover states instead of hardcoding darker shades" / "Relative color syntax lets you adjust alpha without redefining the whole color"