Hue คืออะไร? คุณสมบัติพื้นฐานที่สุดของสี

If you strip a color of its lightness and its vividness — if you ask "but what color family does it belong to?" — you are left with hue. Hue is the most fundamental property of color, the quality that distinguishes red from blue, orange from green, and violet from yellow. Every other color attribute — how bright it is, how vivid, how muted — exists as a modification of hue. To understand hue is to understand the skeleton of the entire color system.

Hue Defined and Positioned on the Color Wheel

Hue is the attribute of a color that allows it to be classified as red, orange, yellow, green, blue, violet, or any shade in between those anchors. It is the "what color is it?" question before any consideration of how light or dark or vivid the color happens to be.

The most intuitive model for hue is the color wheel — a circular arrangement of hues that places related colors adjacent to each other and opposite colors across from each other. The color wheel as most designers use it today is derived from the work of Johann Wolfgang von Goethe (Theory of Colours, 1810) and later refined through Munsell's perceptual color system in the early twentieth century.

The traditional artist's color wheel organizes hues around:

Primary colors: Red, Yellow, Blue (in the traditional pigment model)
Secondary colors: Orange (red + yellow), Green (yellow + blue), Violet (blue + red)
Tertiary colors: The six colors between primaries and secondaries — red-orange, yellow-orange, yellow-green, blue-green, blue-violet, red-violet

The key insight of the color wheel is that hue is circular. Moving around the wheel, you pass smoothly from red through orange, yellow, green, cyan, blue, violet, magenta, and back to red — with no hard boundary between any two adjacent families. This circularity means that the "distance" between any two hues can be measured as an angle, which is exactly how digital color models represent it.

Hue in HSL and HSV Color Models

In digital color, hue is expressed as an angle in degrees, ranging from 0 to 360. This representation is used in both HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value — also called HSB for Brightness), the two most widely used human-centric color models.

The Hue Angle

The hue circle in HSL and HSV maps standard color families to degree values:

0° / 360°: Red — #FF0000
30°: Orange — #FF8000
60°: Yellow — #FFFF00
90°: Yellow-green (chartreuse) — #80FF00
120°: Green — #00FF00
150°: Spring green — #00FF80
180°: Cyan — #00FFFF
210°: Azure — #0080FF
240°: Blue — #0000FF
270°: Violet — #8000FF
300°: Magenta — #FF00FF
330°: Rose — #FF0080

The hue angle is the same in HSL and HSV — these two models share the same hue definition but differ in how they represent lightness and saturation. The Color Converter displays both HSL and HSV values for any color, so you can see exactly where a given hue sits on this scale.

Why the Hue Wheel Starts at Red

The decision to place red at 0° in HSL and HSV is a convention, not a law of nature. It was chosen because red is the longest visible wavelength of light and because it sits at the intuitive "start" of the visible spectrum when unwrapped from violet/violet-red back to red. In OKLCH, the hue angle is different — OKLCH hue 0° corresponds to a pink-red, not a pure red, because OKLCH maps hue more accurately to human perception.

Hue Angles in CSS (0–360 Degrees)

CSS has supported the hue angle in its hsl() function since CSS3. The modern CSS Color Level 4 spec extends hue angle support to all cylindrical color functions: hsl(), hwb(), lch(), and oklch().

Basic HSL Usage with Hue

/* Pure red: hue 0 */
color: hsl(0, 100%, 50%);

/* Orange: hue 30 */
color: hsl(30, 100%, 50%);

/* Pure green: hue 120 */
color: hsl(120, 100%, 50%);

/* A vivid sky blue: hue 200 */
color: hsl(200, 90%, 55%);

/* Deep purple: hue 270 */
color: hsl(270, 70%, 40%);

Modern CSS also accepts angle units beyond deg:

/* These are all the same hue: 60 degrees = yellow */
color: hsl(60deg, 100%, 50%);
color: hsl(0.1667turn, 100%, 50%);   /* 60/360 = 0.1667 turns */
color: hsl(1.0472rad, 100%, 50%);    /* 60° in radians */

While degrees remain the standard for readability, the turn unit is useful when thinking about hue rotations as fractions of the circle.

Hue in OKLCH

In OKLCH, the hue angle still runs 0–360, but the mapping to color families is slightly different from HSL because OKLCH is designed around human perception rather than mathematical convenience:

OKLCH hue ~0–30: Pink-reds and reds
OKLCH hue ~50–80: Oranges and yellows
OKLCH hue ~120–160: Yellow-greens and greens
OKLCH hue ~180–220: Cyans and blue-greens
OKLCH hue ~250–280: Blues
OKLCH hue ~300–330: Purples and magentas

Because OKLCH's hue scale accounts for human color perception, rotating hue by equal amounts in OKLCH produces more visually equal-looking steps than the same rotation in HSL.

Hue Shift and Rotation Techniques

One of the most powerful things about representing hue as an angle is that color relationships become mathematical. You can define complementary colors, triadic harmonies, and analogous palettes using nothing more than addition and subtraction.

Complementary Colors (180° Rotation)

The complement of any hue is exactly 180° away on the color wheel. Complementary pairs create maximum contrast and visual tension — they vibrate against each other when placed at similar saturation and lightness.

Red (0°) → Cyan (180°)
Orange (30°) → Azure (210°)
Yellow (60°) → Blue (240°)
Green (120°) → Magenta (300°)

