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