Tailwind Color Palette Generator (50–950)
One brand color in, an 11-step Tailwind shade scale out — with contrast for every shade.
Your color
Shades
Select a shade to copy its HEX code. Ratios are for white or black text, whichever reads better.
In use
Typical pairings from the scale, with their contrast ratios.
Values and contrast
| Step | HEX | OKLCH | White text | Black text |
|---|---|---|---|---|
| 50 | ||||
| 100 | ||||
| 200 | ||||
| 300 | ||||
| 400 | ||||
| 500 | ||||
| 600 | ||||
| 700 | ||||
| 800 | ||||
| 900 | ||||
| 950 |
Contrast grid — every pair of shades
Rows are backgrounds, columns are text colors. AAA ≥ 7:1, AA ≥ 4.5:1, AA large ≥ 3:1 (large text and icons only); empty cells fail.
| Background | White | Black | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 50 | |||||||||||||
| 100 | |||||||||||||
| 200 | |||||||||||||
| 300 | |||||||||||||
| 400 | |||||||||||||
| 500 | |||||||||||||
| 600 | |||||||||||||
| 700 | |||||||||||||
| 800 | |||||||||||||
| 900 | |||||||||||||
| 950 |
Export
About the Tailwind Color Palette Generator (50–950)
Enter your brand color and get a complete Tailwind-style scale from 50 (almost white) to 950 (almost black). Your exact color is kept and placed on the step whose lightness it matches, and the other ten shades are built around it in OKLCH, a color space in which equal lightness steps look equal. The hue stays the same from 50 to 950, and the chroma (colorfulness) eases off toward the lightest and darkest steps the way Tailwind’s own palettes do.
Every shade shows its WCAG contrast with white and black text, and a contrast grid shows which pairs of shades can be used together for text. Copy the scale as a Tailwind v4 @theme block (in oklch()), a Tailwind v3 tailwind.config.js entry (HEX), CSS variables, SCSS, JSON or W3C design tokens.
How to use it
- Type your color under Base color — HEX,
rgb(),hsl(),oklch()or a CSS name — or pick it with the color picker. - Name the scale (for example
brandorprimary). The name becomesbg-brand-500,--brand-500and so on. - Check the scale. Your color is marked; choose another step under Pin to step if you want it to be, say, 600 instead.
- Look at the contrast numbers on the swatches and in the contrast grid to pick text and background pairs.
- Under Export, choose a format, then copy or download the code. Copy link saves the settings in a link.
Examples
Base color #3b82f6 · name brand
@theme {
--color-brand-50: oklch(96.9% 0.0132 262.38);
…
--color-brand-500: oklch(62.31% 0.188 259.81);
…
--color-brand-950: oklch(28.09% 0.0485 260.73);
}Paste it into your main CSS file after @import "tailwindcss"; and use classes such as bg-brand-500 and text-brand-900.
#3b82f6 · #7c3aed · #0f766e
step 500 · step 600 · step 700
Each is pinned to the step whose lightness matches Tailwind’s palette of the nearest hue — these happen to be Tailwind v3’s blue-500, violet-600 and teal-700.
Same scale · Tailwind v3 config · with DEFAULT
colors: {
brand: {
50: '#f0f5fe',
…
950: '#1b2941',
DEFAULT: '#3b82f6',
},
}Common uses
- Turning a brand color into the full set of shades a Tailwind project needs for buttons, backgrounds, borders and text.
- Replacing an HSL-based scale whose dark shades look muddy or whose hue drifts.
- Creating a tinted gray scale from a brand color for backgrounds and borders.
- Exporting design tokens for Figma variables, Style Dictionary or a CSS-only project.
How the scale is built
- Lightness: for each step the generator uses the OKLCH lightness of Tailwind CSS v4’s default palettes, interpolated between the two palettes nearest your color’s hue (Tailwind’s yellows are lighter at 500 than its blues, for example). Grayish colors move toward the average of Tailwind’s gray palettes, whose dark steps are darker. The curve is then stretched so your color sits exactly on its step while 50 and 950 stay put.
- Chroma: each shade gets the same share of the most chroma an sRGB screen can show at its lightness and hue, scaled by Tailwind’s chroma profile. Because that maximum narrows near white and black, chroma eases off toward the ends. Even chroma skips Tailwind’s profile and keeps the share constant.
- Hue: by default the OKLCH hue is the same for every step. Shift hue like Tailwind instead turns each step by the same amount as Tailwind’s palette of that hue — yellows warm toward orange as they darken, blues lean toward violet. Colors outside sRGB are brought in with the CSS Color 4 gamut-mapping method, which lowers chroma but keeps lightness and hue.
As a check: given the 500 shade of each of Tailwind’s 26 default palettes, the generated scales match Tailwind’s own shades with a median difference of 0.007 ΔE OK and 90% of shades within 0.036 — the CSS gamut-mapping algorithm treats 0.02 as a just-noticeable difference. The largest differences (up to 0.10) are in amber, yellow and the dark blues, where Tailwind changes the hue. With Shift hue like Tailwind the median falls to 0.004 and the largest difference to 0.043.
Reading the contrast numbers
Each swatch shows the WCAG 2.2 contrast ratio of white or black text on it — whichever is higher. AA means at least 4.5:1, enough for body text; AAA at least 7:1; AA large at least 3:1, enough only for text of at least 24 px (or 18.7 px bold) and for icons and borders (SC 1.4.3, 1.4.11). Ratios are cut to one decimal, never rounded up, so a shade shown as 4.4 really is below 4.5. The contrast grid applies the same test to every pair of shades.
Using the code
- Tailwind v4: paste the
@themeblock into the CSS file that imports Tailwind. It creates utilities such asbg-brand-500,text-brand-700andborder-brand-200, and CSS variables such asvar(--color-brand-500). - Tailwind v3: merge the object into
theme.extend.colorsintailwind.config.js. With DEFAULT,bg-branduses your exact color. - Design tokens: the W3C format follows the Design Tokens Format Module 2025.10: each token has an
oklchvalue and a HEX fallback.
Limitations
- With the default steady hue, dark shades of yellow look olive-brown and dark blues are less vivid than Tailwind’s, because Tailwind turns those hues as they darken. Choose Shift hue like Tailwind if you prefer that.
- Colors stay inside sRGB so that every HEX code is exact. Several of Tailwind v4’s own colors lie slightly outside sRGB and look a little more vivid on wide-gamut (P3) screens.
- Contrast ratios follow WCAG 2.2, which measures luminance only; thin or small fonts may need more contrast than the ratio suggests.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Which step will my color become?
The step whose lightness is closest to your color’s on Tailwind’s curve for that hue. A mid blue like #3b82f6 becomes 500, a deeper violet like #7c3aed becomes 600. If you want a different step, choose it under Pin to step — the rest of the scale is spread around it.
Do I get exactly my brand color back?
Yes. The pinned step is your color, unchanged, in every export. The other ten shades are generated.
How do I add the colors to Tailwind CSS v4?
Copy the Tailwind v4 @theme export and paste it below @import "tailwindcss"; in your main CSS file. Classes such as bg-brand-50 to bg-brand-950 then work everywhere, and so do text-, border-, ring- and the other color utilities.
And for Tailwind CSS v3?
Copy the Tailwind v3 config export into theme.extend.colors in tailwind.config.js. Turn on Add DEFAULT if you also want a plain bg-brand class with your exact color.
Why OKLCH rather than HSL?
In HSL the same lightness number looks very different from hue to hue — 50% lightness yellow is far brighter than 50% lightness blue — so HSL scales need hand-fixing. OKLCH lightness is designed to match how light colors look, so a curve that works for one hue works for the others.
Is my color sent anywhere?
No. Everything is calculated in your browser, and the page works offline once loaded. A copied link keeps the settings after the # in the address, which browsers do not send to the server.