Design & development

Color guides

Practical color guides for designers and developers. Check text contrast, understand OKLCH in CSS, and choose interface color harmonies.

L 35%

L 45%

L 55%

L 65%

L 75%

Lightness changes from 35% to 75%. Chroma stays at 0.08 and hue at 250°. Equal steps help organize a scale; each text pair still needs a contrast test.

OKLCH in CSS: edit lightness, chroma and hue

Understand OKLCH in CSS with labeled color scales, a CSS code example, and a workflow for checking sRGB output.

Read guide →

Make text readable.

#999999 / #ffffff
2.84:1 · Fails AA normal text

Make text readable.

#595959 / #ffffff
7.00:1 · Passes AA normal text

Same background, darker text. Ratios are calculated with the same color kernel as the checker; the pale sample intentionally demonstrates a failure.

How to use a color contrast checker

Learn how to use a color contrast checker, interpret WCAG text thresholds, and fix a failing foreground without guessing.

Read guide →

Analogous-30° / 0° / 30°

Complementary0° / 180°

Triadic0° / 120° / 240°

Relative hue positions on an OKLCH wheel. The numbers describe angle relationships, not paint mixtures or a guarantee of readable text.

How to use a color wheel for UI palettes

Learn how to use a color wheel to choose analogous, complementary and triadic colors, then assign and test interface roles.

Read guide →