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
- Konversikan persentase CMYK ke saluran RGB antara 0 dan 255.
- 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 sudah merupakan perkiraan dan nilai HSL dibulatkan ke angka utuh. Hasilnya sangat mendekati, bukan konversi yang dikelola warna secara penuh.
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(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |