Color Shades Generator
Generate an 11-step color scale (50–950) from any base color. The hue and saturation stay constant while lightness varies from near-white (50) through your base color (500) to near-black (950). Each shade shows its HEX, copy button, and closest Pantone Solid Coated match with ΔE 2000. Export the whole scale as CSS variables, a Tailwind config, or plain JSON.
Loading scale...
What is a color shade scale?
A color shade scale is a family of colors derived from a single base color by varying lightness while keeping hue and saturation constant. Standard design-system scales have 9 to 11 steps numbered from light to dark — Tailwind CSS uses 50 to 950, Material Design uses 50 to 900, and IBM Carbon uses 10 to 100. The purpose is the same in every system: give developers a fixed set of named steps they can use for backgrounds (light steps), borders (medium steps), text (dark steps), and hover or active states (adjacent steps) — all derived from a single brand color.
The scale convention matters because it produces consistency across a design system. If the button background is blue-600, the hover state is blue-700, and the text on the button is blue-50, a designer can always reason about which step is darker, lighter, or adjacent without looking up HEX values. That predictability is what makes scale-based design systems scale (literally) to hundreds of components without becoming incoherent.
How the scale is generated
The base color is converted to HSL. Hue and saturation are preserved exactly. Lightness is then interpolated across 11 anchor points chosen to match the visual rhythm of a Tailwind-style scale:
- 50 — 97% lightness (near-white)
- 100 — 94% lightness
- 200 — 88% lightness
- 300 — 80% lightness
- 400 — 71% lightness
- 500 — the base color's lightness
- 600 — base lightness minus 10%
- 700 — base lightness minus 20%
- 800 — base lightness minus 28%
- 900 — base lightness minus 35%
- 950 — base lightness minus 42%
This produces a scale where the light half (50–400) is symmetric (fixed lightness anchors), and the dark half (600–950) scales proportionally from the base color's own lightness. A very dark base color produces a scale that compresses toward the dark end; a very light base color produces a scale that compresses toward the light end. Both are valid — real design systems often override specific steps after generation to tune contrast, but the generated scale is a principled starting point.
Why use a scale instead of individual colors?
Scales enable systematic design. In a design system with 40 components and 5 states each, using individual hand-picked colors would require 200 color decisions. Using a scale reduces that to 1 decision per component (which step for which state), with the scale itself being only 11 colors. That is a 95% reduction in color decision-making — and every decision is now defensible ("this is one step darker than the base") rather than subjective ("this feels a bit darker").
Scales also make accessibility audits tractable. You can compute contrast ratios for every meaningful pair in a scale once and know, for the entire system, which text/background combinations pass WCAG AA and which do not. Adding a new component that uses existing scale steps inherits that audit automatically. Individual color decisions, by contrast, require re-auditing every pairing — which in practice means audits get skipped and accessibility regresses.
Understanding the Pantone matches
Each shade shows its closest Pantone Solid Coated match with a Delta E 2000 value. The match is computed against all 2,371 Pantone colors using the CIE standard for perceptual color difference. A Delta E under 2 means the shade is visually indistinguishable from the Pantone match at normal viewing distance; under 5 means close enough for most purposes; over 10 means they are only loosely related.
Extremely light shades (50, 100) and extremely dark shades (900, 950) often have poor Pantone matches because the Pantone library has relatively few near-white and near-black codes. That is expected — the Pantone system is optimized for mid-tone brand colors, not for a full lightness scale. If you need print specifications for a light or dark shade, the closest Pantone is a starting point; verify with a physical chip before production.
Export formats
Three exports are provided. CSS variables generates a :root block with one variable per step — paste into any stylesheet and reference as var(--color-500). Tailwind config generates a theme.extend.colors object ready to paste into tailwind.config.js — this is the format most modern CSS-in-JS and utility-first frameworks expect. JSON generates a plain object suitable for programmatic consumption in JavaScript, TypeScript, design tooling, or Figma plugins.
Use cases
- Brand system foundation. Turn a single brand Pantone or HEX color into a full 11-step scale for design systems and component libraries.
- Tailwind setup. Add a custom brand color scale to a Tailwind project without hand-picking 11 HEX values.
- Design tokens. Export as CSS variables for a design-token system that feeds both design tools and production code.
- Consistent hover states. Derive predictable hover, focus, and active states from the base color — one step darker or lighter, always.
- Data visualization. Sequential color scales for charts (heatmaps, choropleths) benefit from a perceptually even lightness ramp.
- Print palettes. When building a print-based brand identity, matching each scale step to a Pantone gives an immediate, complete print palette.
Common mistakes
- Assuming 500 is always the "true" color — for very dark or very light base colors, 500 is where the base sits, but the readable-mid-tone step might be 400 or 600 depending on the color's lightness.
- Using the scale for chart data without checking perceptual uniformity — the scale is not perceptually uniform (CSS HSL is not perceptually uniform), so the visual steps may not be evenly distributed.
- Trusting Pantone matches on extreme shades for production — near-white and near-black Pantones are sparse, so the matches may be visibly distant.
- Hardcoding HEX values from the export instead of variables — if the base color ever changes, you will have to update 11 values instead of one.
- Ignoring contrast — the scale itself does not guarantee readable pairings; check AA contrast for any text/background pairing you build from it.
Frequently asked questions
What is a color shade scale?
A shade scale is a family of related colors generated from a single base color by varying its lightness while keeping the hue and saturation fixed. Typical design-system scales have 9 to 11 steps numbered from light (50 or 100) to dark (900 or 950), with the original base color at the 500 position. Tailwind CSS, Material Design, and most modern design systems use this pattern because it gives developers predictable steps for backgrounds, borders, hover states, and text — all from a single brand color.
How does this generator create the scale?
The base color is converted to HSL (hue, saturation, lightness). The hue and saturation are kept constant, while the lightness is varied across 11 fixed anchor points: 97% (shade 50), 94% (100), 88% (200), 80% (300), 71% (400), the base lightness (500), then progressively darker steps for 600 through 950. This produces a scale where 50 is nearly white, 500 is the original color, and 950 is nearly black — while preserving the hue identity of the base color throughout.
What does 50, 100, 200... 950 mean?
The numbers are arbitrary but widely used conventions from Tailwind CSS: lower numbers are lighter, higher numbers are darker, and the base color sits at 500. Different design systems use different conventions (Material Design uses 50–900, IBM Carbon uses 10–100), but the tailwind-style 50–950 scale has become a de facto standard because it is easy to remember and maps cleanly to Tailwind configuration. You can rename the steps in your own design system — the numbers are just labels.
How are the closest Pantone matches determined?
For each shade in the scale, the generator computes the color HEX, converts it to CIELAB, and compares it against all 2,371 Pantone Solid Coated colors using Delta E 2000 — the CIE standard for perceptual color difference. The closest match is shown with its ΔE value: under 2 is very close, 2–5 is close, 5–10 is related, and over 10 is loosely related. If you need a print spec for the whole scale, use the closest Pantone per shade as a starting point, then verify with physical chips.
Can I export the scale to CSS or Tailwind?
Yes — three export formats are built in. The CSS variables export produces a :root block with --color-500, --color-600, and so on. The Tailwind config export produces a theme.extend.colors block ready to paste into tailwind.config.js. The JSON export produces a plain object you can import into any JavaScript or TypeScript project. All three preserve the 11-step scale and use the same HEX values you see in the UI.
Why does the scale lose saturation at the extremes?
This generator keeps the base saturation constant for all shades, so the scale stays true to the base color. Some design systems reduce saturation slightly at the extreme light (50–100) and dark (900–950) steps because highly saturated near-whites and near-blacks look unnatural. If you need that behavior, adjust the HEX values manually after export, or use a color library like color.js that supports chroma-aware scale generation. For most brand systems, constant-saturation scales are perfectly usable.
Can I use these scales in production?
Yes — the HEX values are real sRGB colors and can be pasted directly into CSS, Tailwind, or any design system. The closest-Pantone matches are approximations and should be verified against physical chips before ordering print. For digital use, the scale is exact. For print use, use the Pantone matches as starting points and confirm with a printer or Pantone swatch book.