Hue is the attribute of a color that identifies it as red, yellow, green, blue, purple or a mixture between neighbors, independent of how vivid or how light that color is. In color theory, hue is one of three perceptual dimensions of color, together with saturation (or chroma) and lightness, and it is usually expressed as an angle from 0 to 360 degrees around a color wheel.
Hue is the dimension people name first when they describe a color, which makes it central to design decisions about brand identity, color harmony and meaning. Yet hue alone never defines a color: a navy, a sky blue and a grayish slate can share nearly the same hue while looking completely different.
How hue arises in perception and in color models
Physically, hue relates to the dominant wavelength of light reaching the eye. Light around 450 nm tends to look blue, around 530 nm green and around 600 nm orange. Perception, however, is built on opponent processes: the visual system compares signals from three cone types and encodes color along red-green and blue-yellow axes. Hue is the direction of a color within that opponent space.
This explains why some hues have no single wavelength. Magenta and purple sit between red and blue on the color wheel, but they appear only when light from both ends of the spectrum is combined. The color wheel closes into a circle precisely because perception connects red to violet through these non-spectral purples.
Digital color models express hue numerically. The table below shows how common models treat it.
| Color model | Hue expression | Perceptual uniformity | Typical use |
|---|---|---|---|
| HSL and HSV | Angle 0-360 degrees derived from RGB | Low; equal steps look uneven | Color pickers, quick CSS adjustments |
| CIELAB (LCh) | Hue angle in the a*-b* plane | Moderate | Print, color management, quality control |
| OKLCH | Hue angle in the Oklab space | High for most hues | Modern CSS palettes, design tokens |
| Munsell system | Ten named hue families with steps | High, based on visual samples | Paint, soil and art education references |
| RGB | Implicit in the channel ratios | None as a separate value | Screen output and image data |
Hue compared with saturation and lightness
Hue answers which color family a color belongs to, while saturation and lightness describe how intense and how bright that color is. Keeping the three dimensions separate is the basis of systematic color work, because changing one dimension at a time produces predictable variations.
| Dimension | Question it answers | Range | Example change |
|---|---|---|---|
| Hue | Which color family is it | 0-360 degrees around the wheel | Blue becomes teal |
| Saturation or chroma | How vivid is it | From neutral gray to full intensity | Bright blue becomes dusty blue |
| Lightness or value | How light or dark is it | From black to white | Blue becomes navy or pale blue |
A key limitation of the popular HSL model is that its lightness value is not perceptual. At the same HSL lightness of 50 percent, pure yellow looks far brighter than pure blue. Rotating the hue in HSL therefore changes apparent brightness and contrast with text, which is why accessible palettes are increasingly built in OKLCH or CIELAB.
Hue relationships and color harmony
Most rules of color harmony are defined as angular relationships between hues on the wheel. These relationships give designers a structured starting point, although the final balance always depends on saturation, lightness and the area each color occupies.
| Scheme | Hue relationship | Visual effect | Typical use |
|---|---|---|---|
| Monochromatic | One hue with varied lightness and saturation | Calm, unified | Minimal interfaces, editorial layouts |
| Analogous | Neighbors within about 30-60 degrees | Harmonious, natural | Illustration, environmental graphics |
| Complementary | Hues about 180 degrees apart | Strong contrast, vibrancy | Calls to action, sports branding |
| Split complementary | One hue plus two neighbors of its complement | Contrast with less tension | Marketing visuals, posters |
| Triadic | Three hues about 120 degrees apart | Balanced but lively | Children’s products, data categories |
The angles depend on the wheel being used. The traditional painter’s RYB wheel places complements differently from the RGB-based wheel of digital tools, so red’s complement is green on one and cyan on the other. Designers should know which wheel a rule was formulated for.
Using hue in design and interfaces
In interface and brand design, hue usually carries meaning and categorization: a primary brand hue, semantic hues for success, warning and error, and distinct hues for data series. A disciplined system assigns each hue a role and then generates tints and shades along lightness, rather than introducing new hues for every need.
- Never rely on hue alone to convey information; about 8 percent of men and 0.5 percent of women of Northern European descent have a red-green color vision deficiency.
- Limit categorical hues in charts to roughly six to eight, because more become hard to distinguish and remember.
- Shift hue slightly in dark shades, for example toward blue or purple, to keep shades from looking muddy.
- Test meanings across cultures, since the associations of red, white or green vary between regions.
Accessibility standards such as WCAG 2.2 measure contrast through relative luminance, not hue. Two colors with very different hues, such as a saturated red and green, can still have insufficient contrast for text.
Factors that change perceived hue
Perceived hue is not a fixed property of a color value. The same RGB code can look different depending on surroundings, light source, size and display. Understanding these effects prevents unpleasant surprises when a palette moves from a design tool into production.
| Effect | What happens | Practical consequence |
|---|---|---|
| Simultaneous contrast | Surrounding colors push a hue toward their complement | Gray on orange looks bluish |
| Bezold-Brücke shift | Hue appears to change with intensity | Bright orange looks yellower than dim orange |
| Abney effect | Adding white shifts apparent hue | Pale blues can drift toward purple |
| Illuminant change | Light source alters reflected spectrum | Print colors differ under daylight and warm lamps |
| Gamut differences | Devices reproduce different color ranges | A Display P3 hue may clip on sRGB screens |
For critical work, designers specify colors in a managed color space, proof on target devices and evaluate samples under standardized lighting such as D50 or D65.
Understanding it simply
Hue is simply the name of a color family: red, orange, yellow, green, blue or purple. When you point at a shirt and say it is blue, you are naming its hue.
Two colors can share a hue and still look very different. A pale baby blue and a deep navy are both blue; they only differ in how bright and how strong they are. Hue tells you which color, not how much of it, which is why designers treat it as one of three separate settings.
Applied in practice
A design team builds a color system for a healthcare scheduling platform. They pick a brand hue of about 250 degrees in OKLCH, a calm blue, and generate ten lightness steps from it while keeping the hue nearly constant. Semantic hues follow: green for confirmed appointments, amber for pending and red for canceled.
During testing, a color-blind user cannot tell confirmed from canceled appointments in the calendar view. The team keeps the hues but adds icons and text labels to each status, and adjusts lightness so that every status color meets a 4.5:1 contrast ratio against white.
Because the system was built in a perceptual model, rotating to the semantic hues did not create uneven brightness. The result is a palette that looks consistent and stays readable for all users.