MakeMyPalette

Accessible Palette Generator

Generate a tonal scale (50–950) from a brand color and see WCAG AA/AAA contrast ratings for every shade against white, black, and the other shades.

Brand color & scale name

Base color
H243
S75
L59

Used as the prefix for your CSS variables, SCSS variables, and Tailwind color key. Closest scale stop to your base: brand-400.

Tonal scale (50 → 950)

  • brand-50
    on white1.09Failon black19.20AAA
  • brand-100
    on white1.25Failon black16.77AAA
  • brand-200
    on white1.67Failon black12.61AAA
  • brand-300
    on white2.63Failon black7.98AAA
  • brand-400closest to base
    on white4.86AAon black4.32AA Large
  • brand-500
    on white8.02AAAon black2.62Fail
  • brand-600
    on white10.30AAAon black2.04Fail
  • brand-700
    on white12.29AAAon black1.71Fail
  • brand-800
    on white14.55AAAon black1.44Fail
  • brand-900
    on white16.82AAAon black1.25Fail
  • brand-950
    on white18.82AAAon black1.12Fail

How shades pair with each other

Each row is a darker shade rendered as text on a lighter shade of the same scale — the most common pattern for tinted UI surfaces.

brand-700 on brand-5011.24:1
AAA
brand-800 on brand-10011.62:1
AAA
brand-900 on brand-20010.10:1
AAA
brand-50 on brand-70011.24:1
AAA
brand-50 on brand-90015.38:1
AAA
brand-100 on brand-95015.03:1
AAA
CSS variables
:root {
  --brand-50: #f5f4fa; /* on white 1.09 · on black 19.20 */
  --brand-100: #e5e4f7; /* on white 1.25 · on black 16.77 */
  --brand-200: #c7c4f2; /* on white 1.67 · on black 12.61 */
  --brand-300: #9b96ed; /* on white 2.63 · on black 7.98 */
  --brand-400: #655ee8; /* on white 4.86 · on black 4.32 */
  --brand-500: #362de1; /* on white 8.02 · on black 2.62 */
  --brand-600: #241cc4; /* on white 10.30 · on black 2.04 */
  --brand-700: #211b9d; /* on white 12.29 · on black 1.71 */
  --brand-800: #1c1778; /* on white 14.55 · on black 1.44 */
  --brand-900: #161254; /* on white 16.82 · on black 1.25 */
  --brand-950: #0e0c31; /* on white 18.82 · on black 1.12 */
}

How to use the accessible palette generator

Pick the brand color you want the scale to revolve around. The tool keeps that hue and varies lightness across eleven stops — the same 50, 100, 200 … 950 ramp Tailwind ships with — while easing saturation slightly at the lightest and darkest ends so the scale does not look neon at 50 or muddy at 950. The shade closest to your base lightness is highlighted so you can see which step of the scale represents your original color.

Each shade row carries two contrast badges: the WCAG ratio against pure white and against pure black. AAA passes are dark green, AA passes are bright green, AA-large-only is amber, and fails are red. The badges use an icon plus the label so the status is readable in colorblind simulators too. Use this to decide which shade you can use as text on a white surface (look for AA or AAA on white), and which shade is safe as text on a dark hero (look for AA or AAA on black).

The pair-preview block shows the six most common shade pairings you will hit in real UI — text-700 on bg-50 for a tinted callout, text-50 on bg-900 for a dark hero — with the exact contrast ratio printed underneath. If a pair fails, swap one side of the pairing one or two stops further apart on the scale and the ratio will jump above the threshold.

When you are happy with the scale, name it whatever you call your brand (the default is brand) and copy the CSS, Tailwind, SCSS, or JSON snippet. The CSS and SCSS exports include inline contrast comments next to each variable so the ratios travel with the code — a year from now your future self will thank you when they look at --brand-400 and already know it fails AA on white.

4 Tools · See Also
✱ Privacy

Runs in your browser.

Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.

Local-only