HSL Color Palette Explorer

How to use

1. 1️⃣
   Choose your options above
2. 2️⃣
   Click Generate
3. 3️⃣
   Copy your result

Detailed instructions

1. Enter a hue value between 0 and 360, or leave it at -1 to pick a random hue on generation.
2. Set the number of colors to match your target scale size, such as 6 for a basic ramp or 9 for a full system.
3. Click Generate to produce the palette, which displays each color as a swatch alongside its HSL and hex values.
4. Copy individual HSL values for CSS custom properties or hex codes for Figma, Tailwind config, or other tools.
5. Re-run with the same hue but a different count to expand or trim the scale without changing the color family.

Use Cases

• •Building a 6-stop primary color scale for a Tailwind CSS config using CSS custom properties
• •Generating accessible text and background pairs within a single hue for WCAG contrast checks
• •Creating hover, active, and disabled state variants for a UI component in Storybook
• •Documenting a brand color ramp as Figma color styles ready for designer handoff
• •Exploring unexpected palette directions by using random hue mode during early client moodboarding

Tips

• →Pin a hue and run two batches — one high-saturation and one low — to create a vivid and a muted variant of the same palette for use as semantic and neutral tokens.
• →Hues between 200 and 260 (blues) appear darker at equal lightness than yellows or greens; compensate by bumping lightness 5–10% higher to match perceived brightness.
• →Use the random hue mode three or four times in a row, then pick the most unexpected result — constrained randomness often surfaces palettes deliberate choices never reach.
• →If you need a warm neutral, set hue to 30–40 with saturation between 8% and 15%; this produces taupes and creams that pair naturally with nearly any accent hue.
• →After generating, test your darkest and lightest stops against each other in a contrast checker; an HSL ramp that looks balanced visually may still fail WCAG AA at key pairings.
• →For branding work, identify your brand's exact hue by picking its closest hex in a color picker and reading the H value, then use that number as your fixed base hue here.

FAQ