Code Bits

Color System Generator

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

H: 40° S: 60% L: 58%

Presets

Color Scale

50

#fcf9f3

AAA

100

#f9f3e7

AAA

200

#f1e2c6

AAA

300

#e8d0a1

AAA

400

#dcb974

AAA

500

#d1a247

AAA

600

#b4862d

AA

700

#876422

AA

800

#624918

AAA

900

#392b0e

AAA

950

#1d1507

AAA

Color Harmonies

Complementary

Analogous

Triadic

Split Complementary

Contrast Checker

White on Color

Ratio: 2.20:1Fail

Black on Color

Ratio: 9.53:1AAA

AAA = 7:1+ (highest accessibility)

AA = 4.5:1+ (normal text)

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

CSS Variables

:root {
  --color-50: #fcf9f3;
  --color-100: #f9f3e7;
  --color-200: #f1e2c6;
  --color-300: #e8d0a1;
  --color-400: #dcb974;
  --color-500: #d1a247;
  --color-600: #b4862d;
  --color-700: #876422;
  --color-800: #624918;
  --color-900: #392b0e;
  --color-950: #1d1507;
}