Palet yang direka dalam HSL sering berakhir di atas kertas. Penukar ini mengambil hue, saturation dan lightness yang kamu pilih dan memulangkan peratusan empat dakwat yang digunakan kedai cetak.
Bagaimana penukaran HSL ke CMYK berfungsi
- Tukarkan triple HSL kepada saluran RGB antara 0 dan 255.
- Normalisasikan saluran itu dengan membahagi dengan 255.
- Kira komponen key K = 1 − max(R, G, B).
- Terbitkan C, M dan Y daripada saluran baki dan tukarkan keempat-empatnya kepada peratus.
Contoh terperinci
Dua penukaran berlaku berturut-turut, jadi pembundaran berlaku dua kali — dan CMYK kekal anggaran tanpa profil warna. Jangka hasil cetakan sedikit kurang hidup daripada pratonton HSL.
HSL dan CMYK diterangkan
Apakah HSL?
HSL memecah warna kepada hue (0–360° pada roda warna), saturation (betapa berwarnanya, 0–100%) dan lightness (betapa cerahnya, 0–100%). Kerana setiap bahagian sepadan dengan cara orang menggambarkan warna, HSL adalah format paling mudah untuk membina tona, nuansa dan palet yang konsisten — secara manual atau dalam kod.
- Sintaks:
- hsl(H, S%, L%)
- Julat:
- 0–360°, 0–100%, 0–100%
- Terbaik untuk:
- palet, tona dan nuansa, theming
Apakah CMYK?
CMYK ialah model empat dakwat yang digunakan dalam percetakan: cyan, magenta, kuning dan key (hitam), setiap satu sebagai peratusan dari 0 hingga 100. Dakwat menolak cahaya bukannya memancarkan, jadi CMYK merangkumi lebih sedikit warna berbanding skrin — sebabnya warna terang di skrin sering kelihatan lebih pudar bila dicetak.
- Sintaks:
- cmyk(C%, M%, Y%, K%)
- Julat:
- 0–100% per dakwat
- Terbaik untuk:
- cetak, pembungkusan, karya sedia-cetak
Jadual rujukan HSL ke CMYK
Warna CSS paling biasa, ditukar dari HSL ke CMYK.
| Warna | 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%) |