[CSS 08] HSLA

 HIỂU về MÀU

Mọi màu trên màn hình máy tính được tạo ra bằng cách trộn nhiều màu đỏ, xanh lục và xanh lam. Để tìm màu bạn muốn, bạn có thể sử dụng công cụ chọn màu.

  Màn hình máy tính được tạo thành từ hàng nghìn ô vuông nhỏ gọi là pixel (nếu bạn nhìn kỹ vào màn hình, bạn sẽ có thể nhìn thấy chúng).

Khi không bật màn hình, nó có màu đen vì nó không phát ra ánh sáng. Khi bật, mỗi pixel có thể là một màu khác nhau, tạo ra một bức tranh.

Màu sắc của mỗi pixel trên màn hình được thể hiện dưới dạng sự pha trộn giữa đỏ, lục và lam - giống như trên màn hình tivi.

HSL là chữ cái đầu viết tắt của

Hue, Saturation và Lightness, ký hiệu của nó là hsl(hue, saturation, lightness).

Trong đó:

Hue là độ của màu trong vòng tròn màu có giá trị từ 0 đến 360,0 là màu đỏ.
120 là màu xanh lá cây.
240 là màu xanh da trời.
Saturation có giá trị phần trăm (%) cường độ màu, cao nhất là 100% (full)
Lightness cũng có giá trị phần trăm, là độ sáng của màu theo phần trăm, 0% là tối và 100% là sáng trắng.

Các công cụ chọn màu có sẵn trong các chương trình chỉnh sửa hình ảnh như Photoshop và GIMP. Bạn có thể thấy các giá trị RGB được chỉ định bên cạnh các nút radio cho biết R, G, B.

Giá trị hex được cung cấp ở bảng bên cạnh. Biểu tượng #. Ngoài ra còn có một công cụ chọn màu tốt tại: colorchemedesigner.com

Màu HSLA

HSLA Color là phần mở rộng của giá trị màu HSL với thành phần bổ sung là chỉ số opacity quy định độ mờ/độ trong suốt của màu sắc.

Cú pháp của loại màu này là hsla(hue, saturation, lightness, alpha), trong đó alpha là chỉ số opacity có giá trị từ 0.0 - 1.0, giá trị càng nhỏ thì độ trong suốt càng nhiều.

Code demo 

Một ví dụ khác về HSLA nhé 

Thuộc tính Opacity

Opacity xác định độ mờ, độ trong suốt của một phần tử.

Thuộc tính này có thể lấy giá trị từ 0.0 - 1.0, giá trị càng nhỏ thì độ trong suốt càng nhiều.

Tuy nhiên nhược điểm khi sử dụng opacity để thêm độ mờ cho background của một phần tử là tất cả phần tử con bên trong đều sẽ kế thừa độ mờ opacity đó như nhau (bao gồm cả đoạn văn bản). Điều này làm cho văn bản bên trong phần tử có độ mờ cao sẽ khó đọc. Nên chúng ta cần lưu ý khi sử dụng ;)