In the previous article, we went through four color models: RGB, CMYK, RYB, and HSV. If you remember, HSV/HSL was singled out for emphasis — because it aligns most closely with how humans intuitively perceive color. In this article, we dive into the three core dimensions behind HSV/HSL: hue, saturation, and value.
You may have heard these three words many times, but few people can truly explain how they differ. Many mix up "value" and "brightness," or equate "saturation" with "vividness," and end up adjusting colors by trial and error. In fact, once you understand these three dimensions separately, color adjustment becomes a logical, predictable process.
Why Do We Need Three Dimensions?
Color is continuous and infinite. If we could only describe it with words like "red," "blue," or "green," we could never precisely express subtle differences such as "this red is slightly darker and grayer than that red." The purpose of a color model is to establish a coordinate system for color — just as longitude, latitude, and altitude describe a point on Earth, we use three dimensions to describe a point in color space.
The three dimensions chosen by HSV/HSL are:
- Hue: What color is this?
- Saturation: How pure is this color?
- Value / Lightness: How bright is this color?
These three questions correspond to the three independent channels through which humans perceive color. Understand them, and you have mastered the "longitude and latitude" of color space.
💡 Key Insight: Hue determines "what color it is," saturation determines "how intense the color is," and value determines "how bright the color is." The three are independent of each other — changing one does not affect the other two. This is exactly why HSV/HSL is more intuitive than RGB.
Hue: The Identity of a Color
Hue is the most essential attribute of color. It answers the question "what color is this?" Red, orange, yellow, green, cyan, blue, and purple — the color names we use every day — describe hues.
The Hue Wheel
In HSV/HSL, hue is represented by a hue angle from 0° to 360°, forming a continuous hue wheel:
- 0° / 360° → Red
- 30° → Orange
- 60° → Yellow
- 120° → Green
- 180° → Cyan
- 240° → Blue
- 300° → Magenta / Purple
The Relativity of Hue
Hue is relative, not absolute. The same hue angle can be perceived under completely different color names depending on saturation and value. For example, 30° at full saturation and high value is a bright orange, but at low saturation and low value it may look like brown.
This also explains a common phenomenon: brown is essentially a dark, low-saturation orange. It is not a new color on the hue wheel, but the result of orange "collapsing" along the value and saturation dimensions.
Where Hue Is Used
- Color schemes: Complementary colors (180° apart), analogous colors (within 30°), and triadic schemes (120° apart) are all based on the hue wheel.
- Data visualization: Using different hues to distinguish categories is the most common categorical color-coding method.
- Brand identity: A brand's primary color is usually a fixed hue, from which a complete brand palette is derived by adjusting saturation and value.
Saturation: The Purity of a Color
Saturation describes the purity of a color, also called chroma. It answers the question "how intense and vivid is this color?"
Value Range
Saturation is usually expressed as a percentage from 0% to 100%:
- 0%: No color at all — it is gray (whether light gray or dark gray depends on value).
- 100%: The most vivid, purest color.
The higher the saturation, the more a color "pops" and the stronger its visual impact; the lower the saturation, the more subdued it becomes, approaching neutral gray.
Saturation Is Not "Brightness"
This is the most easily confused point. Lowering saturation makes a color grayer, but not darker. In HSL, when lightness (L) stays constant and only saturation (S) changes, you get a series of grayscale gradients at the same lightness.
Many people conflate "low saturation" with "dark," but these are two independent dimensions. A high-lightness, low-saturation color is light gray; a low-lightness, low-saturation color is dark gray — neither is "vivid," but their brightness is completely different.
Where Saturation Is Used
- Visual hierarchy: High saturation is used for emphasis, low saturation for backgrounds and supporting information. This is the most common contrast technique in UI design.
- Emotional expression: High saturation conveys energy and excitement; low saturation conveys calm, sophistication, and restraint.
- Accessibility: Pure gray text (0% saturation) is usually more readable than colored text and is better suited for long-form text.
💡 Practical Tip: When designing an interface, use low-saturation colors for large background areas and high-saturation colors for key action buttons. This keeps the screen clean while letting users spot the focus at a glance.
Value: The Lightness and Darkness of a Color
Value describes the lightness or darkness of a color and answers the question "how bright is this color?" It is the dimension most directly tied to "seeing" — because value determines the contrast between a color and its background.
V in HSV vs. L in HSL
Here we need to make a distinction, because many sources conflate the two:
- V in HSV (Value): From 0% (pure black) to 100% (brightest). At V=100%, the color reaches its brightest state for that hue.
- L in HSL (Lightness): From 0% (pure black) to 100% (pure white), with 50% being the pure hue. As L moves toward either end, the color approaches black or white respectively.
The key difference is: in HSL, raising L from 50% to 100% makes the color increasingly close to white (saturation information is gradually lost); in HSV, at V=100% the color still retains maximum saturation. That's why the color pickers in design software behave differently for HSV and HSL.
Value and Contrast
Difference in value is the core source of visual contrast. Two colors with completely different hues will look "muddy" together if their values are close; conversely, even two colors of the same hue can form a clear hierarchy if the value difference is large enough.
This is why pure black-and-white design (maximum value contrast) never goes out of style — it relies not on hue but solely on value to establish a complete visual order.
Where Value Is Used
- Establishing hierarchy: Headings use low value (dark), supporting text uses high value (light), making the hierarchy immediately clear.
- Setting the mood: Overall low-value compositions convey mystery and stability; overall high-value compositions convey lightness and airiness.
- Accessibility: The contrast requirements in WCAG are essentially requirements about value difference.
How the Three Dimensions Work Together: The Underlying Logic of Color Adjustment
Having understood what each dimension does, the key next step is: how they interact. In real color adjustment, you almost always work with two or three dimensions at once.
Darkening a Color
In HSV, just lower V — hue and saturation stay largely unchanged. In HSL, move L from 50% toward 0%. Note: in HSL, when L is lowered very far, saturation appears to "stop working," because the color approaches black and hue information becomes almost invisible.
Graying a Color
Lower only the saturation while keeping value unchanged. This yields a gray of the same value, rather than "darkening" it.
Lightening a Color (Pastel Effect)
Raise value and lower saturation. Pastel colors are combinations of high value and medium-to-low saturation.
🔧 Common Color Adjustment Formulas (HSL):
Darken → L ↓, H and S unchanged
Gray → S ↓, H and L unchanged
Pastel → L ↑ + S ↓
Sophisticated dark → L ↓ + S ↓ (lower both value and saturation)
Vivid emphasis → S ↑ + moderate L (L too high or too low weakens vividness)
A Complete Example: From Pure Red to a Brand Palette
Suppose your brand's primary color is pure red, hsl(0, 100%, 50%). By adjusting the three dimensions, you can derive a complete, harmonious brand palette:
- Deep red: hsl(0, 100%, 30%) — lowered value, for emphasis on dark backgrounds.
- Brick red: hsl(10, 70%, 45%) — slightly shifted hue + reduced saturation, warmer and more grounded.
- Pink: hsl(0, 80%, 85%) — raised value, for light areas.
- Grayish red: hsl(0, 15%, 50%) — greatly reduced saturation, for supporting text or dividers.
Note that these colors are not chosen at random — they all come from the same hue (or an adjacent hue) and are simply spread across different saturations and values. This is the underlying method of "monochromatic color schemes": lock in the hue and work with saturation and value.
Common Misconceptions
- Misconception 1: The higher the saturation, the better it looks. High-saturation colors used in large amounts cause visual fatigue and make a composition lose its focus. Truly sophisticated palettes are often low-saturation backgrounds with a few high-saturation accents.
- Misconception 2: Value is the same as brightness. In everyday language the two can be used interchangeably, but in color models, V in HSV and L in HSL are defined differently. When doing precise color adjustment, be clear about which one you are using.
- Misconception 3: Hue is absolute. The same hue angle can be perceived under completely different color names depending on saturation and value. Brown is dark orange — this is the key to understanding the relativity of color.
“Hue decides who you are, saturation decides how boldly you show it, and value decides whether you stand in the light or in the shadow. Each dimension does its job, and only then does color become color.”
Summary
- Hue: A hue angle from 0°–360°, determining color identity and forming the hue wheel.
- Saturation: 0%–100%, determining color purity — 0% is gray, 100% is the most vivid.
- Value: 0%–100%, determining lightness or darkness; V in HSV and L in HSL are defined differently and must be distinguished.
- Independence: Changing one dimension does not affect the other two — this is the fundamental source of HSV/HSL's intuitiveness.
- Adjustment logic: Darken by lowering L, gray by lowering S, pastel by raising L and lowering S, sophistication by lowering both L and S.
Next, we move to another core of color theory: color contrast and color scheme principles — which scenarios suit complementary, analogous, and triadic schemes, and how to use contrast to establish visual hierarchy. Once you understand hue, saturation, and value, you truly have the ability to "speak with color."