Tailwind Color Generator
Turn one base colour into a full 50–950 Tailwind shade scale.
Pick a single base colour (your '500') and instantly generate the full Tailwind-style 50 to 950 shade scale, with a live WCAG contrast score against white and black text for every stop. Name your colour and copy ready-to-use Tailwind, CSS or SCSS config. Runs fully in your browser — nothing is uploaded.
How to use Tailwind Color Generator
Pick a base color
Enter or pick the hex you want to use as your '500' shade — this is the anchor every other stop in the scale is generated from.
Name your color
Type a name like 'brand' or 'olive' — it becomes the key used in the generated Tailwind, CSS and SCSS config, and in the ready-to-copy utility classes.
Hover the scale
Hover any shade in the big ribbon to preview it up close, from 50 (lightest) to 950 (darkest).
Select a shade
Click a shade to select it, copy its hex instantly, and see its full spotlight below with WCAG contrast and utility classes.
Check contrast
Every shade scores its WCAG contrast ratio against white and black text, colour-coded so you can spot accessible pairings at a glance.
Export the config
Switch between Tailwind, CSS and SCSS output and copy the whole scale as ready-to-use config for your project.
Frequently asked questions
How does this Tailwind color generator work?
Enter one base colour as your '500' shade and it's converted to HSL, then every other stop (50 to 950) is generated by shifting the lightness toward white for lighter shades and toward black for darker shades — the same idea Tailwind's own default palette follows.
What are the W and B numbers on each shade?
They're the WCAG contrast ratio of that shade against white (W) and black (B) text, calculated with the official sRGB relative luminance formula. Green means it passes AA (≥4.5:1) for normal text, amber means it only passes AA for large text (≥3:1), and red means it fails both.
Can I use the output directly in tailwind.config.js?
Yes — switch the format to Tailwind and paste the colors object straight into theme.extend.colors in your Tailwind config, then use it like any other utility, e.g. bg-brand-500. The spotlight panel also gives you ready bg-/text-/border- class names to copy for the shade you've selected.
What's the difference between the CSS and SCSS output?
CSS exports the scale as :root custom properties (--color-name-500: #…), ready to reference with var(). SCSS exports it as a Sass map ($name: (500: #…)), handy if your project already uses Sass colour maps.
Is this Tailwind color generator free?
Yes — it's completely free with no sign-up. The entire scale is generated in your browser, so there are no limits, no API keys and nothing is uploaded.
Does this match Tailwind's exact default palette?
Not exactly — Tailwind's built-in colours (like blue or emerald) are hand-tuned per family. This tool generates a consistent, accessible-aware scale from any custom base colour you give it, which is exactly what you need for a brand colour Tailwind doesn't ship by default.
Related tools — Color tools
- Color Picker & Converter — Pick a colour and convert HEX, RGB, HSL, HSV & CMYK.
- Color Palette Generator — Generate harmonious colour palettes from any base colour.
- CSS Gradient Generator — Build linear, radial & conic CSS gradients and copy the code.
- Color Contrast Checker (WCAG) — Check text/background contrast against WCAG AA & AAA.
- Material Design Colors — The full Material Design palette with hex & RGB.
- Tailwind CSS Colors — The full default Tailwind palette with hex & RGB.
- All HTML Color Codes — Every CSS named colour with its HEX, RGB & HSL values.