Chuyển RGB sang HSL

RGB tạo màu từ ba kênh ánh sáng, phù hợp với màn hình nhưng khó điều chỉnh bằng tay: muốn làm rgb(255, 61, 114) tối đi một chút thì phải đổi cả ba con số. HSL mô tả cùng màu đó bằng sắc màu, tức góc trên bánh xe màu từ 0 đến 360°, cùng độ bão hòa và độ sáng theo phần trăm, nên màu hồng đó trở thành hsl(344, 100%, 62%).

Cấu trúc này khiến HSL lý tưởng để tạo các sắc độ và giao diện. Giữ nguyên sắc màu và độ bão hòa, giảm độ sáng để có trạng thái hover hoặc nhấn, tăng lên để có nền nhạt, hoặc giảm độ bão hòa để có phiên bản dịu hơn. Mọi trình duyệt hiện đại đều chấp nhận hsl() trong CSS, nên bạn có thể dán kết quả trực tiếp. Công cụ làm tròn giá trị thành số nguyên, nên khi chuyển ngược lại một kênh có thể lệch một bậc.