พาเลตที่ออกแบบใน HSL มักจะไปลงบนกระดาษ ตัวแปลงนี้จะรับค่า hue, saturation และ lightness ที่คุณเลือกแล้วคืนค่าเปอร์เซ็นต์หมึกทั้งสี่ที่ร้านพิมพ์ใช้
วิธีการแปลงจาก HSL เป็น CMYK
- แปลง HSL triple เป็นช่อง RGB ระหว่าง 0 ถึง 255
- ทำให้ช่องเหล่านั้นเป็นค่าปกติโดยหารด้วย 255
- คำนวณค่า key K = 1 − max(R, G, B)
- หา C, M และ Y จากช่องที่เหลือแล้วแปลงทั้งสี่ค่าเป็นเปอร์เซ็นต์
ตัวอย่างที่ทำงานได้
มีการแปลงสองครั้งติดต่อกันจึงมีการปัดสองครั้ง — และ CMYK ยังคงเป็นการประมาณหากไม่มีโปรไฟล์สี คาดว่าผลลัพธ์พิมพ์จะสดน้อยกว่าในพรีวิว HSL เล็กน้อย
HSL และ CMYK อธิบาย
HSL คืออะไร?
HSL แยกสีเป็น hue (0–360° บนวงล้อสี), saturation (ความสดของสี, 0–100%) และ lightness (ความสว่าง, 0–100%) เพราะแต่ละส่วนตรงกับวิธีที่คนอธิบายสี HSL จึงเป็นฟอร์แมตที่ง่ายที่สุดสำหรับสร้างไทนท์ เงา และพาเลตต์ที่สม่ำเสมอ — ทั้งแบบทำมือหรือในโค้ด
- ไวยากรณ์:
- hsl(H, S%, L%)
- ช่วงค่า:
- 0–360°, 0–100%, 0–100%
- เหมาะสำหรับ:
- พาเลตต์ ไทนท์และเงา ธีม
CMYK คืออะไร?
CMYK คือโมเดลสี่หมึกที่ใช้ในการพิมพ์: cyan, magenta, yellow และ key (ดำ) แต่ละสีเป็นเปอร์เซ็นต์ตั้งแต่ 0 ถึง 100 หมึกจะดึงแสงออกแทนการปล่อยแสง ดังนั้น CMYK ครอบคลุมสีได้น้อยกว่าหน้าจอ — นั่นคือเหตุผลที่สีสดบนหน้าจอมักจะดูหม่นเมื่อพิมพ์ออกมา
- ไวยากรณ์:
- cmyk(C%, M%, Y%, K%)
- ช่วงค่า:
- 0–100% ต่อหมึก
- เหมาะสำหรับ:
- งานพิมพ์ บรรจุภัณฑ์ ไฟล์สำหรับงานพิมพ์
ตารางอ้างอิงจาก HSL เป็น CMYK
สี CSS ที่ใช้บ่อยที่สุด แปลงจาก HSL เป็น CMYK
| สี | HSL | CMYK |
|---|---|---|
| black | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(100%, 1%, 0%, 50%) |
| purple | hsl(300, 100%, 25%) | cmyk(0%, 100%, 1%, 50%) |
| gray | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |