v147 · CSS · contrast-color()

Palette Grid

144 colors across hue and lightness. Every label is set with color: contrast-color(var(--bg)). Hover any swatch to see the exact contrast ratio. Watch where the black-to-white boundary shifts.

— black text
— white text
— avg switch lightness
Filter:
white text chosen
black text chosen
color —
hue —
lightness —
contrast-color() —
contrast ratio —

CSS driving every cell

.swatch {
  --bg: hsl(var(--h) var(--s)% var(--l)%);
  background: var(--bg);
  /* contrast-color() picks black or white automatically */
  color: contrast-color(var(--bg));
}

Notice that the black/white switch point is not a straight horizontal line across hues — it bends because luminance perception is non-linear. Yellow-greens stay readable with black text at higher lightness values; deep blues and purples flip to white text earlier.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