Tint & Shade Generator
Generate a complete range of tints, shades and grayscale tones for any color, with a choice of RGB Blend or HSL Lightness mixing, plus a ready-to-export Tailwind-style 50–950 color scale for design systems.
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#F8F5FE',
100: '#EBE1FC',
200: '#D1BAF9',
300: '#B793F5',
400: '#9965F1',
500: '#7C3AED',
600: '#6931C9',
700: '#5427A1',
800: '#3E1D77',
900: '#28134C',
950: '#160A2B',
},
},
},
},
}How to Generate Tints and Shades
Features
One Colour Was Never Going to Be Enough
A finished interface needs far more than one shade of its brand colour — a hover state needs to be a little darker, a disabled state needs to be washed out, a subtle background tint needs to be almost white but still recognisably on-brand. Picking each of those by eye, one hex code at a time, produces inconsistent, slightly-off results that don't actually relate to each other mathematically, even if they look close.
This tool generates the entire range at once, computed consistently from a single base colour, so every tint and shade actually belongs to the same family rather than being separately eyeballed guesses. Adjust the base colour once and the whole scale updates together.
Two Honest Ways to Mix a Colour
Most tint/shade tools pick one mixing method and don't tell you which — this one exposes the choice because it genuinely changes the result. RGB Blend mixes your colour's red, green and blue values directly toward white or black, the same arithmetic as physically mixing paint — colours often mute slightly as they approach the extremes, which can read as more natural and less artificial.
HSL Lightness instead holds hue and saturation completely fixed and only moves the lightness value, producing a ladder where every step stays equally vivid — often preferred for flat, modern UI palettes where muting isn't wanted. Neither approach is more "correct"; they simply suit different visual styles, so toggling between them and comparing directly is the fastest way to decide which fits your project.
A Tailwind-Style Scale, Built Honestly
Developers rarely want a vague row of swatches — they want a numbered scale that maps directly onto a config file. The 50–950 scale here follows the same numbering convention Tailwind CSS and Material Design popularised, with your base colour sitting at 500 and progressively lighter or darker computed steps filling out the rest, ready to paste into a tailwind.config.js file or a CSS variable block.
It's worth being direct about what this is not: Tailwind's own default palette is hand-tuned per hue by designers, not generated by a single formula, so this scale won't be pixel-identical to Tailwind's built-in colours even for a similar starting hue. What it gives you is a solid, mathematically consistent starting scale for your own brand colour, in the same numbering shape developers already expect — genuinely useful for a custom palette, not a substitute for Tailwind's shipped defaults.
Who Actually Needs a Full Colour Scale
Front-end developers setting up a Tailwind or CSS-variable colour system who need a consistent numbered scale for a brand colour, not just one hex code.
UI and product designers building hover, active, disabled and background states that need to relate mathematically to a primary colour, not just look "close enough" by eye.
Design system maintainers documenting a full colour ramp for a component library, where every shade needs a clear, reproducible relationship to the base.
Indie developers and small teams who want a professional-looking colour system without hand-tuning a dozen shades manually for every brand colour.
From a Single Brand Colour to a Finished Design System
Setting up a Tailwind theme: generate the 50–950 scale from your primary brand colour, export the Tailwind snippet, and paste it directly into theme.extend.colors — a complete, numbered colour system in one step.
Designing hover and disabled states: pull the closest shade one or two steps darker than your base for a hover state, and a light tint for a disabled or subtle background variant — both mathematically related to the original colour.
Building a muted secondary palette: switch on grayscale tones to get desaturated variants of your accent colour, useful for secondary buttons or backgrounds that shouldn't compete with a primary call-to-action.
Choosing between vivid and muted styles: generate the same base colour's scale under both RGB Blend and HSL Lightness, and compare which fits your product's overall visual tone before committing.
Nothing Leaves Your Browser
Every tint, shade, tone and the Tailwind-style scale are calculated locally in your browser the instant you change the base colour, method or step count — there's no upload, no server round-trip, and no account required to save a scale for later on the same device.
Getting a Scale That Actually Ships
- Start from your one fixed brand colour, not a random pick — paste its exact HEX code so the whole scale builds around a colour you're already committed to.
- Try both mixing methods before deciding. RGB Blend and HSL Lightness can look meaningfully different at the extremes — pick whichever matches your product's visual style, not just the first result.
- Use fewer steps for UI states, more for a full design-system scale. 4–5 steps per side usually covers hover/active/disabled; 8–9 suits a complete numbered token system.
- Check contrast before using a tint or shade as text. A tint that looks readable as a background swatch may fail as text on white — verify with the Color Contrast Checker before shipping.
- Export early. Copy the Tailwind or CSS snippet the moment a scale looks right rather than leaving it in the browser tab.
When a Scale Looks Off
The lightest tints all look basically white. This is expected at the outer steps by design — they're meant to reach strongly toward white. If the whole ladder feels too extreme, increase the step count for finer, closer-spaced gradations instead.
RGB Blend and HSL Lightness gave noticeably different results. That's expected, not a bug — they're genuinely different mixing methods. Pick whichever visually fits your project rather than assuming one is more correct.
My saved scale loaded with a different look than I remember. Favourites store the base colour and mixing method at save time; if you changed the step count afterward without re-saving, the current step count is what applies on reload.
The Tailwind scale doesn't match Tailwind's own colours. That's expected — see "A Tailwind-Style Scale, Built Honestly" above. This generates a consistent scale from your own colour, not a copy of Tailwind's hand-tuned defaults.
Where This Tool Stops
Don't expect an exact match to any specific brand's or framework's official colour palette — every step here is mathematically derived from your base colour, not hand-tuned by a designer for that specific hue.
Don't use the lightest or darkest steps as text without checking contrast — some extreme tints and shades will fail WCAG contrast against white or black; confirm with the Color Contrast Checker first.
Don't rely on this for print colour matching — everything here works in screen colour space (HEX/RGB); ink and paper reproduction depends on factors this tool can't account for.