Color terms

Hue is what most people mean when they say "color." Red, blue, green, yellow, orange — these are hues. Technically, hue refers to where a color sits on the color wheel, defined by its dominant wavelength. In the HSL color model, hue is expressed as a degree from 0° to 360° — red at 0°, green at 120°, blue at 240°, and back to red at 360°.

Hue says nothing about how light, dark, vivid, or muted a color is. A pale baby blue and a deep navy are different colors, but they share the same hue.

Value measures how light or dark a color is — essentially, how much light it emits or reflects. A vivid yellow has a high value (it's bright). A deep navy has a low value (it's dark). Pure white is the highest possible value; pure black is the lowest.

A useful test: convert any group of colors to grayscale. The differences you see are differences in value, with all hue and saturation information stripped away. Two colors can look very different in full color but be almost identical in value, which is exactly why contrast checking matters for accessibility. If the text and background have similar values, the text becomes hard to read regardless of how different the hues are.

Value is a broad visual concept, while lightness may also refer to a mathematically defined component of a color model.

Saturation is a color's intensity, how vivid or pure it appears. A fully saturated color contains no gray; it's as vibrant as that hue can be. As saturation decreases, the color becomes more muted, washed out, and closer to a neutral gray.

Saturation is independent of value. You can have a highly saturated dark blue and a highly saturated light blue, both are vivid, just at different lightness levels. In the HSL model, saturation is expressed as a percentage from 0% (completely gray) to 100% (fully vivid).

The perceived saturation of a color is not constant — it shifts depending on surrounding colors, lighting conditions, and screen characteristics.

Lightness is how close a color is to white or black. At 0% lightness, any hue becomes black. At 100%, any hue becomes white. At 50%, you get the pure, fully saturated version of the hue.

Lightness and value are closely related but not identical. Value is an absolute measure of how much light a color emits. Lightness is relative — it describes where a color sits on the scale between black and white within the HSL color model. In practice, the two terms are often used interchangeably.

A tint is a hue with white added. The more white you add, the lighter the tint becomes. Pink is a tint of red. Sky blue is a tint of blue. Tints are sometimes called pastels.

In CSS terms, creating a tint means increasing the lightness value in HSL while keeping the hue and saturation constant.

A shade is a hue with black added. The more black you add, the darker the shade becomes. Navy is a shade of blue. Maroon is a shade of red.

In CSS terms, creating a shade means decreasing the lightness value in HSL while keeping the hue and saturation constant.

A tone is a hue with gray added, effectively reducing its saturation while keeping its lightness roughly the same. Tones are more subdued and muted than the pure hue, making them useful in design because they feel less aggressive and more natural than fully saturated colors. Most colors you encounter in everyday life, wall paint, clothing, natural objects, are tones rather than pure hues.

Chroma is similar to saturation but measured differently. While saturation is relative to the color's own lightness, chroma is an absolute measure of colorfulness. A color with high chroma is vivid regardless of how light or dark it is. Chroma is the term used in the newer OKLCH and LCH color models in CSS, which aim for perceptual uniformity. Equal steps in chroma look equally different to the human eye.

The color wheel divides roughly in half between warm and cool colors. Reds, oranges, and yellows are warm — they're associated with fire, sunlight, and energy. Blues, greens, and purples are cool, associated with water, sky, and calm.

Warm colors tend to advance visually (they feel closer), while cool colors recede (they feel farther away). This distinction is important in design: a warm accent on a cool background will naturally draw the eye.

The warm/cool boundary isn't absolute. A blue-leaning red (like crimson) can feel cooler than a yellow-leaning red (like scarlet). Context and surrounding colors also shift the perception.

Artistic “warm” and “cool” color categories should not be confused with the Kelvin scale used to describe the color appearance of light sources.

Opacity is how opaque or see-through a color is. At 100% opacity, a color is completely solid, nothing behind it shows through. At 0%, it's fully transparent, invisible. Values in between create a semi-transparent effect where the color blends with whatever is behind it.

In CSS, opacity is controlled through the alpha channel in rgba (red, green, blue, alpha) or hsla (hue, saturation, lightness, and alpha) values, or through the opacity property. Opacity applies to the entire element and its contents, while alpha applies only to the color itself.

Opacity is not a color dimension like hue or lightness, but it changes the final color we perceive when foreground and background colors are blended.