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 phần trăm CMYK sang các kênh sRGB từ 0 đến 255 bằng hồ sơ Coated FOGRA39.
- 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 dùng hồ sơ Coated FOGRA39 chuẩn, nên hồ sơ CMYK khác (ví dụ từ xưởng in của bạn) cho số liệu khác. Các giá trị HSL được làm tròn thành số nguyên.
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(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |