Color HSL
Hue, Saturation, Lightness – the most intuitive color model
What Is the HSL Color Model?
HSL stands for Hue, Saturation, and Lightness. Unlike RGB, which mixes light channels, HSL describes colors in terms that match how humans naturally think about color:
- Hue (0–360°) — The base color on the color wheel. 0° = red, 120° = green, 240° = blue.
- Saturation (0–100%) — How vivid the color is. 0% = gray, 100% = pure color.
- Lightness (0–100%) — How bright. 0% = black, 50% = normal, 100% = white.
The Hue Wheel
Hue is measured as an angle on the color wheel. It cycles through all visible colors:
Why HSL Is More Intuitive Than RGB
With RGB, creating a lighter blue requires increasing R and G while keeping B high — not intuitive. With HSL, you simply increase the Lightness. Want a muted version? Lower the Saturation. Want a different hue entirely? Rotate the Hue. Each property maps to a distinct perceptual quality.
Common HSL Colors
| Color | Swatch | H | S | L | CSS |
|---|---|---|---|---|---|
| Red | 0° | 100% | 50% | hsl(0, 100%, 50%) | |
| Orange | 30° | 100% | 50% | hsl(30, 100%, 50%) | |
| Yellow | 60° | 100% | 50% | hsl(60, 100%, 50%) | |
| Lime | 120° | 100% | 50% | hsl(120, 100%, 50%) | |
| Cyan | 180° | 100% | 50% | hsl(180, 100%, 50%) | |
| Blue | 240° | 100% | 50% | hsl(240, 100%, 50%) | |
| Purple | 270° | 100% | 50% | hsl(270, 100%, 50%) | |
| Magenta | 300° | 100% | 50% | hsl(300, 100%, 50%) | |
| Pink | 330° | 100% | 72% | hsl(330, 100%, 72%) | |
| Brown | 30° | 59% | 41% | hsl(30, 59%, 41%) | |
| Gray | 0° | 0% | 50% | hsl(0, 0%, 50%) | |
| Navy | 240° | 100% | 25% | hsl(240, 100%, 25%) |
Try It — CSS hsl() Syntax
.element {
background-color: hsl(210, 80%, 55%);
color: #ffffff;
}How to Use Color HSL?
- 1Choose a base color using the interactive picker or enter HEX, RGB, HSL values.
- 2Generate matching color palettes, schemes, or color space transformations instantly.
- 3Click on any color code block in the results to copy it instantly to your clipboard.
Designer Friendly
Easily match colors, check contrast ratios, and generate custom palettes for your designs.
Multi-Format Support
Supports copy-paste in HEX, RGB, RGBA, HSL, HSLA, and CSS variables formats.
Runs Locally
No internet connection required. Our color engines run instantly and cleanly inside your web browser.