Đọc hsl(H, S, L)
HSL gồm H (Hue: sắc độ), S (Saturation: độ bão hòa) và L (Lightness: độ sáng). Trong cách viết của bài, H là số đo góc trên vòng màu; S và L ghi phần trăm.
| Tham số | Cách đọc |
|---|---|
| H |0 hoặc 360: đỏ; 120: xanh lá; 240: xanh dương|
| S |0%: không còn sắc màu, chỉ còn sắc xám theo L; 100%: bão hòa đầy đủ|
| L |0%: đen; 100%: trắng; các mức ở giữa cho độ sáng khác nhau|
L=50% thường dùng để minh họa các màu bão hòa trên vòng màu. Những mức như 25% vẫn là màu hợp lệ; không bắt buộc mọi màu phải có L=50%.
Sáu màu bão hòa trên vòng màu
| Màu | Cách viết HSL |
|---|---|
| Đỏ |hsl(0, 100%, 50%)|
| Vàng |hsl(60, 100%, 50%)|
| Xanh lá lime |hsl(120, 100%, 50%)|
| Xanh lơ aqua |hsl(180, 100%, 50%)|
| Xanh dương blue |hsl(240, 100%, 50%)|
| Hồng tím fuchsia |hsl(300, 100%, 50%)|
hsl(360, 100%, 50%) quay hết một vòng nên trở về màu đỏ. hsl(120, 0%, 50%) cho xám dù H đang là 120, vì S đã bằng 0%. Khi S=0%, thay riêng H không đổi sắc xám nếu L giữ nguyên.
Bài luyện
hsl(240, 100%, 50%) cho màu nào trong bảng?
Đỏ ở H=0 hoặc 360.
lime ở H=120 với S và L đã cho.
Đúng. H=240 là xanh dương.
Vàng ở H=60 với S và L đã cho.
Lời giải
Trong bảng cùng S=100% và L=50%, H=240 nằm ở vị trí xanh dương. Do đó hsl(240, 100%, 50%) cùng màu blue.
Bài luyện
Giữ L=50%, hai giá trị hsl(30, 0%, 50%) và hsl(210, 0%, 50%) có quan hệ gì?
Đúng. S=0% làm H không còn phân biệt sắc màu.
Hai giá trị đều không còn bão hòa màu.
Đen/trắng tương ứng L=0%/100%.
S=0% là giá trị hợp lệ.
Lời giải
Cả hai đều có S=0%, nên không còn sắc màu theo H. L cùng bằng 50% nên chúng cho cùng sắc xám.
Bài luyện
Màu hsl(120, 100%, 0%) là gì?
L=50% mới cho lime trong bảng.
Trắng ứng với L=100%.
Xám trung bình không có L=0%.
Đúng. L=0% cho đen.
Lời giải
L là độ sáng; mức 0% cho đen dù H đang là 120 và S bằng 100%. Ở L=100% kết quả là trắng.
Bài luyện
Nhận xét nào đúng về hsl(0, 100%, 25%)?
H=0 là vị trí đỏ.
Đúng. Mức sáng 25% vẫn hợp lệ.
L có thể nhận nhiều mức từ 0% đến 100%.
H vẫn bằng 0, không chuyển sang 240.
Lời giải
H=0 giữ sắc đỏ và S=100% giữ bão hòa đầy đủ. Giảm L từ 50% xuống 25% làm màu đỏ tối hơn; cách viết vẫn hợp lệ.
Đang học