HSL مقابل HSV: أي نموذج ألوان يجب أن تستخدم؟

If you have ever used a color picker, you have interacted with HSV or HSL — usually without knowing which one. Both models share two axes (Hue and Saturation) but differ fundamentally in how they express the third dimension. The difference is not just terminology: it produces different visual layouts, different behaviors in gradients and programmatic color generation, and different strengths depending on your use case. This guide explains both models clearly, walks through the visual differences, and provides a practical guide for choosing the right one.

HSL Explained: Hue, Saturation, Lightness

HSL describes a color using three components: Hue, Saturation, and Lightness. It was designed with web developers and designers in mind, and it maps fairly intuitively to how most people talk about color.

Hue

Hue is the position on the color wheel, expressed in degrees from 0 to 360. The wheel maps as follows:

Hue is identical in HSL and HSV — it is the one axis both models share completely.

Saturation in HSL

In HSL, Saturation controls how vivid the color is relative to a gray of the same lightness. At 100% saturation, you get the fullest possible version of that hue. At 0% saturation, you get a neutral gray.

The critical detail: the saturation axis in HSL always anchors to a gray at the same lightness level, not to black or white. At hsl(220, 0%, 50%) you get a medium gray #808080. At hsl(220, 100%, 50%) you get a fully saturated medium blue #0055FF. Desaturating from that blue gets you back to #808080, not to black or white.

Lightness in HSL

Lightness controls brightness on a scale from 0% (black) to 100% (white), with 50% as the midpoint where the color is at its most vivid. Every hue at 50% lightness and 100% saturation is the "pure" version of that color.

/* Pure hues at L=50%, S=100% */
hsl(0,   100%, 50%)  /* #FF0000 — red */
hsl(120, 100%, 50%)  /* #00FF00 — green */
hsl(240, 100%, 50%)  /* #0000FF — blue */

/* Same hues at different lightness */
hsl(240, 100%, 20%)  /* #000066 — dark navy */
hsl(240, 100%, 80%)  /* #9999FF — light lavender */
hsl(240, 100%, 95%)  /* #E6E6FF — near white, blue tinted */

The axis is intuitive: lower lightness = darker, higher = lighter, 0% is always black, 100% is always white regardless of hue.

HSL in CSS

HSL has first-class native support in CSS. Both the older function syntax and the newer space-separated syntax work in all modern browsers:

/* Traditional comma syntax */
color: hsl(220, 80%, 55%);
background-color: hsl(220, 80%, 55%, 0.4); /* with alpha */

/* Modern space-separated syntax (CSS Color Level 4) */
color: hsl(220 80% 55%);
color: hsl(220 80% 55% / 0.4); /* with alpha */

/* Relative HSL (CSS Color Level 5 — adjust from existing color) */
color: hsl(from var(--color-primary) h s calc(l - 10%));

The relative color syntax — hsl(from ... h s calc(l - 10%)) — is particularly powerful for design systems: it lets you generate tints and shades of any variable color without knowing its numeric values in advance.

HSV Explained: Hue, Saturation, Value

HSV (also written HSB, where B stands for Brightness) uses the same Hue axis as HSL but replaces Lightness with Value, and redefines what Saturation means.

Value in HSV

Value controls how much light the color has, from 0% (black) to 100% (full brightness). At V=100%, the color is as bright as possible — this is the fully-saturated, fully-lit version of the hue. At V=0%, the color is black, regardless of hue or saturation.

This is the key difference from HSL: in HSV, the maximum-brightness axis leads to the pure color, not to white.

Saturation in HSV

In HSV, Saturation controls the amount of color versus white. At S=100%, the color is fully saturated — no white mixed in. At S=0%, the color is entirely white (assuming V=100%) or gray/black (at lower values). You can think of saturation in HSV as "how much white is mixed into the color."

The practical consequence: in HSV, white lives at (any hue, 0%, 100%) — high value, zero saturation. In HSL, white is at (any hue, any saturation, 100%).

The HSV Color Solid

HSV maps to a cylinder where:

• The top circle represents maximum value (full brightness)
• The bottom point is black (V=0)
• Moving from the perimeter to the center desaturates toward white
• Moving down the cylinder darkens toward black

This geometry is why almost every graphical color picker — Photoshop, Figma, Sketch, browser DevTools, CSS color pickers — uses HSV. The rectangular picker commonly seen in these tools is a 2D slice of the HSV cylinder: the horizontal axis is Saturation (0–100%) and the vertical axis is Value (0–100%), with a separate hue slider. This layout lets you drag to white (top-left corner), black (bottom), full saturation+brightness (top-right corner), or anywhere between.

HSV Is Not Available in CSS

Unlike HSL, HSV has no CSS function. You cannot write hsv(240, 100%, 100%) in a stylesheet. HSV is an internal color model used by color picker UIs and graphics software. When Photoshop or Figma exports a color, it converts from HSV to hex, RGB, or HSL before outputting values you can use in code.

Key Differences Visually

The models produce the same set of colors — every color expressible in HSL is expressible in HSV — but different coordinates describe those colors differently, and the shape of the color space is different.

The White Point

This is the most practical difference. Consider fully desaturated colors:

Both reach white. But watch what happens at 50% brightness/lightness:

