HSL stands for Hue, Saturation, and Luminance. When choosing colors that meet WCAG color contrast requirements, I find this system easier to use than RGB or hexadecimal systems.
Most color contrast checkers function like HSL. You choose a hue and then adjust it with white, gray, or black to create a color. Let’s learn more about what these adjustments do.
Hue
The basic version of a color. It’s like a set of 8 Crayola crayons, nice and bright, with no white, black, or gray addition.
Sometimes called: true color, pure color, color family.
- Hues and White: Not usually accessible on a white background. Hues in the blue to purple range are the most accessible on a white background.
- Hues and Black: More accessible on a black background but also very vivid. Be strategic with these combinations, or your design could look garish.
Saturation
The amount of gray you add to a hue. Commonly called a tone.
Sometimes called: muted color, neutral color, desaturated color.
- Tones and Black: Gray is similar to black, so this combination is usually not accessible.
- Tones and White: Adding gray makes many colors darker and more accessible on a white background.
Luminance
The amount of light/white or dark/black you add to a hue. Commonly called a tint or shade.
Tint
The amount of light/white you add to a hue.
Sometimes Called: pastel color, light color.
- Tints and White: Tinted colors on a white background are rarely accessible.
- Tints and Black: Black on a tinted background is often accessible.
Tint Tips
- Yellow is a high-luminance color; it naturally leans towards white. Yellow is never accessible on a white background. You can add gray or black to make it darker, but the hue begins to look brown.
- If your brand color palette includes tinted colors, do not use them for text or link colors.
Shade
The amount of dark/black you add to a hue.
Sometimes Called: dark color, deep color.
- Shades and White: Adding black to a hue is the easiest way to make it accessible on a white background. Shades are good for body text and small text.
- Shades and Black: Black on a shaded background is not accessible.
Shade Tips
- Be careful when using dark colors for link text. Link text and its surrounding body text must meet contrast requirements.
HSL Primary Color Code Chart
Here is a list of the color codes for hues in the basic color wheel. Use them as a starting point. Adjust the luminance and saturation to find accessible variations.
| Primary Hue | HSV | Hex | Web Name |
| Red | 0,100,50 | #FF0000 | Red |
| Orange | 30,100,50 | #FF8000 | Orange |
| Yellow | 60,100,50 | #FFFF00 | Yellow |
| Yellow-Green | 90,100,50 | #80FF00 | Chartreuse |
| Green | 120,100,50 | #00FF00 | Green |
| Green-Cyan | 150,100,50 | #00FF80 | Spring Green |
| Cyan | 180,100,50 | #00FFFF | Cyan |
| Cyan-Blue | 210,100,50 | #007FFF | Azure |
| Blue | 240,100,50 | #0000FF | Blue |
| Violet | 270,100,50 | #7F00FF | Violet |
| Magenta | 300,100,50 | #FF00FF | Fuchsia |
| Magenta-Red | 330,100,50 | #FF0091 | Magenta |