<hue>
Kiểu dữ liệu <hue> của CSS đại diện cho góc sắc độ của một màu.
Nó được sử dụng trong các hàm màu nhận sắc độ được biểu thị bằng một giá trị duy nhất, cụ thể là các ký hiệu hàm hsl(), hwb(), lch(), và oklch().
Cú pháp
Một <hue> có thể là <angle> hoặc <number>.
Giá trị
<angle>-
Một góc được biểu thị bằng độ, gradian, radian hoặc vòng sử dụng lần lượt
deg,grad,rad, hoặcturn. <number>-
Một số thực, đại diện cho số độ của góc sắc độ.
Vì <angle> có tính chu kỳ, <hue> được chuẩn hóa về khoảng [0deg, 360deg). Nó bao quanh ngầm định sao cho 480deg giống như 120deg, -120deg giống như 240deg, -1turn giống như 1turn, v.v.
Mô tả
Bánh xe màu ở trên cho thấy các sắc độ ở tất cả các góc trong không gian màu color space sRGB. Cụ thể, đỏ ở 0deg, vàng ở 60deg, xanh lá ở 120deg, lam ở 180deg, xanh dương ở 240deg, và hồng tím ở 300deg.
Các góc tương ứng với các sắc độ cụ thể khác nhau tùy thuộc vào không gian màu. Ví dụ, góc sắc độ của màu xanh lá sRGB là 120deg trong không gian màu sRGB, nhưng là 134.39deg trong không gian màu CIELAB.
Bảng sau liệt kê các màu điển hình ở các góc khác nhau trong không gian màu sRGB (được sử dụng bởi hsl() và hwb()), CIELAB (được sử dụng bởi lch()), và Oklab (được sử dụng bởi oklch()):
| 0° | 60° | 120° | 180° | 240° | 300° | |
|---|---|---|---|---|---|---|
| sRGB | ||||||
| CIELAB | ||||||
| Oklab |
Nội suy các giá trị <hue>
Các giá trị <hue> được nội suy như các giá trị <angle>, và thuật toán nội suy mặc định là shorter. Trong một số hàm CSS liên quan đến màu, điều này có thể được ghi đè bởi thành phần <hue-interpolation-method>.
Cú pháp chính thức
<hue> =
<number> |
<angle>
Ví dụ
Thay đổi sắc độ của màu bằng thanh trượt
Ví dụ sau đây cho thấy hiệu ứng của việc thay đổi giá trị hue của ký hiệu hàm hsl() trên một màu.
HTML
<input type="range" min="0" max="360" value="0" id="hue-slider" />
<p>Sắc độ: <span id="hue-value">0deg</span></p>
<div id="box"></div>
CSS
#box {
background-color: hsl(0 100% 50%);
}
JavaScript
const hue = document.querySelector("#hue-slider");
const box = document.querySelector("#box");
hue.addEventListener("input", () => {
box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
document.querySelector("#hue-value").textContent = `${hue.value}deg`;
});
Kết quả
Xấp xỉ sắc đỏ trong các không gian màu khác nhau
Ví dụ sau đây cho thấy màu đỏ tương tự trong các không gian màu khác nhau.
Các giá trị trong hàm lch() và oklch() được làm tròn để dễ đọc.
HTML
<div data-color="hsl-red">hsl()</div>
<div data-color="hwb-red">hwb()</div>
<div data-color="lch-red">lch()</div>
<div data-color="oklch-red">oklch()</div>
CSS
[data-color="hsl-red"] {
/* hsl(<hue> <saturation> <lightness>) */
background-color: hsl(0 100% 50%);
}
[data-color="hwb-red"] {
/* hwb(<hue> <whiteness> <blackness>) */
background-color: hwb(0 0% 0%);
}
[data-color="lch-red"] {
/* lch(<lightness> <chroma> <hue>) */
background-color: lch(50 150 40);
}
[data-color="oklch-red"] {
/* oklch(<lightness> <chroma> <hue>) */
background-color: oklch(0.6 0.4 20);
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Color Module Level 4 # typedef-hue |