← Tools

Tool

Color Palette Generator

Enter any color to generate an 11-shade scale. Each swatch shows WCAG contrast ratios against white and black.

Hex value
50#f1f6fe
on white: 1.09:1W Fail
on black: 19.35:1B AAA
100#deeafc
on white: 1.22:1W Fail
on black: 17.28:1B AAA
200#bed4f9
on white: 1.50:1W Fail
on black: 13.97:1B AAA
300#82b1fc
on white: 2.18:1W Fail
on black: 9.64:1B AAA
400#4188fb
on white: 3.42:1W Fail
on black: 6.14:1B AA
500#0562fa
on white: 5.08:1W AA
on black: 4.13:1B Fail
600#044ec8
on white: 7.17:1W AAA
on black: 2.93:1B Fail
700#033fa0
on white: 9.45:1W AAA
on black: 2.22:1B Fail
800#032f78
on white: 12.49:1W AAA
on black: 1.68:1B Fail
900#07214a
on white: 15.84:1W AAA
on black: 1.33:1B Fail
950#05142e
on white: 18.33:1W AAA
on black: 1.15:1B Fail
CSS output
:root {
  --color-50: #f1f6fe;
  --color-100: #deeafc;
  --color-200: #bed4f9;
  --color-300: #82b1fc;
  --color-400: #4188fb;
  --color-500: #0562fa;
  --color-600: #044ec8;
  --color-700: #033fa0;
  --color-800: #032f78;
  --color-900: #07214a;
  --color-950: #05142e;
}