Color Shades Generator
Give it one color and get a complete tint and shade scale, with contrast ratings and ready-to-paste CSS, Tailwind or JSON.
:root {
--brand-50: #f3f3fc;
--brand-100: #e7e6f9;
--brand-200: #cbc9f3;
--brand-300: #a6a1ec;
--brand-400: #7b74e6;
--brand-500: #4f46e5;
--brand-600: #2a1fdb;
--brand-700: #251db4;
--brand-800: #20198f;
--brand-900: #19156b;
--brand-950: #120f48;
}What the Color Shades Generator does
- Builds a complete 50-950 shade scale from a single colour, in the style design systems use.
- Accepts hex, rgb(), hsl() and common colour names.
- Shows the WCAG contrast ratio and rating for every step against readable label text.
- Exports the scale as CSS custom properties, a Tailwind config block, or JSON.
What it doesn't do
- It doesn't generate complementary or harmony palettes from colour theory.
- It doesn't simulate colour blindness.
- It doesn't check contrast between two arbitrary colours you choose — each rating is against the label shown on that swatch.
Frequently asked questions
What do the numbers 50 to 950 mean?
They're lightness steps, a convention popularised by Tailwind CSS: 50 is nearly white, 500 is around the base colour, and 950 is nearly black. Naming shades by number rather than by feel makes a palette far easier to use consistently across a product.
What counts as enough contrast?
WCAG asks for a ratio of at least 4.5:1 for normal body text and 3:1 for large text, with 7:1 as the stricter AAA target. Each swatch shows its ratio and rating, so you can tell at a glance which steps are safe to put text on.
Why doesn't step 500 exactly match my colour?
The scale keeps your hue but places each step at a fixed lightness so the ramp reads evenly. Your original colour is preserved exactly at whichever step sits closest to its lightness, and that step is marked as the base.