CSS <hue> Data Type

The CSS <hue> data type represents a hue angle in a color space. A hue can be specified as an <angle> or a <number>, with number values interpreted as degrees.

Syntax

The <hue> data type accepts an angle or a number:

<hue> = <number> | <angle>

Examples include:

0
120
240
90deg
0.5turn
200grad
3.14159rad

Angle Values

A hue can use any CSS angle unit, including deg, grad, rad, and turn. These values describe positions around the hue circle.

Value	Equivalent
`90deg`	90 degrees
`100grad`	90 degrees
`0.25turn`	90 degrees
`1.5708rad`	Approximately 90 degrees

Number Values

When a hue is written as a unitless <number>, the value is interpreted as degrees. For example, 120 represents the same hue angle as 120deg.

hsl(120 100% 50%)
hsl(120deg 100% 50%)

Both declarations specify the same hue.

Hue Circle

Hue values wrap around a circle. One complete rotation is 360deg, so angles separated by a full rotation represent the same hue.

0deg = 360deg
120deg = 480deg
-120deg = 240deg

The actual color associated with a hue angle depends on the color function and color space in which the hue is used.

<hue> Example

The following HSL colors use different hue values while keeping saturation and lightness unchanged:

.red {
  background-color: hsl(0 100% 50%);
}
.green {
  background-color: hsl(120 100% 50%);
}
.blue {
  background-color: hsl(240 100% 50%);
}

Browser Result

0deg

120deg

240deg

Changing only the hue moves the color around the HSL hue circle while saturation and lightness remain the same.

Specifications

The <hue> data type is defined in the CSS Color Module Level 4 .