A cylindrical color model used in digital painting, graphic design, and computer vision, HSV (Hue, Saturation, Value) is also known as HSB (Hue, Saturation, Brightness). While HSL is common in web coding, HSV is the preferred model for artists because it more closely mimics how we perceive the vibrancy and weight of paint.
The Three Components of HSV
- Hue (H): The base color or position on the 360° color wheel. Measurement: 0° to 360°. 0°: Red, 120°: Green, 240°: Blue.
- Saturation (S): The purity or intensity of the color. Measurement: 0% to 100%. 0%: Grayscale (white, gray, or black depending on Value). 100%: The most vivid, saturated version of the hue.
- Value (V): The brightness or intensity of the light. Measurement: 0% to 100%. 0%: Absolute Black (regardless of Hue or Saturation). 100%: The brightest version of the color.
Key Difference Between HSV and HSL
- HSV (Value/Brightness): Pure, vivid colors (at 100% Sat). Center Point: Pure color (at 100% S, 100% V).
- HSL (Lightness): Pure White. Center Point: Pure Gray (at 50% L).
HSVA (Alpha Support)
Like other models, HSVA is extended with an Alpha (A) channel to control transparency. Range: 0.0 (Transparent) to 1.0 (Opaque). Usage: Standard in game engines like Unity and Unreal Engine, and design tools like Photoshop.
Practical Example
Imagine a bright "Fire Engine Red":
- In HSV: H: 0°, S: 100%, V: 100% (Maximum brightness).
- In HSL: H: 0°, S: 100%, L: 50% (Middle lightness).
Table: HSV vs. HSL
| Feature | HSV (Value/Brightness) | HSL (Lightness) |
| Top of Cylinder | Pure, vivid colors (at 100% Sat) | Pure White |
| Center Point | Pure color (at 100% S, 100% V) | Pure Gray (at 50% L) |
| Best For | Picking colors (mixing "paint") | Coding UI (adjusting lightness) |
