dàn âm thanh hội trường, âm thanh lớp học, âm thanh phòng họp, loa trợ giảng

Hệ màu HSL là gì?

Hệ màu HSL hay 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. Nếu thay thay Lightness bằng Value ta được hệ màu HSV.

SGK, sách ôn thi, sách tham khảo giá rẻ

Hệ màu HSL được phát triển từ những năm 70 để dùng trong đồ họa máy tính. HSL được thiết kế hướng khá nhiều cho khả năng đọc của con người, và nó trở nên phổ biến, đặc biệt với vai trò là một giải pháp thay thế RGB.

Hệ màu HSL là gì?

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.

Hệ màu HSL hay 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. Nếu thay thay Lightness bằng Value ta được hệ màu HSV.

HSL và HSV đều là hình trụ, với màu sắc, kích thước góc của chúng, bắt đầu từ màu đỏ ở góc 0° (12h), chuyển dần qua màu xanh lá cây ở góc 120° và màu lam ở góc 240°, và sau đó lại trở về màu đỏ ở 360°.

Hue có nghĩa là màu sắc, và nó sử dụng các cấp độ của color wheel để cho bạn biết màu gì bạn đang mặc. Nếu biết color wheel và vị trí của các màu chính này, bạn sẽ có thể nói rằng 45 là màu cam và 270 là màu tím chỉ trong 1 giây.

SGK, sách ôn thi, sách tham khảo giá rẻ
  • 0 = đỏ
  • 60 = vàng
  • 120 = xanh
  • 180 = lục lam
  • 240 = xanh dương
  • 300 = đỏ tươi

Saturation (Độ bão hòa) về cơ bản là màu sắc trông như thế nào. Ở đâ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. Độ bão hòa 0% có nghĩa là màu sẽ chỉ là một màu xám, trong khi 100% có nghĩa là nó sẽ hiển thị đầy đủ. Nếu muốn “ẩn” màu hoặc làm cho nó nổi hơn một chút, bạn có thể thay đổi giá trị này.

Lightness (Độ sáng) cho bạn biết màu tối hay sáng ra sao. Độ sáng 0% có nghĩa là màu sẽ là màu đen, bất kể cài đặt Hue hay Saturation bao nhiêu và độ sáng 100% sẽ giúp bạn có màu trắng. Độ sáng 50% cho bạn màu chính xác nhất.

Với thông tin đó, bạn có thể biết ngay hsl(0, 100%, 50%) nghĩa là gì. Nó là màu đỏ! Nếu muốn một màu đỏ đậm hơn, phong phú hơn, hãy thử (0, 70%, 40%). Với màu xanh, chỉ cần thay đổi 0 thành 240 là được! HSL cũng có độ trong suốt, hoạt động giống như RGB. Chỉ cần thêm giá trị thứ tư (từ 0 đến 1), ví dụ hsla(240, 70%, 40%, .5).

Cách sử dụng bảng màu HSL

Giúp chỉnh màu nhanh

Nếu sử dụng mã màu hexa, như này chẳng hạn #12acd5, thì rất khó để chỉnh màu sắc, chẳng hạn cho màu tối hơn một chút.

SGK, sách ôn thi, sách tham khảo giá rẻ

Nhưng nếu chuyển sang mã màu HSL là (193o, 84%, 45%) thì để tối đi chỉ cần cho L giảm đi, từ 45% xuống 35% chẳng hạn. Tương tự nếu cần cho nhạt đi tí, thì giảm S đi một chút là được.

Hệ màu HSL là gì? 1

Nếu yêu cầu cho màu đỏ thêm tí thì sao? Dễ ợt, màu đỏ ở góc 0o (12 giờ), chỉnh H cho gần 0 thêm tí là được. Ngoài ra, bạn cũng cần 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é.

Phối màu nhanh chóng

Hệ màu HSL là gì? 2
  • 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.
  • 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.
Hệ màu HSL là gì? 3

Nên sử dụng Hex, RGB hay HSL?

Nói chung, chọn một không gian màu là một quyết định khá nhỏ trong thiết kế, nhưng góp phần quan trọng đến kết quả cuối cùng.

Mã Hex làm cho việc sao chép dễ dàng và rất tuyệt vời trong các tình huống mà con người không thể tham gia quá nhiều. RGB/RGBA phù hợp với khả năng đọc và được sử dụng tốt nhất khi con người có thể điều chỉnh độ trong suốt. Nếu cần thay đổi màu thủ công, hãy đi với HSL/HSLA.

SGK, sách ôn thi, sách tham khảo giá rẻ


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *