Color scales
Color Shades Generator
Generate a clean 11-step scale from any color, then copy the full ramp as HEX, CSS variables or Tailwind values.
A color shades generator creates lighter tints and darker shades of one base color. Use the ramp for surfaces, borders and states, then check the text pairs you actually ship.
Live generator
Generate an 11-step color scale
Change the base color and copy the full 50-950 ramp as CSS variables or Tailwind colors.
Use the light steps for tinted backgrounds and the mid steps for borders and secondary actions.
Use a step that supports readable button text. This one uses #111827 text.
Use the dark steps for headings and body copy, then measure the final pair.
Copy the scale
:root {
--color-brand-50: #FBF8F9;
--color-brand-100: #F6E9EC;
--color-brand-200: #F2CFD7;
--color-brand-300: #F0A8B9;
--color-brand-400: #F07591;
--color-brand-500: #F36888;
--color-brand-600: #F27D98;
--color-brand-700: #E95879;
--color-brand-800: #DC375D;
--color-brand-900: #B72E4D;
--color-brand-950: #8B3146;
}export const brand = {
colors: {
50: "#FBF8F9",
100: "#F6E9EC",
200: "#F2CFD7",
300: "#F0A8B9",
400: "#F07591",
500: "#F36888",
600: "#F27D98",
700: "#E95879",
800: "#DC375D",
900: "#B72E4D",
950: "#8B3146",
},
};
Tints, shades and tones
A tint is a color mixed with white. A shade is a color mixed with black. A tone is a color mixed with gray. Design tools often use the word 'shade' for all three, but the difference matters when you are building a system.
Tints are useful for backgrounds and hover states on light interfaces. Shades are useful for text, borders and pressed states. Tones are useful when a pure tint or shade feels too saturated for a large surface.
The generator keeps the hue stable and changes lightness, with a small saturation adjustment at the extremes. That produces a ramp that feels like one family rather than eleven unrelated colors.
Why eleven steps
Eleven steps give you enough range to cover backgrounds, surfaces, borders, muted text, body text and strong accents without making the palette impossible to memorize. Tailwind's 50-950 convention is the most familiar version of this idea.
Fewer steps can work for a small product, but they often force designers to reuse a color for two different jobs. More steps can be useful for a large system, but they increase the chance that two steps are indistinguishable.
The right number is the smallest set that lets you make the decisions you actually need. Eleven is a practical default because it maps cleanly to common UI roles.
How the generator builds each step
The base color is converted to HSL. The hue is preserved, the lightness is moved toward white for the light steps and toward black for the dark steps, and the saturation is reduced slightly at the extremes to avoid neon tints and muddy shades.
The middle step is anchored near the base color so the ramp still feels like the color you started with. The result is a smooth progression rather than a set of arbitrary values.
This is a design aid, not a perceptual color space. If you need equal perceived lightness across different hues, use OKLCH or a similar perceptual model. HSL is fast and predictable, which is useful for a first pass.
HSL ramps are convenient, but they are not perceptually uniform. Two colors with the same HSL lightness can look different in brightness.
Copying the scale
Copy the whole ramp as plain HEX values for a design file, or as CSS custom properties for a stylesheet. The Tailwind format uses the 50-950 naming convention so it can be dropped into a theme.
If you are using a semantic token layer, map the steps to jobs. For example, `--color-surface` might use step 50, `--color-border` step 200, `--color-primary` step 600 and `--color-primary-hover` step 700.
Keep the raw ramp and the semantic mapping in the same repository. If they live in different places, they will drift.
Where color scales fail
A scale fails when the steps are too close together, when the light end is too saturated, or when the dark end loses the hue entirely. It also fails when the team uses raw steps everywhere instead of semantic roles.
Another common problem is assuming that a scale is accessible because it is systematic. A 500 and a 600 can both fail white-text contrast. The scale is a palette, not a compliance check.
Finally, a scale built from one hue may not cover status colors. Success, warning and danger need their own hues, even if they share the same lightness structure.
FAQ
Color Shades Generator FAQ
What is the difference between a tint and a shade?
A tint is mixed with white, a shade is mixed with black, and a tone is mixed with gray. The generator produces a ramp that includes both lighter and darker steps.
How many shades should a color palette have?
Eleven steps from 50 to 950 is a practical default for UI work. Smaller products can use fewer steps if each one has a clear job.
Can I copy the shades as CSS variables?
Yes. The generator can copy the ramp as HEX values, CSS custom properties or a Tailwind-style color object.
Is an HSL shade scale perceptually uniform?
No. HSL is convenient but not perceptually uniform. If you need equal perceived lightness across hues, use OKLCH or another perceptual color space.
Can I generate shades from a brand color?
Yes. Enter the brand HEX value and the generator will build a ramp around it. Then choose the steps that fit your surfaces, borders and actions.
Keep going
Related tools and guides
Tailwind Color Palette Generator
A Tailwind color scale is a family of steps from 50 (lightest) to 950 (darkest). Generate the ramp from a base color, then check that the text and surface steps you actually use pass contrast.
OKLCH Color Palette Generator
OKLCH describes a color with lightness (L), chroma (C) and hue (H). Equal L steps look more evenly bright than equal HSL lightness steps, which makes OKLCH useful for systematic palettes and dark mode.
WCAG Contrast Checker
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. Enter both colors to see whether a pair passes, and switch the foreground to black or white if it does not.
Tailwind Color Tokens That Stay Maintainable
A raw 50-950 ramp is useful. A semantic layer is what keeps a Tailwind codebase from turning into a pile of hard-coded brand steps.
OKLCH for Brand Systems: A Practical Introduction
OKLCH is not a trend. It is a better coordinate system for the same colors. Here is where it helps, where it does not, and how to use it without breaking older browsers.