Màu sắc

HSL là gì?

hslhue saturation lightness

HSL là cách mô tả màu bằng ba thông số: Hue (sắc độ, góc 0–360° trên vòng màu), Saturation (độ bão hoà, %) và Lightness (độ sáng, %), phổ biến trong CSS và công cụ thiết kế web.

Hiểu kỹ hơn

HSL dễ hiểu hơn RGB khi chỉnh màu: muốn màu nhạt hơn chỉ cần tăng L, muốn trầm hơn thì giảm S. Trong HSL, L = 50% là màu thuần, L = 100% luôn là trắng và L = 0% luôn là đen. HSL khác HSB (HSV): trong HSB, B = 100% với S = 100% là màu thuần, còn trắng cần S = 0%. Nhược điểm của HSL là độ sáng không đều với mắt người: vàng và xanh dương cùng L = 50% nhưng vàng trông sáng hơn nhiều.

Ảnh minh hoạ HSL: hình trụ HSL có trục sáng, vòng sắc độ và bán kính bão hoà
Hình trụ HSL có trục sáng, vòng sắc độ và bán kính bão hoà

Thuật ngữ liên quan

01HSB

Hệ mô tả màu bằng ba thông số: Hue (sắc độ, vị trí màu trên vòng tròn 0–360°), Saturation (độ bão hoà) và Brightness (độ sáng). Photoshop và Illustrator…

02RGB (Red, Green, Blue)

Là hệ màu cộng dùng trong các thiết bị điện tử như màn hình TV, máy tính, để tạo ra màu sắc bằng cách kết hợp ánh sáng đỏ, xanh lá, và xanh dương với các…

03Mã màu HEX

Mã màu HEX là cách viết màu RGB bằng hệ thập lục phân với sáu ký tự sau dấu #, mỗi cặp là cường độ đỏ, xanh lá, xanh dương từ 00 đến FF, ví dụ #F15A24 là…

04OKLCH

OKLCH là hệ màu theo cảm nhận (dựa trên Oklab) mô tả màu bằng độ sáng (L), độ rực (C) và sắc độ (H), được thiết kế để các thay đổi số trông đều với mắt…

05Hue (sắc độ màu)

Hue (sắc độ) là thuộc tính cho biết một màu thuộc 'họ' nào trên vòng tròn màu, như đỏ, cam, vàng, xanh lá, xanh dương, tím, thường đo bằng góc từ 0° đến…

06Saturation (độ bão hoà)

Saturation (độ bão hoà) là mức độ rực, đậm của màu so với màu xám cùng độ sáng: bão hoà cao là màu tươi rực, thấp là màu nhạt xám, bằng 0 là xám hoàn toàn.