Same result here. But consider fully saturated midpoints:

In HSL, the midpoint of the lightness axis at full saturation is the pure hue. In HSV, reaching the pure hue requires V=100%, and the midpoint (V=50%) produces a much darker shade.

Gradient Behavior

Generate a gradient from full saturation to zero in each model:

/* HSL: desaturation moves toward gray */
background: linear-gradient(to right,
  hsl(240, 100%, 50%),   /* #0000FF — pure blue */
  hsl(240, 0%, 50%)      /* #808080 — medium gray */
);

/* Equivalent HSV desaturation (as hex) */
/* hsv(240, 100%, 100%) = #0000FF */
/* hsv(240, 0%, 100%)   = #FFFFFF — pure white, not gray */

In HSL, desaturating a midpoint color goes to gray. In HSV at full value, desaturating goes to white. This is why HSV's square color picker has white in the top-left corner.

When to Use Each: HSL for CSS, HSV for Color Pickers

Use HSL in CSS and Design Systems

HSL is the right choice for CSS because:

1. It is natively supported in CSS. Write hsl() directly in stylesheets.
2. Lightness is intuitive for theming. Incrementing or decrementing lightness by a fixed amount produces consistent lighter or darker variants of a color — useful for hover states, focus rings, and tint/shade generation.
3. 50% lightness is the "standard" shade. In HSL, the most saturated, canonical version of any hue sits at 50% lightness — predictable and easy to reason about.
4. Gradients are more predictable. Desaturating in HSL leads to a perceptually neutral midpoint, whereas desaturating in HSV leads to white, which can produce surprising gradient behavior.
5. Relative color syntax works with HSL. CSS Color Level 5's hsl(from ...) syntax enables dynamic color derivation.

For generating tints and shades in code:

/* Generate hover state by darkening 10% */
:root {
  --blue: hsl(220, 80%, 55%);
}

.btn:hover {
  background: hsl(220, 80%, 45%); /* -10% lightness */
}

/* Or with relative color syntax */
.btn:hover {
  background: hsl(from var(--blue) h s calc(l - 10%));
}

The Color Converter shows you the HSL breakdown of any hex code — useful when you need to adjust lightness values by a specific percentage for tint/shade variants.

Use HSV in Color Picker UIs

HSV is the right choice when building a color picker rather than using one. The HSV model's geometry — a rectangle where the top-right corner is the pure hue, top-left is white, and bottom is black — maps cleanly to a 2D draggable area. The geometry gives artists a natural pick point: saturated+bright colors in the top-right quadrant, pastels in the top-left, shadows in the bottom-left.

This is why Photoshop, Figma, and Chrome DevTools all use HSV internally. If you are implementing a custom color picker in JavaScript for a graphics or design application, work in HSV and convert to hex or HSL for output:

function hsvToHsl(h, s, v) {
  // h: 0-360, s: 0-1, v: 0-1
  const l = v * (1 - s / 2);
  const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
  return { h, s: sl * 100, l: l * 100 };
}

function hsvToHex(h, s, v) {
  const { h: hh, s: ss, l: ll } = hsvToHsl(h, s / 100, v / 100);
  return hslToHex(hh, ss, ll);
}

If you are building a web design tool where outputs go into CSS, your color picker might use HSV internally but always display and export HSL values — giving designers the intuitive HSV picker experience while outputting CSS-ready values.

CSS Color Support Summary

Notably, CSS Color Level 4 includes HWB (Hue, Whiteness, Blackness), which conceptually resembles HSV more than HSL does. In HWB:

• W (whiteness) = amount of white mixed in (equivalent to HSV: (1 - saturation))
• B (blackness) = amount of black mixed in (equivalent to (1 - value))

/* HWB equivalents */
hwb(240 0% 0%)    /* Pure blue #0000FF — no white, no black */
hwb(240 0% 50%)   /* Dark navy #000080 — no white, 50% black */
hwb(240 50% 0%)   /* Light blue-white #8080FF — 50% white, no black */

If you find the HSL lightness axis unintuitive and prefer HSV-like reasoning, HWB is the closest CSS color function. Use the Color Converter to translate any color between hex, RGB, HSL, and other supported formats.

Practical Conversion Reference

Notice how in HSL, the pure hue variants (red, coral) cluster around 50–71% lightness, while in HSV they sit at V=100%. The Color Converter does these conversions automatically — enter any hex code and get the full breakdown.

Key Takeaways

• HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) describe the same colors but with different internal geometry, producing different coordinates for the same hex value.
• In HSL, 50% lightness at full saturation is the "pure" canonical hue. In HSV, 100% value at full saturation is the pure hue — making midpoint values much darker in HSV.
• HSL desaturates toward gray at the same lightness; HSV desaturates toward white at full value. This is why HSL gradients and tint/shade generation are more predictable for UI work.
• HSL has native CSS support via hsl(). HSV has no CSS function and exists only as an internal model in graphics and design applications.
• Use HSL for CSS custom properties, tint/shade generation, and theming. Use HSV when building color picker UIs where the two-axis rectangle maps naturally to the model's geometry.
• The Color Converter translates any hex code to HSL, RGB, CMYK, and OKLCH instantly — a fast way to check HSL values when you only have a hex code.