Lightness is the perceived lightness or darkness of a color judged relative to a white surface under the same illumination. In color theory, it is one of the three basic dimensions of color, together with hue and saturation (or chroma), and it is often called value in painting and traditional design education.
Lightness carries most of the information people use to see form, depth and text. A design that works in grayscale usually works in color, because lightness differences create structure, while hue mainly adds identity and meaning. Different color models define lightness in different ways, and those differences matter in practice.
How lightness is perceived
Lightness is perceived through the luminance signal the eye receives, but the relationship between physical light and perceived lightness is not linear. Human vision is more sensitive to changes in dark tones than in light ones, so a surface reflecting about 18 percent of light already looks like a middle gray.
Lightness also depends on hue. At the same saturation, a pure yellow looks much lighter than a pure blue, because the eye is most sensitive to wavelengths in the yellow-green region. This is why two colors with identical lightness values in a simple model can look very different when converted to grayscale.
Lightness and brightness are related but distinct terms. Brightness describes how much light a source or surface seems to emit in absolute terms, while lightness is a relative judgment against white in the same scene, which is why a sheet of paper still looks white in dim light.
Digital color encoding reflects this nonlinearity. The sRGB transfer curve spaces stored values more closely in dark tones, so an RGB value of 128 out of 255 corresponds to only about 22 percent of maximum luminance, yet it looks close to a middle tone. Arithmetic on raw RGB numbers therefore does not produce visually even lightness steps.
Lightness in common color models
Color models define lightness with different formulas and scales, and the choice of model determines whether equal steps in the number also look like equal steps to the eye. The table compares the most common definitions.
| Model | Dimension | Scale | Perceptual uniformity |
|---|---|---|---|
| HSL | Lightness L | 0 to 100 percent | Poor; varies strongly with hue |
| HSV or HSB | Value or brightness V | 0 to 100 percent | Poor; pure hues all have 100 percent |
| CIELAB | Lightness L* | 0 to 100 | Good for most purposes |
| OKLCH and OKLab | Lightness L | 0 to 1, or 0 to 100 percent | Good and simpler to use |
| Munsell system | Value | 0 to 10 | Designed from visual judgments |
In HSL, lightness is calculated as the average of the highest and lowest RGB components, so every fully saturated hue sits at 50 percent lightness, although yellow appears far lighter than blue. Perceptual models such as CIELAB and OKLCH correct this, so colors with the same L value look similarly light across hues.
Modern CSS supports these perceptual spaces directly through functions such as lab(), lch() and oklch(). This allows design tokens to state lightness explicitly, for example keeping every primary button background at the same OKLCH lightness, although some resulting colors may fall outside the sRGB gamut and need gamut mapping.
Lightness compared with related color terms
Lightness is easily confused with luminance, saturation and tone, because changing one often appears to change the others. Clear terminology helps when specifying colors or discussing palettes.
| Term | Meaning | Relationship to lightness |
|---|---|---|
| Hue | Color family such as red or blue | Independent, but affects perceived lightness |
| Saturation | Intensity relative to gray | In HSL, changes perceived lightness |
| Relative luminance | Physical light measure, 0 to 1 | Basis for contrast ratio calculations |
| Tint | Color mixed with white | Higher lightness |
| Shade | Color mixed with black | Lower lightness |
| Tone | Color mixed with gray | Reduced saturation, varied lightness |
For accessibility, the relevant measure is relative luminance, which WCAG uses to calculate contrast ratios. Perceptual lightness values such as L* in CIELAB correlate with luminance, but they are not interchangeable, so contrast checks should use a proper contrast calculator.
Using lightness in design work
Designers use lightness to build palettes, hierarchy and depth. A practical palette usually contains a lightness scale for each key hue, from near-white backgrounds to near-black text, so that components can be combined with predictable contrast.
| Task | Lightness approach | Reason |
|---|---|---|
| Building color scales | Even steps in a perceptual model | Consistent visual progression |
| Text on backgrounds | Large lightness difference | Readability and contrast compliance |
| Dark mode | Lower lightness surfaces, lighter text | Comfort in dim environments |
| Data visualization | Lightness ramps for ordered values | Readable in grayscale and by color-blind viewers |
| Illustration and shading | Lightness for form, hue for mood | Volume reads through value |
A common professional check is to convert a design to grayscale. If the hierarchy, charts and buttons still read clearly, the lightness structure is sound; if elements merge into similar grays, hue alone was carrying the distinction.
Common mistakes with lightness
The most frequent mistakes come from trusting HSL lightness values as if they described perception. Equal HSL steps across different hues often produce palettes that look uneven, with yellow and cyan swatches appearing much lighter than blue and purple ones.
- Using one HSL lightness value for all hues creates inconsistent buttons and badges.
- Relying on hue alone for meaning fails when colors share similar lightness.
- Adjusting lightness without checking saturation can produce muddy or overly vivid colors.
- Copying light-mode palettes into dark mode by simple inversion often produces harsh contrast.
The idea in brief
Lightness is how light or dark a color looks. Pale sky blue and deep navy share a hue, but one is light and the other is dark.
If a colorful picture is turned into black and white, what remains is lightness. That is why designers check their work in grayscale: when the important parts still stand out, the colors are doing their job.
A practical scenario
A product team builds a set of status badges for green, yellow, orange, red and blue. Using HSL, each badge background is set to 50 percent lightness with white text, but the yellow and green badges become hard to read, while the blue one looks much heavier than the rest.
The designer rebuilds the colors in OKLCH, giving all badge backgrounds the same perceptual lightness and choosing dark text for the lighter ones. Each combination is then checked against a contrast ratio of 4.5:1.
The new badges look balanced in weight, remain readable in grayscale and pass accessibility checks, so status information no longer depends on color alone.