HEX ↔ RGB ↔ HSL Converter
Convert colors between HEX, RGB, and HSL formats with a live color preview.
Open HEX ↔ RGB ↔ HSL Converter
Tailwind Palette Generator
Generate Tailwind CSS v4 color shades (50–950) from any base color with a ready-to-copy @theme snippet.
50#f3f6fb
100#dee8f7
200#b9cff3
300#87b0f2
400#4b8bf1
500#3c83f6
600#1763de
700#1750ab
800#153c7a
900#10274c
950#0a1629
Tailwind v4 @theme snippet
@theme {
--color-primary-50: #f3f6fb;
--color-primary-100: #dee8f7;
--color-primary-200: #b9cff3;
--color-primary-300: #87b0f2;
--color-primary-400: #4b8bf1;
--color-primary-500: #3c83f6;
--color-primary-600: #1763de;
--color-primary-700: #1750ab;
--color-primary-800: #153c7a;
--color-primary-900: #10274c;
--color-primary-950: #0a1629;
}Related tools
More utilities that pair well with this one.
Frequently asked questions
Common questions about this tool.
The generator takes your base color and applies a lightness interpolation algorithm. Shade 500 matches your base color's lightness. Lighter shades (50–400) move toward white, darker shades (600–950) move toward black. Saturation is adjusted so extreme shades don't look washed out.
Copy the @theme { ... } snippet and paste it into your CSS file that's processed by Tailwind. Tailwind v4 uses @theme to define design tokens. Once added, you can use classes like bg-primary-500, text-primary-200, etc.
Yes. For Tailwind v3, extract the hex values and add them to your tailwind.config.js under theme.extend.colors. The @theme syntax is v4-only, but the color values work in any version.
It should. If the lightness of your base color differs slightly from Tailwind's typical 500 level (~50% lightness), the generator preserves your base color as specified. The surrounding shades are interpolated automatically.