Value
The lightness or darkness of a color in the HSB/HSV model — where 100% value means the most vivid form of the hue, not white.
What it means
Value is the "V" in HSV (Hue, Saturation, Value), also called HSB (Hue, Saturation, Brightness). It represents how bright a color is on a scale from 0% (black) to 100% (the purest, most vivid form of that hue at that saturation).
The critical difference from lightness: in HSV, 100% value with 100% saturation gives you a fully vivid color (like pure red #FF0000), not white. In HSL, 100% lightness always gives white regardless of hue or saturation. This makes HSV's "value" axis behave more like a dimmer switch — it darkens colors toward black but never pushes them toward white.
Why it matters in palette design
Many design tools (including color pickers in Figma and Photoshop) use HSB/HSV internally. When you pick a color in a square picker with a brightness slider, you're manipulating value. Understanding how value differs from lightness prevents surprises when converting between color models or when your picked color doesn't match what you expected in CSS (which uses HSL).
Example
In Figma's color picker, dragging the vertical axis changes value/brightness. A red at V=100% is pure vivid red (#FF0000). Reducing V to 50% gives a dark red (#800000). But in CSS HSL, the same hue at L=50% gives a medium red (#FF0000), and L=100% gives white — a completely different mental model.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.