Andrew Fribush

Code Bits

Color System Generator

Generate accessible color palettes powered by D3.js color science. Get shades, harmonies, and WCAG contrast ratios.

H: 214° S: 69% L: 39%

Presets

Color Scale

50

#f2f7fd

AAA

100

#e5eefa

AAA

200

#c3d8f4

AAA

300

#9cbfed

AAA

400

#6da0e4

AAA

500

#3d81db

AA

600

#2365bd

AA

700

#1a4c8e

AAA

800

#133767

AAA

900

#0b203c

AAA

950

#06101e

AAA

Color Harmonies

Complementary

Analogous

Triadic

Split Complementary

Contrast Checker

White on Color

Ratio: 6.80:1AA

Black on Color

Ratio: 3.09:1AA Large

AAA = 7:1+ (highest accessibility)

AA = 4.5:1+ (normal text)

AA Large = 3:1+ (large text only)

CSS Variables

:root {
  --color-50: #f2f7fd;
  --color-100: #e5eefa;
  --color-200: #c3d8f4;
  --color-300: #9cbfed;
  --color-400: #6da0e4;
  --color-500: #3d81db;
  --color-600: #2365bd;
  --color-700: #1a4c8e;
  --color-800: #133767;
  --color-900: #0b203c;
  --color-950: #06101e;
}