Convert colors between HEX, RGB and HSL with a live swatch and a color picker
Color Palette Generator
Runs locally
Use Color Palette Generator
What it does
Start from one base color and get 11 shades with the same hue and saturation, as a swatch strip and as CSS variables.
It runs entirely in your browser: nothing you enter is uploaded.
Example
Blue base color
#3b82f6--color-100: #010a18;
--color-200: #021431;
--color-300: #052861;
--color-400: #073c92;
--color-500: #0950c3;
--color-600: #0b64f4;
--color-700: #3c83f6;
--color-800: #6da2f8;
--color-900: #9ec1fa;
--color-1000: #cee0fd;
--color-1100: #e7f0fe;11 blues with hue 217° and saturation 91%, from --color-100: #010a18 (5% lightness) to --color-1100: #e7f0fe (95%).
FAQ
How are the shades made?
The base color is converted to HSL; its hue and saturation are kept and the lightness is set to 5, 10, 20, 30, 40, 50, 60, 70, 80, 90 and 95%. The base color itself is usually not one of the 11 shades.
Which input works, and how are the variables named?
Only a 6-digit hex value, with or without #; 3-digit hex, rgb() or color names produce invalid #NaN values. Variables run from --color-100 (darkest) to --color-1100 (lightest), the reverse of scales like Tailwind's, so rename them if needed.
Is anything uploaded?
No. The palette is calculated in your browser.