Membawa palet cetak ke web lebih mudah dalam HSL: setelah campuran tintamu diekspresikan sebagai hue, saturation dan lightness, kamu bisa membuat hover state, tint dan shade dalam hitungan detik.
Cara konversi CMYK ke HSL bekerja
- Ubah persentase CMYK menjadi saluran sRGB antara 0 dan 255 dengan profil Coated FOGRA39.
- Bagi saluran dengan 255 dan ambil nilai maksimum dan minimum mereka.
- Rata-rata antara maksimum dan minimum adalah lightness L, sedangkan selisihnya menentukan saturation S.
- Saluran yang memiliki nilai maksimum menentukan hue H dalam derajat pada roda warna.
Contoh yang bekerja
Langkah CMYK ke RGB memakai profil standar Coated FOGRA39, jadi profil CMYK lain (misalnya dari percetakan Anda) memberi angka yang berbeda. Nilai HSL dibulatkan ke angka utuh.
CMYK dan HSL dijelaskan
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
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
Tabel referensi CMYK ke HSL
Warna CSS yang paling umum, dikonversi dari CMYK ke HSL.
| Warna | 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%) |