Mang palette in lên web dễ hơn với HSL: khi hỗn hợp mực được biểu diễn thành hue, saturation và lightness, bạn có thể làm trạng thái hover, tint và shade chỉ trong vài giây.
Cách chuyển CMYK sang HSL hoạt động
- Chuyển các phần trăm CMYK sang kênh RGB giữa 0 và 255.
- Chia các kênh cho 255 và lấy giá trị lớn nhất và nhỏ nhất.
- Trung bình của giá trị lớn nhất và nhỏ nhất là lightness L, độ chênh là yếu tố quyết định saturation S.
- Kênh giữ giá trị lớn nhất xác định hue H theo độ trên bánh xe màu.
Ví dụ minh hoạ
Bước CMYK sang RGB đã là xấp xỉ và giá trị HSL được làm tròn về số nguyên. Kết quả là rất gần, không phải chuyển đổi quản lý màu hoàn chỉnh.
CMYK và HSL giải thích
CMYK là gì?
CMYK là mô hình bốn mực dùng trong in: cyan, magenta, yellow và key (đen), mỗi màu dưới dạng phần trăm từ 0 đến 100. Mực hút bớt ánh sáng thay vì phát sáng, nên CMYK bao phủ ít màu hơn màn hình — đó là lý do các màu rực trên màn hình thường trông nhạt hơn khi in.
- Cú pháp:
- cmyk(C%, M%, Y%, K%)
- Phạm vi:
- 0–100% mỗi mực
- Phù hợp cho:
- in ấn, bao bì, artwork sẵn sàng cho máy in
HSL là gì?
HSL tách màu thành hue (0–360° trên vòng màu), saturation (mức độ màu, 0–100%) và lightness (độ sáng, 0–100%). Vì từng phần khớp với cách người ta mô tả màu, HSL là định dạng dễ nhất để tạo tints, shades và palette nhất quán — bằng tay hoặc trong code.
- Cú pháp:
- hsl(H, S%, L%)
- Phạm vi:
- 0–360°, 0–100%, 0–100%
- Phù hợp cho:
- palette, tints và shades, theming
Bảng tham chiếu CMYK sang HSL
Các màu CSS phổ biến nhất, đã chuyển từ CMYK sang HSL.
| Màu | CMYK | HSL |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |