liminfoColor Palette Tool
Free web tool: Color Palette Tool
#e7f0fergb(231, 240, 254)hsl(217, 91%, 95%)#cee0fdrgb(206, 224, 253)hsl(217, 91%, 90%)#a7c7fbrgb(167, 199, 251)hsl(217, 91%, 82%)#77a8f9rgb(119, 168, 249)hsl(217, 91%, 72%)#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)#063888rgb(6, 56, 136)hsl(217, 91%, 28%)#052861rgb(5, 40, 97)hsl(217, 91%, 20%)#03183argb(3, 24, 58)hsl(217, 91%, 12%)#021027rgb(2, 16, 39)hsl(217, 91%, 8%)About Color Palette Tool
The Color Palette Generator creates a full 11-shade palette (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) from any base hex color, following the same lightness scale used by Tailwind CSS. Enter a hex color or pick one using the color picker, and the tool instantly derives each shade by converting the base color to HSL, preserving the hue and saturation, and mapping each shade name to a fixed lightness value (95%, 90%, 82%, 72%, 60%, 48%, 38%, 28%, 20%, 12%, 8%).
Frontend developers and UI designers use this tool when building design systems or theming applications with Tailwind CSS or similar utility frameworks. Instead of manually guessing lighter and darker variants of a brand color, you can input the primary hex value and immediately get a consistent, perceptually balanced shade scale. Each row displays the hex code, RGB value, and HSL value, making it easy to use the result in any stylesheet or design tool.
The conversion pipeline works entirely in the browser: hex → RGB → HSL → adjust lightness → HSL → hex. The hue and saturation of your original color are kept constant across all 11 shades, so the palette looks cohesive. Clicking any row copies that shade's hex code to your clipboard. The "Copy All" button copies the entire palette as a comma-separated list in the format used by Tailwind config files (e.g., "50: '#eff6ff', 100: '#dbeafe', ...").
Key Features
- Generates 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) matching Tailwind CSS lightness scale
- Preserves hue and saturation of the base color across all shades for a cohesive palette
- Displays hex, RGB, and HSL values for every shade in a single row
- Click any shade row to copy its hex code to the clipboard instantly
- "Copy All" button exports the entire palette in Tailwind config-compatible format
- Hex text input and native color picker for flexible color entry
- Real-time generation — palette updates immediately as you change the input color
- 100% client-side processing — hex/RGB/HSL conversions run in the browser with no server calls
Frequently Asked Questions
What shade scale does this tool use?
The tool uses 11 shade levels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. These match the Tailwind CSS color palette naming convention. Lightness values range from 95% (shade 50, nearly white) to 8% (shade 950, nearly black).
How are the shades calculated?
The base hex color is converted to HSL format. The hue (H) and saturation (S) values are kept constant, while the lightness (L) is replaced with a fixed value for each shade level: 95% for 50, 90% for 100, 82% for 200, 72% for 300, 60% for 400, 48% for 500, 38% for 600, 28% for 700, 20% for 800, 12% for 900, and 8% for 950.
Can I use the output directly in a Tailwind CSS config?
Yes. Click "Copy All" to copy the entire palette as a comma-separated list in the format "50: '#hex', 100: '#hex', ...". You can paste this directly into the colors section of your tailwind.config.js or tailwind.config.ts file inside a named color entry.
What does "preserving hue and saturation" mean for the palette?
It means all 11 shades share the same color family (same hue angle on the color wheel) and the same level of color intensity (same saturation percentage). Only the brightness changes from shade to shade. This ensures the palette looks harmonious — lighter shades are pastel-like and darker shades are deep, but they all clearly belong to the same color.
Why does the shade 500 look different from my original color?
The tool maps shade 500 to a fixed lightness of 48%, which may differ slightly from your input color's natural lightness. This is intentional — the scale is designed to be perceptually consistent across all 11 levels, so the exact lightness of the input is normalized to fit the scale. The hue and saturation of your original color are always preserved.
What format does "Copy All" produce?
The "Copy All" button produces output in the format: "50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', ..." — a comma-separated series of key-value pairs using single quotes around hex values. This format is directly compatible with the Tailwind CSS configuration object syntax.
Can I enter a color in RGB or HSL instead of hex?
Currently the tool accepts hex color input only (e.g., #3b82f6 or 3b82f6). RGB and HSL input are not directly supported, but you can convert your color to hex using a color converter and then paste it into this tool.
Is this tool free?
Yes, completely free with no sign-up, no ads that block the interface, and no usage limits. All color calculations run locally in your browser.