What is Hue?
A hue is a pure color, the quality we name when we call something red, blue, or green. On a color wheel, each hue is a position around the circle. Pink and maroon aren’t separate hues; they’re a tint and a shade of the same hue, red.
More About Hue
Hue vs. tint, shade, and tone
Tints, shades, and tones are all versions of one pure hue. Add white and you get a tint. Add black, a shade. Add gray, a tone, which reads as softer and more muted. The diagram above traces the whole family for red; the same recipe works from any hue, which is how mint and forest green both come from green.
How hue works on screens
Painters learn red, yellow, and blue as primary colors, but screens mix light, not pigment: every color on a display comes from red, green, and blue light added together. In CSS, designers often set colors with hsl(), where the first number is the hue as a position on the color wheel, from 0 for red through 120 for green and 240 for blue. Writing hsl(240 100% 50%) says: take the blue hue, fully saturated, at medium lightness.
Hue in color palettes
A brand’s palette usually starts with one or two main hues, then fills out with tints, shades, and a neutral or two. Hue establishes the color scheme; the variations keep pages from feeling flat while everything still matches. Complementary hues, opposite each other on the wheel, give the strongest contrast a palette can have.
Hue and conversions
Color choices move numbers, which is why hue shows up in conversion optimization. A call-to-action button in a hue that contrasts with the rest of the page tends to draw the eye and win more clicks; a button in a hue close to the background disappears. The rule of thumb: pick a CTA hue you use nowhere else on the page; a distinct hue does more than simply making an existing color brighter.
Frequently Asked Questions
What’s the difference between hue and color?
Hue is one ingredient of a color. A full color combines a hue (where it sits on the color wheel) with saturation (how intense it is) and lightness (how light or dark). Navy and a vivid primary blue are different colors built on the same blue hue.
Are black, white, and gray hues?
No. Black, white, and gray are neutrals, also called achromatic colors: they have no hue at all. That’s why the color wheel has no gray slot; it maps hues only. In hsl() terms, a neutral is any color with saturation set to 0%.
What does the hue number mean in CSS?
In hsl(), it’s an angle in degrees around the color wheel, from 0 to 360, and the ends meet: 360 wraps back to 0. Change that first number alone and the color rotates through every hue while saturation and lightness stay fixed, which is how designers script color schemes.
How many hues are there?
Hue is continuous, so technically there are infinitely many. In practice, designers work with a color wheel divided into 12 named hues (3 primary, 3 secondary, 6 tertiary), then mix every other color as a variation of those twelve.
