loading
Code Bits
Generate accessible color palettes powered by D3.js color science. Get shades, harmonies, and WCAG contrast ratios.
H: 214° S: 69% L: 39%
Presets
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
Complementary
Analogous
Triadic
Split Complementary
White on Color
Black on Color
AAA = 7:1+ (highest accessibility)
AA = 4.5:1+ (normal text)
AA Large = 3:1+ (large text only)
: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;
}