Tailwind Shade Generator — 50–950 Scale From Any Base
Tailwind's colour scale is one of its most copied features for a reason: an 11-stop ramp makes it trivial to pick consistent surfaces, borders and text colours across an entire product. PikDraw's Tailwind shade generator builds that exact ramp from any base colour you give it, then exports the result as a Tailwind config block, CSS custom properties, or plain JSON — ready to paste into your design tokens.
What is the Tailwind Shade Generator?
The Tailwind shade generator takes a single HEX colour and produces the full Tailwind-style 50 → 950 scale (11 stops). The base colour anchors the 500 slot; the other stops are derived by re-rendering the same hue at a fixed lightness ramp with a gentle saturation rolloff. Outputs are copyable in three formats so the scale plugs straight into any modern stylesheet, Tailwind config, or token pipeline.
Key features
- Generate an 11-stop scale (50 → 950) from any HEX base
- Live swatch grid with click-to-copy HEX values
- Three output formats: Tailwind config, CSS variables, JSON
- Configurable token name baked into the output
- Random colour button for quick exploration
- Zero network calls — pure browser maths
- Mobile-friendly, dark-mode aware
- Free forever, no signup
How it works
We convert the base HEX into HSL to separate hue from saturation and lightness. Eleven fixed lightness values (97, 94, 86, 77, 66, 50, 42, 34, 26, 18, 11) define the ramp. Saturation is rolled off proportionally to distance from L=50 to keep extremes from looking artificial. Each stop is then converted back to HEX/RGB for display and export. The base colour always lands at the 500 stop.
Why use this tool
Hand-mixing 11 stops takes 20 minutes; programmatic ramps take seconds. The generator gives you a sensible starting point you can ship as-is or tweak per-stop. Because everything runs in-browser, brand colours never leave your device.
Common use cases
- Building a brand colour scale in seconds
- Generating consistent surfaces for dark and light themes
- Designing tokenised colour systems for Figma + code parity
- Quickly prototyping a new accent for a marketing page
- Seeding a Style Dictionary token pipeline
How to use this tool
- Pick a base colour — Drop a HEX into the input or use the colour picker. The generator builds the full 50 → 950 ramp instantly.
- Name your token — Set the token name (e.g. `brand`, `accent`, `primary`). It's used in the generated config snippets.
- Inspect the swatches — Hover each swatch to see its HEX. Click any swatch to copy the value directly.
- Copy your snippet — Switch tabs between Tailwind config, CSS variables and JSON to copy the format your project needs.
Who should use this
Designers building design systems. Front-end developers wiring brand colours into Tailwind. Product teams iterating on accent colours. Anyone working with utility-first CSS who needs more than ad-hoc HEX values.
How to get started
Drop a HEX value, name your token, and copy any of the three output formats into your project.
Best practices
- Anchor your 500 to the colour your brand currently uses, then tweak adjacent stops to taste.
- Always re-check text contrast on the lightest and darkest stops with the WCAG checker.
- Commit the generated scale to your design tokens — don't paste it inline.
- Use 50–200 for surfaces, 300–500 for accents and CTAs, 600–950 for text and pressed states.
- Iterate: regenerate from a slightly shifted base if the mid-tones feel off.
Pro tips
- Use the same base colour across light and dark themes — only the on-colour text will need to flip.
- The 500 swatch is the base hue; lighter shades drop saturation slightly to feel airier.
- Pair the generated scale with the WCAG contrast checker to lock in accessible text/background combos.
- Drop the JSON output straight into a design-token pipeline (Style Dictionary, Tokens Studio).
Expert insights
Name like Tailwind
Reuse semantic names (`primary`, `accent`, `surface`) so the generated config drops straight into existing themes.
Pair with WCAG
Drop your 500 + on-colour into the WCAG checker — many brand greens fail AA out of the box.
Limitations to be aware of
- Programmatic ramps are perceptually close to Tailwind's hand-tuned defaults but not identical.
- Output is sRGB only — wide-gamut workflows need an additional conversion step.
- No alpha handling — generate opaque scales then tune opacity per use.
Frequently asked questions
- How are the shades calculated?
- We convert the base HEX to HSL and re-render it at 11 fixed lightness values (97 / 94 / 86 / 77 / 66 / 50 / 42 / 34 / 26 / 18 / 11) with a slight saturation rolloff toward the extremes. The 500 swatch matches your input.
- Do these exactly match Tailwind's defaults?
- No — Tailwind's defaults are hand-tuned. The output is a perceptually-close, programmatic ramp suitable as a drop-in starting point. Tweak the result by editing the generated config.
- Can I use this with Tailwind v3 and v4?
- Yes. The generated Tailwind config snippet is plain JS object syntax that both major versions accept under `theme.extend.colors`.
- What output formats are supported?
- Tailwind config object, CSS custom properties (:root), and pure JSON. All three are copyable with a single click.
- Does the tool send my colour anywhere?
- No. All maths runs in the browser — nothing is sent to a server.
- Why is the lightest swatch desaturated?
- Near-white colours with full saturation feel cartoonish. We taper saturation at the extremes to keep the ramp feeling natural across the full range.
- Can I export to other token systems?
- Copy the JSON output and feed it into Style Dictionary, Tokens Studio, or any token pipeline that consumes a name → HEX map.
- Is it free?
- Yes — no signup, no quotas.