HSL / HSV (HSB)
Color as three human dials: which hue, how colorful, how light. The sliders behind almost every color picker.
See it
What it is
HSL and HSV are RGB rearranged into three dials a human can actually reason about: hue (0 to 360 degrees around the color wheel), saturation (how colorful versus gray), and lightness or value (how bright). This is the geometry behind almost every color picker you have ever dragged: the rainbow strip is hue, the square is the other two.
The difference between them trips everyone. In HSL, lightness 50 percent is the pure hue, 100 percent is white, 0 percent is black. In HSV (also called HSB, the one Photoshop and Figma show), value 100 percent is the whole top edge of the square: at saturation 100 percent you get the pure hue, at saturation 0 percent you get white, and everything in between is a tint. Black lives at value 0 instead. Reach for either when you want quick, readable variations: same hue, less saturation for a muted version, more lightness for a hover state.
Gotcha: both are perceptually uneven, because the lightness number is cheap math over RGB rather than anything about vision. hsl(60 100% 50%) is a blinding yellow and hsl(240 100% 50%) is a nearly black blue, despite both claiming 50 percent lightness. So an HSL ramp that looks even in numbers looks lumpy on screen, and hue rotation drags brightness around with it. Use HSL for quick tweaks, OKLCH for anything that has to be consistent.
Ask AI for it
Express this palette in HSL and build variations by moving one dial at a time: keep hue fixed and drop saturation by 30 percent for the muted set, raise lightness by 8 percent for hover states, lower it by 8 percent for pressed states. Then rotate the hue by 30 degrees in each direction for an analogous accent pair. Show the hsl() value next to the hex for every swatch, and call out any step where the HSL lightness number lies about how bright the color actually looks.