Zero Signup ToolsFree browser tools

Generator Tools

Tailwind Palette Generator

Generate a full Tailwind color palette (50 to 950) from one hex. Copy as Tailwind v4 @theme, v3 config, CSS variables, or JSON.

Tailwind palette generator

Paste any hex. The 3-digit shorthand #38f also works.

Drives the class prefix. brand becomes bg-brand-500 in Tailwind.

The shade your input becomes. Most palettes anchor at 500. Pick 600 if your brand color reads dark, or 400 if it reads light.

Algorithm

Quick samples

Generated palette

The brand family, from 50 to 950. The anchor shade (500) matches your input color.

Input OKLCH: oklch(62.3% 0.188 259.8)Input HSL: hsl(217, 91%, 60%)
50#E8F6FF
100#D4EDFF
200#A8D6FF
300#7BB7FF
400#5195FF
500#2D74E7Anchor
600#165CC9
700#0848A8
800#003688
900#002567
950#001344
ShadeHexRGBOKLCHOn whiteOn black
50
#E8F6FF232, 246, 25596.5% / 0.019 / 2361.1:1 Fail19.06:1 AAA
100
#D4EDFF212, 237, 25593.3% / 0.036 / 2391.21:1 Fail17.36:1 AAA
200
#A8D6FF168, 214, 25585.8% / 0.075 / 2461.53:1 Fail13.73:1 AAA
300
#7BB7FF123, 183, 25576.7% / 0.121 / 2542.09:1 Fail10.06:1 AAA
400
#5195FF81, 149, 25567.6% / 0.172 / 2592.96:1 Fail7.09:1 AAA
500Anchor
#2D74E745, 116, 23157.9% / 0.188 / 2604.41:1 Fail4.76:1 AA
600
#165CC922, 92, 20150.1% / 0.183 / 2606.16:1 AA3.41:1 Fail
700
#0848A88, 72, 16842.9% / 0.166 / 2608.39:1 AAA2.5:1 Fail
800
#0036880, 54, 13636% / 0.147 / 26011.15:1 AAA1.88:1 Fail
900
#0025670, 37, 10329.1% / 0.123 / 26114.38:1 AAA1.46:1 Fail
950
#0013440, 19, 6821.2% / 0.096 / 26217.85:1 AAA1.18:1 Fail

Copy as

Pick the format you want and copy. Names use your color name field; values come straight from the palette above.

@theme {
  --color-brand-50: oklch(96.54% 0.0191 235.72);
  --color-brand-100: oklch(93.33% 0.036 239.15);
  --color-brand-200: oklch(85.78% 0.0749 245.72);
  --color-brand-300: oklch(76.74% 0.1213 253.7);
  --color-brand-400: oklch(67.64% 0.1717 259.01);
  --color-brand-500: oklch(57.93% 0.1884 259.83);
  --color-brand-600: oklch(50.1% 0.1827 259.83);
  --color-brand-700: oklch(42.91% 0.1658 259.92);
  --color-brand-800: oklch(36.03% 0.1466 259.96);
  --color-brand-900: oklch(29.07% 0.123 260.64);
  --color-brand-950: oklch(21.24% 0.0965 261.75);
}

UI preview

The same palette applied to real interface pieces. Use this to check how the 500 button reads next to the 50 surface and the 700 hover.

brand-50 surface

Build palettes that ship.

Body copy on brand-50, headings on brand-900, accent links on brand-700, and primary actions on brand-500.

Badge

brand-950 surface

Dark mode comes free.

The same family flips: surface brand-950, headings on brand-100, body on brand-200, accent on brand-400.

Badge

About the math

OKLCH mode fixes the lightness at each step on the Tailwind v4 ladder (97% at 50 down to 21% at 950), keeps your input's hue, and scales chroma so the anchor step matches your input exactly. The other steps ease their chroma down toward the lightest and darkest ends to avoid neon-looking 50 or 950 shades. This is the approach used in Tailwind v4 default palettes.

HSL mode is the classic v3-style approach: hue is preserved, lightness is forced onto the named ladder, and saturation is scaled per step so the lightest and darkest shades stay grounded. It is the same approach uicolors.app and most other “Tailwind palette from hex” generators use.

Contrast ratios next to each shade follow the WCAG 2.x relative luminance formula. AA needs 4.5:1 for normal body text, AAA needs 7:1. Use the badges to pick a body text shade that meets your accessibility target on each surface.

How to use

  1. Pick your brand color. Use the color picker or paste any hex (the 3-digit shorthand #38f also works).
  2. Set the color name. Lowercase letters, digits, and hyphens are allowed: brand, accent-2, primary, danger. The name drives the class prefix in the output.
  3. Pick the anchor step. Most brand colors land at 500, but if your input looks dark choose 600 or 700, and if it looks light choose 300 or 400.
  4. Pick an algorithm. OKLCH (Tailwind v4 spirit) is the recommended default; HSL (Tailwind v3 spirit) matches the classic v3 look.
  5. Review the swatches, hex values, and WCAG contrast badges. AA needs 4.5:1 for body text against the surface, AAA needs 7:1.
  6. Pick the output format you want: Tailwind v4 @theme, Tailwind v3 config, CSS variables, JSON tokens, or a plain hex list.
  7. Click Copy to drop the palette into your tailwind.config.js, your @theme block, or your design token file. Conversion runs locally; the color you enter is never uploaded.

About this tool

Tailwind Palette Generator turns a single brand color into a complete Tailwind shade ladder (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). Two algorithms are offered: an OKLCH mode that mirrors Tailwind v4's perceptually uniform palette authoring (lightness fixed at each step, chroma anchored on your input and gently scaled toward the ends, hue preserved), and an HSL mode that mirrors Tailwind v3's classic look (hue fixed, lightness placed on the named ladder, saturation scaled so 50 and 950 do not look neon). Pick the step where your input color anchors (default 500), name the family (brand, accent, primary, anything), and copy the result as a Tailwind v4 @theme block of oklch() literals, a Tailwind v3 tailwind.config.js extend.colors snippet, CSS custom properties, a JSON design token dictionary, or a plain hex list. Every shade shows its hex, RGB, OKLCH, and WCAG 2.x contrast ratios against white and black with AA and AAA badges, so you can choose a body-text shade for each surface in seconds. A live UI preview applies the palette to a light card and a dark card with primary and secondary buttons and a badge so you see how the family reads in real components. All math runs in your browser. Nothing is uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
Developer

Tailwind Color Finder

Browse, search, and reverse-lookup the full Tailwind CSS color palette.

Open tool

Generator

Color Palette Generator

Build complementary, analogous, triadic, and monochromatic color schemes from any HEX.

Open tool

Generator

Color Shades and Tints Generator

Build a 50 to 900 style ramp of shades and tints from a single hex color.

Open tool

Converter

OKLCH Color Converter

Convert HEX, RGB, HSL, and HWB to OKLCH and OKLab with a live preview and adjust sliders.

Open tool

Converter

Color Format Converter

Convert any CSS color to HEX, RGB, HSL, HWB, CMYK, and named values at once.

Open tool

SEO

Color Contrast Checker

Check WCAG AA, AAA, and UI contrast ratios with live preview and pass or fail badges.

Open tool

All toolsGenerator Tools