Hệ màu HSL

Hay đúng hơn là không gian màu HSL, thang màu HSL, bảng màu HSL. Là viết tắt của Hue - Saturation - Lightness hay còn có tên khác là HSV, tương tự chỉ thay Lightness bằng Value. Hệ màu này được phát triền từ những năm 70 để dùng trong đồ họa máy tính. Gần đây tôi nhận thấy sử dụng nó giúp dễ dàng hơn trong việc “bôi màu”. Phần sau đây trình bày những cái hay của hệ màu này (không trình bày cái dở, mang tính chất nâng bi, ai ghét xin không đọc tiếp)

Giải thích xíu về HSL.

Phần này dành cho bà ngoại và các bé 6 tuổi.

Màu sắc như chúng ta nhìn thấy thường là một chùm sáng tổng hợp của nhiều tia sáng rất nhỏ khác nhau. Mỗi tia sáng có một màu nhất định. Các bạn cứ tưởng tượng như là một đống rất nhiều hòn bi nhỏ xíu sặc sỡ thiệt là đẹp.

Hue: sắc độ của màu, ở đây ý chỉ đến một hòn bi riêng lẻ.

Nghe có vẻ khó hiểu nhưng tôi xin giải thích đại loại thế này. Các bạn chắc đều đã nhìn thấy cầu vồng rồi, dải 7 màu của nó như sau: Đỏ, Cam, Vàng, Lục, Lam, Chàm, Tím. Tất nhiên là giữa nó còn có những màu chuyển tiếp nữa. Thế là bây giờ ta đặt Đỏ = 0 rồi tính khoảng cách từ Đỏ để gọi các màu khác, ví dụ tôi gọi cam là 2, vàng là 3… xong chia nhỏ tiếp hơi đỏ thêm ít cam là 0.5 chẳng hạn, vân vân… Ở đây sắc độ ý muốn nói đến bước sóng của tia sáng, vì như ta đã biết màu sắc của tia sáng chỉ phụ thuộc vào bước sóng của nó. Trong dải quang phổ thấy được tia màu đỏ có bước sóng dài nhất (năng lượng thấp nhất), còn màu tím có bước sóng ngắn nhất (năng lượng cao nhất) (xem chú thích về các phần in nghiêng¹). #Tuy nhiên trong dải quang phổ ~~khả kiến~~ thấy được từ đỏ đến tím mà ko có màu hồng (lạ chưa?).Nếu bây giờ ta bẻ cong dải quang phổ cho màu đỏ hòa với màu tím và, bravo màu hồng xuất hiên. Nói cách khác để có màu hồng chúng ta cần ít nhất 2 hòn bi. Thế nên có thể thấy màu hồng ko hề tự nhiên tí nào, nó không cơ bản. Đó cũng là lí do câu đời đéo có màu hồng, là hoàn toàn chính xác. Bên cạnh đó, vì bẻ cong cho đỏ chạm vào tím, ta thu được một cái vòng tròn . Ừ thì méo cũng được nhưng tôi bẻ thành vòng tròn cho đẹp có sao không?. Sau đó kẻ một đường nối từ hòn bi màu đỏ đến tâm vòng tròn ta được 1 đoạn thẳng (ai chả biết), từ đây vị trí những hòn bi màu khác (chính là Hue - sắc độ) được xác định bằng góc giữa đoạn nối với tâm của hòn bi đó với đường đỏ vừa rồi. Tính vậy cho dễ vì có người thích vòng to vòng nhỏ, đo khoảng cách bằng chiều dài sẽ không thống nhất.

Saturation và Lightness muốn chỉ việc kết hợp các hòn bi (tia sáng) với nhau.

Saturation: Độ bão hòa của màu, ở đây chỉ sự khác biệt giữa màu được xét với màu xám ở độ sáng tương ứng.

