0

Kết quả Mã hóa

Màu HSL

Giới thiệu về màu HSL

Màu HSL là mô hình màu biểu diễn màu bằng sắc độ, độ bão hòa và độ sáng. Khác với RGB chỉ định trực tiếp cường độ ánh sáng đỏ, xanh lá và xanh dương, HSL tách sắc độ, độ rực và độ sáng, nên hữu ích khi điều chỉnh màu và thiết kế CSS.

Thành phầnÝ nghĩaGiá trị ví dụ
H: Sắc độBiểu thị sắc độ dưới dạng góc. Đỏ ở khoảng 0deg, xanh lá khoảng 120deg và xanh dương khoảng 240deg.90deg
S: Độ bão hòaBiểu thị độ rực của màu. 0% là không màu, 100% là màu rực nhất.50%
L: Độ sángBiểu thị độ sáng của màu. 0% là đen, 50% là độ sáng thông thường và 100% là trắng.50%

Ví dụ, các màu chính như màu đỏ có thể được biểu diễn như sau.

MàuKý hiệu HSLKý hiệu RGB
Đỏhsl(0deg 100% 50%)rgb(255 0 0)
Xanh láhsl(120deg 100% 25.1%)rgb(0 128 0)
Xanh limehsl(120deg 100% 50%)rgb(0 255 0)
Xanh dươnghsl(240deg 100% 50%)rgb(0 0 255)
Trắnghsl(0deg 0% 100%)rgb(255 255 255)
Đenhsl(0deg 0% 0%)rgb(0 0 0)

Để bao gồm độ trong suốt, hãy thêm giá trị alpha. Ví dụ, màu đỏ bán trong suốt có thể được biểu diễn là hsl(0deg 100% 50% / 0.5).

Khi nhập, bạn có thể dùng ký hiệu phân tách bằng khoảng trắng hsl(0deg 100% 50%), cũng như ký hiệu cũ phân tách bằng dấu phẩy hsl(0deg, 100%, 50%).

Cách xử lý sắc độ, độ bão hòa và độ sáng

Sắc độ được xử lý như một góc; giá trị lớn hơn 360deg hoặc giá trị âm được chuẩn hóa về khoảng 0deg đến 360deg. Ví dụ, hsl(360deg 100% 50%) được xử lý như cùng màu với hsl(0deg 100% 50%), và hsl(-120deg 100% 50%) như cùng màu với hsl(240deg 100% 50%).

Độ bão hòa và độ sáng được xử lý trong khoảng từ 0% đến 100%. Khi độ bão hòa là 0%, màu trở thành màu xám không màu bất kể sắc độ. Khi độ sáng là 0%, màu là đen; khi là 100%, màu là trắng.

Khác nhau giữa HSL và RGB

RGB chỉ định trực tiếp các thành phần đỏ, xanh lá và xanh dương, nên gần với hiển thị màn hình và dữ liệu ảnh. HSL tách sắc độ, độ bão hòa và độ sáng, giúp các thao tác như “làm sáng hơn nhưng giữ cùng sắc độ” hoặc “chỉ giảm độ bão hòa” dễ hơn.

Tuy nhiên, HSL không phải là không gian màu đồng đều hoàn toàn theo cảm nhận. Khi cần xử lý độ sáng thị giác hoặc khác biệt màu dễ hơn, có thể dùng các không gian màu như Lab, LCH, Oklab và Oklch.