HSL Color Generator
Generates a random colour and shows it in hsl(hue, saturation%, lightness%) format with a preview swatch — useful when working in hue/saturation/lightness terms rather than RGB.
What this generator does
Produces a random colour in hue, saturation and lightness notation. HSL is often easier to reason about than RGB because the three numbers map onto things you can picture: which colour it is, how vivid, and how light or dark.
How to use this tool
- Press generate to get a random colour.
- Copy the hsl() value, or generate again for a new one.
Worked examples
- Format
- hsl(210, 74%, 56%)
- Ranges
- Hue 0–359 degrees around the colour wheel, saturation and lightness 0–100%
Common use cases
- Design systems using HSL tokens
- Exploring colour theory
- Randomising theme accent colours
How this generator works
Hue, saturation and lightness are drawn within their own ranges and shown as a CSS colour alongside its hex and RGB equivalents. HSL is the model where the three numbers mean something a person can predict: hue is the position on the colour wheel, and lightness runs from black at 0% to white at 100% regardless of the other two.
Limitations and good to know
- Lightness at 0% or 100% is black or white whatever the hue and saturation say — those are real colours, not failures of the draw.
- HSL lightness is not perceived brightness. A yellow and a blue at the same lightness look nothing like as bright as each other.
- Nothing here checks contrast, so a drawn pair may be unreadable against each other.