Color Shades Generator
Generate 10 tint and shade steps from any base colour.
Ramp (11 steps)
Click any swatch to copy. Ramp matches the 11-step Tailwind default (50–950).
extend: {
colors: {
brand: {
50: "#FFFFFF",
100: "#FFFFFF",
200: "#F5F4FF",
300: "#C4C1FF",
400: "#948EFF",
500: "#635BFF",
600: "#3228FF",
700: "#0C00F4",
800: "#0900C1",
900: "#07008E",
950: "#04005B"
}
}
}:root {
--color-brand-50: #FFFFFF;
--color-brand-100: #FFFFFF;
--color-brand-200: #F5F4FF;
--color-brand-300: #C4C1FF;
--color-brand-400: #948EFF;
--color-brand-500: #635BFF;
--color-brand-600: #3228FF;
--color-brand-700: #0C00F4;
--color-brand-800: #0900C1;
--color-brand-900: #07008E;
--color-brand-950: #04005B;
}What is a Color Shades Generator?
A colour shades generator takes one base colour and produces a ramp — a sequence of tints (lighter variants) and shades (darker variants) graded in perceptually-even steps. The resulting palette is the building block of a design system: instead of scattering HEX codes across a codebase, you reference brand-500, brand-700, etc., and all shades come from the same base.
The Tailwind convention. Tailwind CSS standardised on an 11-step ramp: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The 500 step is the base; lower numbers (50–400) are lighter tints for backgrounds, borders, and large-area fills; higher numbers (600–950) are darker shades for text, icons, and high-contrast surfaces. Adopting this convention from day one makes it trivial to onboard developers familiar with Tailwind.
What makes a good ramp. Consistent visual distance between steps — step 100 should look as different from step 200 as step 600 does from step 700. Simply lightening or darkening in RGB space produces uneven ramps because RGB is not perceptually uniform. Our generator uses the colord library, which interpolates in HSL/Lab space to produce ramps that feel even across the range.
Output formats. The generator produces both a Tailwind config snippet (drop into tailwind.config.ts under theme.extend.colors) and a CSS variables block (for projects without Tailwind). Every swatch can also be clicked to copy its HEX, RGB, or HSL value individually. Name your palette (brand, accent, neutral) and the generator uses that name in both output formats.
Accessibility. For text on each shade, check contrast. Steps 500–900 are usually safe for white text; 50–400 work for navy/black text. The 400→500 transition is where contrast flips — plan your design to avoid text at step 450 or 500 on a light background where WCAG AA fails.
When to use a shade generator vs a palette extractor. Shades are one base colour with tints and shades; palettes are multiple distinct colours. Use shades for brand-colour ramps (your primary, your accent, your greys). Use a palette extractor (our Image Colour Extractor) when you want a harmonious multi-colour scheme from an existing photograph or logo.
How to generate colour shades
- Pick a base colour — paste a HEX or use the picker.
- Name the palette (used in the Tailwind config output).
- Review the 11-step ramp. 500 is the base; lower is lighter, higher is darker.
- Copy individual swatches, the Tailwind config, or CSS variables.
Features
- 11-step Tailwind-matching ramp (50–950).
- Perceptually-even interpolation in HSL/Lab space.
- Tailwind config snippet and CSS variables output.
- HEX / RGB / HSL display for any swatch.
- Copy any swatch with a click.
- Runs in your browser.
Frequently asked questions
- Why 11 steps (50–950)?
- It matches Tailwind CSS's default scale. Adopting this convention keeps your palette instantly compatible with Tailwind and with developers who've learned that scale. The extra 950 step (added in Tailwind 3.3) provides a very dark shade for high-contrast modes and deep backgrounds.
- What's the difference between tints and shades?
- A tint is the base colour mixed with white — lighter variants. A shade is the base mixed with black — darker variants. Our ramp has tints on the low end (50–400) and shades on the high end (600–950), with the base at 500.
- Should I use this for brand colours or greys?
- Both. Use a single-colour ramp per semantic role: brand (your accent), neutral (greys), success (green), warning (yellow), error (red). Five ramps × 11 steps = 55 tokens that cover 95% of UI needs.
- Can I use this without Tailwind?
- Yes. The CSS variables output works in any project — paste it into your :root block and reference the values with var(--color-brand-500), etc.
- How does the ramp stay perceptually even?
- We interpolate lightness in HSL space, not RGB. RGB interpolation produces ramps where some steps look way further apart than others; HSL keeps perceived distance consistent across the range.