GitHubExplore library
← Colour theory

Colour theory / CSS · JSON

Government/Public Service

A complete semantic palette with background, text, accent and interface colors. Inspect contrast and copy CSS tokens.

Download resource
Primary
On Primary
Secondary
On Secondary
Accent
On Accent
Background
Foreground
Card
Card Foreground
Muted
Muted Foreground
Border
Destructive
On Destructive
Ring

Check the contrast

WCAG contrast for this exact color pair. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 for AA.

Aa · 19.28:1

Good design should be easy to read.

AAA normal text

A little color theory

Complementary colors sit opposite each other. Analogous colors sit next to each other. Triadic colors are evenly spaced around the color wheel. Always check contrast after choosing your harmony.

Complementary

Analogous

Triadic

:root {
  --primary: #0F172A;
  --on-primary: #FFFFFF;
  --secondary: #334155;
  --on-secondary: #FFFFFF;
  --accent: #0369A1;
  --on-accent: #FFFFFF;
  --background: #F8FAFC;
  --foreground: #020617;
  --card: #FFFFFF;
  --card-foreground: #020617;
  --muted: #E8ECF1;
  --muted-foreground: #475569;
  --border: #E2E8F0;
  --destructive: #DC2626;
  --on-destructive: #FFFFFF;
  --ring: #0F172A;
}

Build a gradient

Decorative color, with optional gentle movement. Keep readable text on a solid surface.

A few more good starting points