How is this palette generated?

Your base color is converted to HSL, and its hue and saturation are held constant while lightness is stepped from 95% down to 8% in ten stops — the same tint/shade approach used by most design-system color scales (e.g. Tailwind's 50-900 shades).

What do the AA and AAA badges mean?

They're WCAG 2.x contrast levels for text. AA requires at least 4.5:1 contrast for normal text (3:1 for large text, 24px+ or 19px+ bold). AAA is stricter: 7:1 for normal text, 4.5:1 for large text. A swatch's badge shows the best level it reaches against that background.

Why do I get two ratios per swatch?

One ratio is for using the swatch as a background with black text on top; the other is for white text on top. This tells you, at a glance, which text color to pair with each shade for a given accessibility level — light shades usually pass with black text, dark shades with white text.

Can I use these colors as both background and text?

Yes — the same ten swatches work as a full scale: pick a light one for backgrounds and a dark one (from the same hue) for text on top of it, and check that the pairing you choose also passes the contrast ratio you need.

Is my color processed anywhere but my browser?

No — the palette and every contrast ratio are computed locally with HSL and WCAG relative luminance math. Nothing is uploaded.

ACCESSIBLE PALETTE GENERATOR

Turn one brand color into a full, WCAG-checked tint/shade scale with contrast ratios and AA/AAA badges built in.

Base / brand color

Lightness 95%

vs black text18.71:1AAA

vs white text1.12:1Fail

Lightness 85%

vs black text14.75:1AAA

vs white text1.42:1Fail

Lightness 75%

vs black text11.45:1AAA

vs white text1.83:1Fail

Lightness 65%

vs black text8.76:1AAA

vs white text2.40:1Fail

Lightness 55%

vs black text6.65:1AA

vs white text3.16:1Fail

Lightness 45%

vs black text4.78:1AA

vs white text4.39:1Fail

Lightness 35%

vs black text3.24:1Fail

vs white text6.49:1AA

Lightness 25%

vs black text2.12:1Fail

vs white text9.91:1AAA

Lightness 15%

vs black text1.42:1Fail

vs white text14.78:1AAA

Lightness 8%

vs black text1.15:1Fail

vs white text18.33:1AAA

Ratios are WCAG 2.x contrast against pure black (#000) and pure white (#fff) text. AA needs 4.5:1 for normal text (3:1 for large text ≥ 24px or 19px bold); AAA needs 7:1 (4.5:1 for large text).

How to build an accessible color palette

1
Pick your base or brand color with the swatch, or type its hex code.
2
Review the generated palette — ten steps from near-white to near-black at that hue.
3
Check the contrast ratio and AA/AAA badge shown for each swatch against black and white text.
4
Click a swatch's hex code to copy it for use as a text or background color that passes your target level.

Questions

How is this palette generated?: Your base color is converted to HSL, and its hue and saturation are held constant while lightness is stepped from 95% down to 8% in ten stops — the same tint/shade approach used by most design-system color scales (e.g. Tailwind's 50-900 shades).
What do the AA and AAA badges mean?: They're WCAG 2.x contrast levels for text. AA requires at least 4.5:1 contrast for normal text (3:1 for large text, 24px+ or 19px+ bold). AAA is stricter: 7:1 for normal text, 4.5:1 for large text. A swatch's badge shows the best level it reaches against that background.
Why do I get two ratios per swatch?: One ratio is for using the swatch as a background with black text on top; the other is for white text on top. This tells you, at a glance, which text color to pair with each shade for a given accessibility level — light shades usually pass with black text, dark shades with white text.
Can I use these colors as both background and text?: Yes — the same ten swatches work as a full scale: pick a light one for backgrounds and a dark one (from the same hue) for text on top of it, and check that the pairing you choose also passes the contrast ratio you need.
Is my color processed anywhere but my browser?: No — the palette and every contrast ratio are computed locally with HSL and WCAG relative luminance math. Nothing is uploaded.