Skip to content

Web

CSS Color Functions

Modern CSS accepts HEX, rgb(), hsl(), hwb(), lab(), lch(), and oklch() in one cascade. Use these snippets when you need perceptual ramps or wide-gamut output without leaving the stylesheet. Spec reference: Documentation.

Open color converter →

Starter template

/* Modern CSS color syntax */
.brand {
  color: #7c3aed;
  color: oklch(0.55 0.22 303);
  background: color-mix(in oklch, #7c3aed 70%, white);
}

Color samples

FAQ

Which CSS color function should I default to?

Use HEX or rgb() for broad support. Prefer oklch() and color-mix() when your baseline browsers support CSS Color Level 4 — they keep lightness predictable when mixing tints.

Does relative color syntax work everywhere?

oklch(from …) and relative color are newer. Check browser support or provide HEX fallbacks in the cascade.

Can I copy the syntax chips?

Yes — click the secondary chip to copy platform syntax. HEX and RGB chips copy sRGB values for mockups, design handoff, and ChromaXP tools.

Are RGB and CMYK print-ready?

RGB and CMYK here are computed from HEX for quick reference. For ink and paper, re-check against your print profile or Pantone bridge.