Skip to main content
Back to Colors generators

Colors

HSL Color Palette Generator

Used by developers, writers, and creators worldwide.

The HSL color palette generator creates sets of colors defined by hue, saturation, and lightness — the color model CSS was built around. Each output gives you both the HSL value and its hex equivalent, so you can paste directly into a stylesheet, Figma swatch, or design token file without opening a converter. Set how many colors you need (default is 5) and lock in a saturation percentage (default 70%). High saturation produces vivid accent colors; drop it to 20–30% for muted neutrals or dark-mode surfaces. Hue values are randomized across the full 0–360 range, giving you distinct colors at a consistent perceptual weight.

Loading usage…

Free forever — no account required

How to use

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

Detailed instructions

  1. Set the Number of Colors to how many swatches you need — 5 for a basic palette, up to 8 for data visualization sets.
  2. Adjust the Saturation % slider: use 60–80 for vivid UI colors, 20–40 for muted tones, or 10–15 for near-neutral surfaces.
  3. Click Generate to produce a palette of randomized hue values all locked to your chosen saturation.
  4. Copy the HSL value for use directly in CSS, or grab the hex equivalent for tools like Figma or Photoshop.
  5. Regenerate as many times as needed — each click produces a new set of hues while keeping your saturation setting.

Use Cases

  • •Generating CSS custom properties for a design system at 60% saturation across 8 hues
  • •Creating 6 distinct data visualization colors at equal saturation for a D3.js chart
  • •Prototyping dark-mode surface colors using low-saturation (15–25%) HSL values
  • •Copying hex equivalents into Figma color styles when a plugin requires hex format
  • •Sampling vivid accent candidates at 90% saturation for a brand's primary action color

Tips

  • →Lock saturation at 65% and generate 8 colors — this is a reliable range for accessible, non-clashing data chart colors.
  • →For a dark-mode neutral palette, set saturation to 12% and generate 6 colors, then manually set lightness values from 10% to 85% in CSS.
  • →If two generated hues look too similar, check if their hue values are within 20 degrees of each other — regenerate until you have at least 30-degree gaps.
  • →Store generated HSL values as CSS custom properties (--color-primary: hsl(210, 70%, 50%)) so you can adjust lightness globally with calc() later.
  • →Use the hex equivalent when pasting into Figma or Sketch, but keep the HSL value in your CSS codebase — it makes theming much easier long term.
  • →Saturation above 90% works well for single-use accent colors like notification badges or hover states, but avoid it for any color covering large screen areas.

FAQ

how to use hsl colors directly in css

Use the syntax `color: hsl(210, 70%, 50%);` — or the modern space-separated form `hsl(210 70% 50%)` without commas. Both work in all major browsers. For transparency, add an alpha channel: `hsl(210 70% 50% / 0.5)`. This generator outputs ready-to-paste values in both formats.

what saturation level should I use for a UI color palette

For primary actions and brand accents, 60–80% saturation hits the sweet spot — vivid without being harsh. Backgrounds and neutral surfaces work best at 10–25%. Fully saturated colors (100%) cause visual fatigue on large areas, so they're usually reserved for small highlights or icons.

what's the difference between hsl and hsb color models

HSL and HSB (also called HSV) define saturation and brightness differently. CSS uses HSL, so values from this generator map directly to browser rendering. In HSB, max brightness always looks vivid; in HSL, a fully saturated color at 100% lightness becomes white, which matters when building tint scales.