Practical color model guide
HSB vs HSL vs HSV: what changes and when to use each
The three names share a hue wheel, but they do not all describe the same coordinates. This guide shows what the third channel changes, why matching percentages can produce different colors, and how to move a chosen shade into a reliable web value.
HSB vs HSL vs HSV
Are HSB, HSV, and HSL the same?
HSB and HSV usually name the same RGB-based model: brightness and value are two labels for its third channel. HSL is a different transformation. It uses lightness, puts a fully saturated pure hue at 50% lightness, and reaches white at 100%. HSB or HSV puts a fully saturated pure hue at 100% brightness and reaches white only when saturation falls to zero. Keep the model name with every percentage triplet.
The short answer
- Treat HSB and HSV as equivalent only after checking the application, ranges, color profile, and rounding behavior.
- Do not paste HSB saturation and brightness numbers into HSL saturation and lightness fields.
- Use HSB or HSV for intuitive picker adjustments; use HSL when its CSS notation and lightness structure fit the task.
- Save an exact HEX or RGB value for handoff, then test contrast and perceptual difference with their own methods.
The same color family, three different jobs
These models reorganize display colors for different kinds of decisions. The anchor values below make the difference easier to see before you move numbers between tools.
| Model | Third channel | Useful anchors | Typical role |
|---|---|---|---|
| HSB / HSV | Brightness / Value | Pure hue at S 100%, B/V 100%; black at B/V 0% | Color pickers, image tools, visual hue-intensity-darkness adjustment |
| HSL | Lightness | Pure hue at S 100%, L 50%; black at L 0%; white at L 100% | CSS hsl() values and light-to-dark variations around a midpoint |
| HEX / RGB | Red, green, blue channels | One explicit sRGB channel triplet after conversion | Stable web handoff, design tokens, and implementation records |
Why the names sound more interchangeable than they are
HSB, HSV, and HSL all begin with hue, usually represented as an angle around a color wheel. They also include a channel called saturation. That shared vocabulary makes the models look compatible at a glance. Underneath, each is a rearrangement of RGB display coordinates rather than an independent physical measurement of light. The original HSV and HSL transform work described two different geometries for making an RGB cube easier to navigate. A familiar label does not make the resulting coordinates interchangeable.
The safest reading is operational. A model tells a tool how to turn three controls into red, green, and blue output. If two applications use the same conversion and rounding, the final RGB or HEX can match even when one labels the model HSB and the other HSV. If one field is HSL, the saturation and third-channel calculations change. Copying 210°, 70%, 80% from one model to another can therefore change the displayed swatch even though every visible number appears unchanged.
How HSB and HSV describe brightness or value
In the common HSV model, value is the largest of the normalized red, green, and blue channels. HSB normally uses brightness as a friendlier label for that same control. At full saturation and full brightness, the selected hue reaches its strongest RGB boundary color. Lower brightness moves the result toward black. Lower saturation moves the result toward a neutral value while the brightness ceiling stays fixed. At zero saturation and full brightness, the result is white rather than a fully colored swatch.
This layout works well in a two-dimensional picker: choose hue on one strip, then move horizontally for saturation and vertically for brightness. Adobe's current Color Picker documents this HSB interaction with a 0–360° hue and percentage controls for saturation and brightness. It is intuitive for editing, but the word brightness should not be read as measured luminance or a promise about human appearance. A yellow and a blue can both show B 100% while producing very different relative luminance and perceived lightness.
How HSL changes the middle and both endpoints
HSL keeps the hue circle but defines a lightness axis with black at 0%, white at 100%, and the strongest fully saturated hue at 50%. Above the midpoint, the color moves toward white; below it, the color moves toward black. That symmetry is useful when someone wants to reason about tints and shades around a center. It is also why an HSB brightness of 100% cannot be replaced by an HSL lightness of 100%: the first can be a vivid hue, while the second is always white.
Saturation changes meaning with that geometry too. An HSL color at very high or very low lightness has little available chroma even when the saturation field says 100%. In HSV, saturation is calculated relative to the value channel instead. The W3C CSS Color specification defines hsl() as a way to produce sRGB colors and publishes the conversion behavior browsers follow. It does not define an hsv() or hsb() CSS color function, so a shade chosen in an HSB picker normally needs conversion before it becomes a portable CSS value.
How to hand a color from a picker to code without ambiguity
First record the model, application, color profile or web assumption, and the exact triplet. Then capture the resulting six-digit HEX or RGB value. The final channel value is the most useful handoff because it prevents another tool from silently interpreting HSB percentages as HSL. If a CSS author prefers hsl(), convert from the approved RGB color and verify the browser result rather than copying labels by position. Keep enough precision to reproduce the shade, but do not imply that extra decimals correct an uncalibrated source image or display.
Finish by naming the decision each value is allowed to support. HSB or HSL can explain an edit. HEX or RGB can preserve a digital token. Delta E can summarize a color-pair difference under a named formula. WCAG contrast uses relative luminance and defined success criteria for a foreground-background pair. None of those outputs substitutes automatically for the others. A reliable record includes the source color, model, converted value, visible context, evaluation method, owner of the final rule, and the next action someone should take.
A five-step model-safe color workflow
Use this sequence whenever a color moves from a picker, screenshot, or design file into code or a shared palette.
1. Name the model
Write HSB, HSV, HSL, RGB, or another exact model beside the values instead of sharing an unlabeled triplet.
2. Preserve the source
Keep the approved token or original file and note whether the color was sampled, converted, or visually invented.
3. Save RGB or HEX
Capture the converted display value so another application can reproduce the same sRGB channels without guessing the model.
4. Verify in context
View the color at its real size, theme, neighboring colors, state, and target screen before approving the result.
5. Run the right test
Use contrast, Delta E, print measurement, or the governing project rule for the decision instead of treating a picker channel as proof.
Smith · W3C · Adobe
Primary sources and platform definitions
These references document the original HSV/HSL transforms, current HSB picker behavior, browser HSL syntax, and the separate contrast rule.
Compare the models, then test the color
HSB, HSV, and HSL FAQ
Are HSB and HSV always identical?
They usually name the same model, with brightness and value as alternate labels. Check the application's documentation, ranges, profile, and rounding before assuming values transfer exactly.
Why does HSB 100% brightness not equal HSL 100% lightness?
HSB can show a fully saturated pure hue at 100% brightness. HSL reserves 100% lightness for white and places the pure hue at 50% lightness.
Can CSS use HSB or HSV directly?
CSS Color defines hsl() but not a standard hsb() or hsv() function. Convert the chosen HSB or HSV shade to an accepted CSS color such as HEX, RGB, or HSL.
Which model is best for a color picker?
HSB or HSV is common for a hue strip plus saturation-brightness field. HSL can be clearer when authoring CSS variations. The best model is the one that matches the decision and records an exact output.
Does equal HSB or HSL lightness guarantee equal contrast?
No. Neither channel is a WCAG contrast ratio. Evaluate the actual foreground and background with the required relative-luminance contrast method.