Guide
HSL Colors Explained
HSL describes a color the way people think about it: which color (hue), how vivid it is (saturation) and how light or dark it is (lightness). Royal blue is hsl(225, 73%, 57%).
The three parts of HSL
Hue is the position on the color wheel, measured in degrees from 0 to 360. Saturation is the intensity of the color, from 0% (gray) to 100% (fully vivid). Lightness runs from 0% (black) through the pure color at 50% to 100% (white).
| Hue | Color | Value | HEX |
|---|---|---|---|
| 0° | Red | hsl(0, 100%, 50%) | #FF0000 |
| 30° | Orange | hsl(30, 100%, 50%) | #FF8000 |
| 60° | Yellow | hsl(60, 100%, 50%) | #FFFF00 |
| 120° | Green | hsl(120, 100%, 50%) | #00FF00 |
| 180° | Cyan | hsl(180, 100%, 50%) | #00FFFF |
| 240° | Blue | hsl(240, 100%, 50%) | #0000FF |
| 300° | Magenta | hsl(300, 100%, 50%) | #FF00FF |
The wheel is a circle, so 360° is the same as 0°: you arrive back at red. Royal blue, hsl(225, 73%, 57%), has a hue of 225°, which is between cyan (180°) and blue (240°), closer to blue. Its saturation is fairly high at 73% and its lightness is a little above the middle at 57%.
Building a scale from one color
This is why designers like HSL: to make a lighter or darker version of a color you change one number and leave the other two alone. Here is royal blue at seven lightness levels, with the contrast ratio of white text on each one:
| Lightness | Color | HEX | White text contrast |
|---|---|---|---|
| 95% | hsl(225, 73%, 95%) | #E9EEFC | 1.16:1 |
| 85% | hsl(225, 73%, 85%) | #BDCBF5 | 1.61:1 |
| 70% | hsl(225, 73%, 70%) | #7B97EA | 2.81:1 |
| 57% (base) | hsl(225, 73%, 57%) | #4169E1 | 4.84:1 |
| 47% | hsl(225, 73%, 47%) | #204CCF | 7.00:1 |
| 37% | hsl(225, 73%, 37%) | #193CA3 | 9.47:1 |
| 25% | hsl(225, 73%, 25%) | #11286E | 13.52:1 |
A common pattern is to use the base color for a button, the 47% step for its hover state and the 37% step for its pressed state. The pale 95% step makes a good background for notices. The tints and shades generator builds scales like this for any color.
Matching colors by changing the hue
Because hue is a single number, finding related colors is simple arithmetic. Add 180° to get the complement: royal blue at 225° becomes 45°, which is hsl(45, 73%, 57%) or #E1B941, a warm gold. Add or subtract 30° for neighboring (analogous) colors, or add 120° and 240° for a triad. The color theory guide shows all of these with examples, and the palette generator does the math for you.
HSL in CSS
color: hsl(225, 73%, 57%);
color: hsl(225 73% 57%);
color: hsl(225deg 73% 57% / 50%);The comma-free syntax and the slash for opacity are the modern forms. The older hsla() function still works. Rounded HSL numbers can differ from the exact color by a very small amount, so a color converted to HSL and back may land one step away in a HEX digit.
What HSL does not tell you
HSL lightness is a mathematical value, not how bright a color looks. Yellow hsl(60, 100%, 50%) and blue hsl(240, 100%, 50%) both have 50% lightness, yet yellow has a contrast ratio of only 1.07:1 with white while blue has 8.59:1. Two colors with equal HSL lightness can have very different readability, so never rely on lightness alone to make text legible. Check the actual contrast ratio with the contrast checker.
HSL vs HSB and HSV
Many design apps use HSB (also written HSV), where the third value is brightness. They look similar but are not the same: in HSB, 100% brightness is the brightest version of the hue, not white. In HSL, 100% lightness is always white. If a value from a design app does not match the HSL value on this site, check which of the two the app is showing. The color converter lists both.