Tìm hiểu cách dùng màu HSL và HSLa trong CSS và điều gì làm chúng khác RGB/RGBa và Hex.
HSL và HSLa là phương pháp màu trong CSS bạn có thể dùng như thay thế cho Hex hoặc RGB/RGBa để áp dụng màu thực tế hơn cho trang web.
HSL và HSLa khá mới trong thế giới CSS, nhưng trong thế giới màu chung, chúng có từ những năm 1970.
HSL vs. HSLa:
- HSL là viết tắt của Hue Saturation Lightness (Sắc độ, Độ bão hòa, Độ sáng)
- HSLa là viết tắt của Hue Saturation Lightness Alpha
HSLa là mở rộng của HSL, với kênh Alpha bạn dùng để chỉ định giá trị trong suốt (hoặc độ mờ). HSL và HSLa khác nhau giống như RGB và RGBa khác nhau.
Cách dùng HSL/HSLa
Để dùng HSL và HSLa, CSS cung cấp hai hàm màu hsl() và hsla().
Cách dùng HSL cơ bản:
div { background-color:hsl(0, 100%, 50%); /* Đỏ */ }Cách dùng HSLa cơ bản:
div { background-color:hsla(0, 100%, 50%, 0.6); }HSL có tốt hơn Hex và RGB?
Bạn có thể thắc mắc HSL có tốt hơn RGB và Hex không. Chắc chắn có lý do HSL được thêm vào ngôn ngữ CSS, phải không?
Khó nói HSL tốt hơn Hex và RGB (mặc dù một số người sẽ lập luận điểm đó). Tùy thuộc vào bạn muốn làm gì.
Ý tưởng đằng sau HSL là cung cấp định dạng màu trực quan mô phỏng thế giới thực. HSL cho phép bạn điều chỉnh ánh sáng và tối trên màu để thay đổi biểu diễn của màu mà không thay đổi chính màu đó.
Hex và RGB không thể làm điều đó.
Ví dụ, nếu bạn nhìn màu sắc trong phòng bạn ngay bây giờ, cách bạn nhận thấy những màu chính xác là kết quả của ánh sáng đến từ:
- Cửa sổ
- Đèn
- Nến
- Kết hợp các nguồn sáng
Giả sử bạn chỉ có ánh sáng tự nhiên từ cửa sổ.
Bây giờ hãy kéo rèm xuống. Điều này sẽ bớt độ sáng khỏi phòng và thay đổi nhận thức về mọi màu trong phòng.
Màu của mọi vật trong phòng giờ trông như phiên bản tối hơn của những màu đó so với trước khi kéo rèm.
Tuy nhiên, và đây là điểm chính:
Giảm độ sáng không thay đổi màu thực của vật trong phòng, nó thay đổi nhận thức từ phiên bản sáng sang tối hơn của những màu đó.
Bây giờ nếu bạn chụp ảnh phòng trước và sau kéo rèm, sau đó lấy giá trị màu before/after ở định dạng RGB, những màu before/after sẽ là hai màu khác nhau. Tương tự cho màu Hex.
HSL, tuy nhiên, sẽ không cho bạn hai màu khác nhau, mà cùng màu với giá trị Lightness khác nhau (L trong HSL).
Vậy giả sử bạn có bàn gỗ óc chó màu nâu. Bây giờ chụp ảnh với rèm mở, và chụp với rèm đóng.
Giá trị Hex và RGB của before/after sẽ là hai giá trị màu khác nhau, tương ứng.
Giá trị HSL của before/after sẽ là cùng màu, nhưng với giá trị Lightness khác nhau.
Một số sẽ lập luận:
- Hex và RGB dễ đọc bởi máy
- HSL dễ đọc bởi người
Mặc dù trên có thể đúng cho hầu hết ai đã hiểu và có kinh nghiệm với cả ba phương pháp, trải nghiệm của bạn có thể khác.
Tôi luôn nói người làm tốt nhất điều họ làm nhiều nhất. Vì vậy, nếu bạn có năm kinh nghiệm dùng Hex hoặc RGB và không kinh nghiệm với HSL, bạn có thể thấy HSL khó đọc lúc đầu.
Tóm tắt điều làm HSL khác biệt:
- HSL cho phép thay đổi độ sáng/tối của màu mà không thay đổi màu chúng.
- RGB và Hex không thể thay đổi độ sáng/tối mà không cũng thay đổi màu.