Accessible Palette Generator
Generate a tonal scale (50–950) from a brand color and see WCAG AA/AAA contrast ratings for every shade.
Generate a tonal scale (50–950) from a brand color and see WCAG AA/AAA contrast ratings for every shade.
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.
Used as the prefix for your CSS variables, SCSS variables, and Tailwind color key. Closest scale stop to your base: brand-400.
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.
: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 */
}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.