Palet yang dirancang di HSL sering berakhir di kertas. Konverter ini mengambil hue, saturation dan lightness yang kamu pilih dan mengembalikan empat persentase tinta yang dipakai percetakan.
Cara konversi HSL ke CMYK bekerja
- Konversikan triple HSL ke saluran RGB antara 0 dan 255.
- Normalisasi saluran tersebut dengan membagi dengan 255.
- Hitung komponen key K = 1 − max(R, G, B).
- Turunkan C, M dan Y dari saluran yang tersisa dan ubah keempatnya menjadi persentase.
Contoh yang bekerja
Terjadi dua konversi berturut-turut, jadi pembulatan terjadi dua kali — dan CMYK tetap perkiraan tanpa profil warna. Harapkan hasil cetak sedikit kurang hidup dibanding preview HSL.
HSL dan CMYK dijelaskan
Apa itu HSL?
HSL membagi warna menjadi hue (0–360° pada roda warna), saturation (seberapa berwarna, 0–100%) dan lightness (seberapa terang, 0–100%). Karena tiap bagian cocok dengan cara orang menggambarkan warna, HSL adalah format termudah untuk membuat tint, shade, dan palet konsisten — secara manual atau dalam kode.
- Sintaks:
- hsl(H, S%, L%)
- Rentang:
- 0–360°, 0–100%, 0–100%
- Terbaik untuk:
- palet, tint dan shade, theming
Apa itu CMYK?
CMYK adalah model empat tinta yang dipakai di percetakan: cyan, magenta, yellow, dan key (hitam), masing‑masing sebagai persentase dari 0 sampai 100. Tinta mengurangi cahaya alih‑alih memancarkan, jadi CMYK mencakup lebih sedikit warna dibanding layar — itulah sebabnya warna cerah di layar sering terlihat lebih kusam setelah dicetak.
- Sintaks:
- cmyk(C%, M%, Y%, K%)
- Rentang:
- 0–100% per tinta
- Terbaik untuk:
- cetak, kemasan, artwork siap cetak
Tabel referensi HSL ke CMYK
Warna CSS yang paling umum, dikonversi 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%) |