Màu xám nghĩa là gì? Nếu tôi có một đống các hòn bị gồm đủ các màu cầu vồng kia hợp lại, tôi sẽ có được đống bi màu trắng, còn nếu không có viên nào thì là màu đen. Nếu có càng nhiều viên bi màu xanh trong đống, tôi sẽ nói độ bão hòa của màu xanh cao và thấp. Tỉ lệ bi xanh trong đống bi chính là độ bão hòa, tính bằng %, từ 0% (không có viên nào) đến 100% (toàn bi xanh).

Lightness: Độ sáng.

OK tỉ lệ bi xanh trên tổng số bị trong đống là độ bão hòa, nhưng tổng cộng có bao nhiêu bi thì không biết, nên cần nói đến độ sáng. Càng nhiều bi thì càng sáng. Hay số tia sáng càng nhiều thì số photon đập vào võng mạc càng lớn và năng lượng càng lớn, vì vậy ta càng thấy chói lóa (nên độ sáng nhiều khi đồng nhất với độ rọi, mặc dù 2 khái niệm này được xét trong 2 lĩnh vực khác nhau). Đến một lúc quá chói chang và chúng ta chỉ toàn nhìn thấy màu trắng, tôi gọi là sáng hết tất cả phần trăm tức 100%. Còn khi số lượng bi quá nhỏ thì ta hầu như không nhìn thấy gì ngoài màu đen, tôi gọi là độ sáng 0%.

Sau khi kết hợp 3 thông số kia thì ta được một cái bảng màu biều diễn trong không gian 3 chiều như này

Sử dụng HSL

Phần này mới nói đến tác dụng nè :P

Chỉnh màu nhanh

Một hộm đang ngồi tô tô thì sếp / khách hàng / thằng ngồi cạnh / ông già vợ… đến và bảo: “Theo tao mày nên cho cái nền này tối đi một tí”. Tối đi, tối đi là thế đ’ nào? Bạn thầm nghĩ vậy. Nhất là khi nhìn vào cái mã hexa như này #12acd5, bố bảo tôi cũng chịu không tưởng tượng được cái màu này như nào luôn. Nhưng nếu phiên dịch sang HSL là (193^o, 84%, 45%) thì biết ngay, dể tối đi chỉ cần cho L giảm đi chút xíu 30% chẳng hạn. Dễ không nào?

Tương tự nếu “nó” bảo cho nhạt đi tí, thì giảm saturation đi một tẹo.

Nếu nó bảo cho đỏ thêm tí thì sao? Dễ ợt, đỏ ở góc 0^o (12 giờ), chỉnh hue cho gần 0 thêm tí là được, cheers. Ngoài ra nhớ thêm 2 màu cơ bản xanh lục ở 120 độ (góc 4 giờ), xanh lam ở 240 độ (góc 8 giờ) thế là tha hồ mà chỉnh nhé, he he.

Phối màu nhanh chóng

Thực ra tôi cũng chả biết phối màu thế nào đâu, nhưng cũng biết mấy cái tư thế cơ bản thế này:

Màu bổ sung (complementary): lấy màu đối diện trên bánh xe màu, đơn giản là cộng thêm 180 độ vào hue. Nó có ra hơn 360 độ cũng chẳng sao, phần mềm nó tự hiểu, còn bạn nào tính nhanh tự trừ bớt đi 360 độ thì càng tốt, chẳng may lúc mẹ hay cô giáo xem bài cũng không hiểu nhầm là mình làm sai, he he.

Màu đơn sắc (Monochromatic): cùng một màu và độ sáng với các mức bão hòa khác nhau, ví dụ từ màu hsl(150, 69%, 70%) ta có thể lấy màu hsl(150, 23%, 70%) và hsl(150, 46%, 70%)
Tam giác (triad): Các màu sẽ xếp thành các đỉnh của một tam giác đều trên bánh xe màu. Vậy là từ một màu cộng thêm các góc 120 độ vào hue là được, dễ hem?

Vân vân (sau này biết thêm cái gì tôi sẽ ghi thêm nghen :P )

Chú ý: Nếu viết css cho IE8 thì cố gắng dịch sang rgb vì nó đếch hiểu HSL đâu.