HSL sang HEX

So sánh HSL với HEX

CSS 3 giới thiệu một cách khác để xác định màu bằng HSL (từ tiếng Anh. Hue, Saturation, Lightness). là một mô hình trong đó màu sắc được xác định bởi ba thông số: màu sắc, độ bão hòa và độ sáng. Chúng ta hãy xem xét từng tham số riêng biệt. Ưu điểm chính của HSL là khả năng chỉ định các đặc tính màu sắc độc lập với nhau. Điều này mở ra cơ hội vô cùng lớn cho bạn. Bạn có thể dễ dàng làm cho màu sáng hơn, tối hơn, bão hòa hơn hoặc khử bão hòa. Và trong khi duy trì bóng râm của nó. Hoặc ngược lại - thay đổi màu sắc mà không thay đổi độ bão hòa hoặc độ sáng của chúng. Thông thường, các bộ tiền xử lý được sử dụng để sử dụng các tính năng như vậy, nhưng có thể nếu không có chúng. Hàm hsl () được sử dụng để chỉ định màu HSL. Hàm nhận ba giá trị, được phân tách bằng dấu phẩy: Hue, Saturation và Lightness. Bằng cách thay đổi các giá trị của độ bão hòa và độ sáng, bạn có thể nhận được các màu liền kề cho một màu cụ thể.

Trong hầu hết các trường hợp, có thể nhận ra một màu bằng mã hex, chỉ tính đến các chữ số đầu tiên của các cặp. Trong ví dụ dưới đây, rõ ràng là màu sắc được pha trộn với rất nhiều màu đỏ, một ít màu xanh lam và không có màu xanh lá cây nào cả. Hiểu màu theo mã hex cho phép một nhà thiết kế web điều hướng mã trang nhanh hơn và bên cạnh đó, bạn luôn có thể gây ấn tượng với đồng nghiệp hoặc khách hàng bằng cách nói À, màu đỏ tía tuyệt vời làm sao. Bạn cũng có thể dễ dàng thay đổi độ sáng, màu sắc hoặc độ bão hòa của màu bằng cách chỉ chỉnh sửa mã thập lục phân của nó. Trong ví dụ đầu tiên bên dưới, một trong các cặp được thay đổi trong các bước 10%, trong khi độ sáng màu tăng lên. Trong ví dụ thứ hai, độ sáng tăng lên, nhưng độ bão hòa giảm. Giá trị RGB cũng có thể được chỉ định bằng cách sử dụng các giá trị màu thập lục phân (HEX) ở dạng: #RRGGBB, trong đó RR (đỏ), GG (xanh lục) và BB (xanh lam) là các giá trị thập lục phân từ 00 đến FF (giống như thập phân 0- 255). Hệ thập lục phân, trái ngược với hệ thập phân, dựa trên số 16, như tên gọi của nó.