In CSS, you can calculate the complement dynamically:

:root {
  --primary-hue: 220;
  --complement-hue: calc(var(--primary-hue) + 180);

  --primary: hsl(var(--primary-hue), 80%, 55%);
  --complement: hsl(var(--complement-hue), 80%, 55%);
}

Triadic Harmony (120° Rotation)

Triadic harmonies divide the color wheel into three equal parts. Starting from any hue, add 120° and 240° to get a balanced triadic trio.

:root {
  --hue-a: 30;   /* Orange */
  --hue-b: 150;  /* Spring green */
  --hue-c: 270;  /* Violet */
}

Analogous Colors (±30° Shift)

Analogous colors are adjacent on the wheel — within 30° of each other. They create harmonious, low-contrast palettes that feel natural and cohesive. Analogous palettes are common in nature (think autumn foliage: reds, oranges, and yellows) and in minimalist design systems.

:root {
  --primary-hue: 200;          /* Blue */
  --analogous-left: 170;       /* Blue-green */
  --analogous-right: 230;      /* Blue-violet */
}

Use the Palette Generator to explore any of these harmonic relationships starting from any color.

Hue Shifting in Color Scales

When generating a multi-step color scale from light to dark, pure hue shifts are sometimes applied deliberately to make the scale feel more natural. In the real world, colors do not simply get lighter and darker — they often shift slightly in hue as they lighten (becoming warmer) or darken (becoming cooler). This is called a hue arc and it is one of the techniques that distinguishes hand-crafted palettes from algorithmically perfect but visually flat ones.

For example, a blue might shift slightly toward cyan as it lightens and toward violet as it darkens, mimicking how blue light scatters in the atmosphere. In OKLCH, small hue adjustments of ±5–10° while adjusting lightness can produce more natural-looking scales.

Hue vs Color: Why They Are Not the Same

This is a distinction that frequently confuses people encountering color theory for the first time: hue and color are not synonyms, even though in everyday language they are often treated as such.

Color Is Multi-Dimensional

A color is a complete perceptual experience that includes hue, lightness, and chroma (or saturation). When you see a specific shade of "powder blue" or "forest green" or "dusty rose," you are perceiving a full color — with all three dimensions contributing to the experience.

Hue is only one of those dimensions. It is the color family — the general direction on the color wheel. But the same hue can produce an infinite number of distinct colors depending on how light or dark and how vivid or muted it is.

The Same Hue, Infinite Colors

Consider hue 220° (a cool blue direction). All of the following colors share that single hue:

#EBF5FF — barely-tinted near-white background blue (very light, very low saturation)
#90C3F7 — soft sky blue (light, moderate saturation)
#3498DB — clean medium blue (mid-lightness, high saturation)
#1A5276 — dark navy (dark, moderate saturation)
#0A1A2A — near-black with a blue undertone (very dark, very low saturation)

These five colors have radically different appearances but share the same underlying hue. They are all part of the blue-220° family — but they are not the same color.

Why the Distinction Matters for Designers

Understanding that hue is one attribute of color — not the color itself — leads to better color decisions:

Tonal consistency: Two colors with different hues but similar lightness and chroma will feel equally weighted in a composition.
Color identity: A brand's "blue" is defined by all three attributes. Simply specifying "we use blue" is not enough — the hue angle, saturation level, and lightness all define the brand color precisely.
Color relationships: Harmonies like complementary, triadic, and analogous are purely hue relationships. Applying them well still requires getting the lightness and chroma right for each color to balance visually.
Hue independence: Hue can be changed without affecting perceived lightness (in OKLCH), meaning you can create analogous palettes where every color has equal visual weight.

Achromatic Colors Have No Hue

Pure blacks, whites, and grays are achromatic — they contain no hue at all. Formally, hue is undefined for achromatic colors, because there is no color family to assign. In HSL, achromatic colors are expressed with any hue value and 0% saturation — the hue angle is meaningless when saturation is zero. In OKLCH, achromatic colors have a chroma of 0 and the hue value is again effectively undefined.

This means that true black (#000000), white (#FFFFFF), and pure gray (#808080) do not have a hue. Many near-neutrals in design systems have an extremely low chroma but a defined hue — enough to make them feel "warm" or "cool" without being an obviously tinted color.

Key Takeaways

Hue is the color family — the "what color is it?" question stripped of lightness and vividness. It is the most fundamental color attribute, and everything else in color description is a modification of it.
On the color wheel, hue is circular and expressed as an angle from 0° to 360°. Red is at 0°, green at 120°, blue at 240°, and the full spectrum wraps continuously back to red.
In CSS, the hue angle is used in hsl(), hwb(), lch(), and oklch(). It accepts deg, turn, and rad units, though degrees are standard.
Color relationships are hue arithmetic: complementary colors are 180° apart, triadic sets are 120° apart, and analogous colors sit within 30° of each other.
Hue and color are not the same. Color includes hue, lightness, and chroma/saturation together. An infinite number of distinct colors can share the same hue — from the palest tint to the darkest shade.
Achromatic colors (black, white, pure gray) have no hue. Near-neutral colors with extremely low chroma may technically have a hue but it is perceptually imperceptible.
The Color Converter displays the hue angle (in both HSL and OKLCH) for any hex color, so you can see exactly where any color sits on the wheel. The Palette Generator lets you explore harmonic relationships by rotating hue in mathematically precise steps.