← DevTools/
🎨ColorSystemProLIVE
#4F8EF7 · HSL(218°, 91%, 64%)

Hex color

Scale name

Sample brand colors

Primary scale — 11 steps

50

#eef1f7

100

#d9e0ed

200

#acc2e7

300

#5993f7

400

#1f6df4

500

#508df7

600

#1f6df4

700

#0a51cd

800

#1c407d

900

#132a53

950

#0d1e3a

Neutral scale (hue-tinted grays)

50

#f7f7f8

100

#eeeff1

200

#dee0e3

300

#c2c6cb

400

#969ca6

500

#717884

600

#575c66

700

#3f434a

800

#2a2d32

900

#1c1e21

950

#101113

WCAG contrast ratios — AA requires 4.5:1 · AAA requires 7:1

StepSwatchvs Whitevs BlackAA ⬜AA ⬛AAA ⬜AAA ⬛
50
1.1318.56✗✓✗✓
100
1.3315.84✗✓✗✓
200
1.8111.62✗✓✗✓
300
3.036.94✗✓✗✗
400
4.614.55✓✓✗✗
500
3.236.49✗✓✗✗
600
4.614.55✓✓✗✗
700
6.843.07✓✗✗✗
800
10.12.08✓✗✓✗
900
14.151.48✓✗✓✗
950
16.611.26✓✗✓✗

Dark mode preview

Dashboard

Your design system in action

500
400
300

Light mode preview

Dashboard

Your design system in action

100
200
300
CSS
:root {
  /* Primary color scale */
  --color-primary-50: #eef1f7;
  --color-primary-100: #d9e0ed;
  --color-primary-200: #acc2e7;
  --color-primary-300: #5993f7;
  --color-primary-400: #1f6df4;
  --color-primary-500: #508df7;
  --color-primary-600: #1f6df4;
  --color-primary-700: #0a51cd;
  --color-primary-800: #1c407d;
  --color-primary-900: #132a53;
  --color-primary-950: #0d1e3a;

  /* Primary neutral scale */
  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #eeeff1;
  --color-neutral-200: #dee0e3;
  --color-neutral-300: #c2c6cb;
  --color-neutral-400: #969ca6;
  --color-neutral-500: #717884;
  --color-neutral-600: #575c66;
  --color-neutral-700: #3f434a;
  --color-neutral-800: #2a2d32;
  --color-neutral-900: #1c1e21;
  --color-neutral-950: #101113;
}

Audit an existing palette

Paste the colors you already ship and every pair is scored against WCAG 2.1.

Paste an existing palette — CSS custom properties, a color object, or a list of hex values — and every pair is scored against WCAG 2.1. Failures name a nearby colour that actually reaches 4.5:1.

Paste a palette above to audit its contrast.