Codectionary / Developer documentation / CSS

Color Values

CSS supports several ways to specify color: named colors, hexadecimal, rgb()/rgba(), hsl()/hsla(), and the modern color functions oklch() and color-mix(). All accept an alpha channel for transparency. oklch() is increasingly preferred because it produces more perceptually uniform, predictable color adjustments than older formats.

Syntax

#hex, rgb(r g b / a), hsl(h s l / a), oklch(l c h)

Examples

The Classic Formats

Named colors, hex, rgb, and hsl.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.a { color: coral; }                     /* named color */
.b { color: #ff6b35; }                    /* hex */
.c { color: rgb(255 107 53); }            /* rgb, modern space-separated syntax */
.d { color: rgb(255 107 53 / 50%); }      /* rgb with alpha transparency */
.e { color: hsl(16 100% 60%); }           /* hue, saturation, lightness */
  1. Separate labelled samples let you compare colour formats or the modern functions.
  2. Equivalent formats can describe the same colour; a format change alone is not meant to change the layout.
  3. Change one channel or percentage and rerun; check contrast against the actual background.
HTML used by this example
<p class="a">Named colour: coral</p><p class="b">Hexadecimal colour</p><p class="c">RGB colour</p><p class="d">RGB with alpha transparency</p><p class="e">HSL colour</p>

Modern Color Functions

oklch() and color-mix(), which offer more predictable, perceptually accurate results.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.modern {
  color: oklch(70% 0.15 50); /* lightness, chroma, hue - perceptually uniform */
}

.mixed {
  background: color-mix(in oklch, blue 60%, white); /* blends two colors directly in CSS */
}
  1. Separate labelled samples let you compare colour formats or the modern functions.
  2. Equivalent formats can describe the same colour; a format change alone is not meant to change the layout.
  3. Change one channel or percentage and rerun; check contrast against the actual background.
HTML used by this example
<p class="modern">Perceptual colour: OKLCH</p><div class="mixed preview-tile">A colour-mix surface</div>

Parameters and values

  • hex (#rrggbb): Hexadecimal color, most common legacy format
  • rgb() (r g b / alpha): Red, green, blue, with optional alpha
  • hsl() (hue sat light / alpha): Often easier to reason about for adjusting shades
  • oklch() (lightness chroma hue): Modern, perceptually uniform color space

Best practices

  • Use hsl() when you need to programmatically create color variations (lighter/darker shades of the same hue) - adjusting lightness alone is intuitive
  • Reach for oklch() in new projects for more perceptually accurate and predictable color mixing and adjustments
  • Use the modern space-separated rgb()/hsl() syntax with a slash for alpha (rgb(0 0 0 / 50%)) rather than the older comma-separated rgba()
  • Store brand colors as CSS custom properties rather than repeating hex codes throughout a stylesheet

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading