HSL stands for Hue, Saturation, and Luminance. This system is easier for finding colors that meet WCAG color contrast requirements compared to RGB or Hexadecimal systems.
Most color contrast checkers work similar to HSL. Choose a hue and then adjust it with white, gray, or black make a color.
Hue
The basic version of a color, with no addition of white, black, or gray.
Primary color, secondary color, tertiary color: a true color, pure color, bright color.
Saturation
The amount of gray added to a hue.
Tone: a muted color, neutral color, desaturated color.
Luminance
The amount of light/white or dark/black added to a hue.
Tint: a pastel color, light color.
Shade: a dark color, deep color.
HSL Primary Color Code Chart
| 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 |