Membawa palet cetakan ke web lebih mudah dalam HSL: setelah campuran dakwat dinyatakan sebagai hue, saturation dan lightness, kamu boleh bina keadaan hover, tint dan shade dalam beberapa saat.
Bagaimana penukaran CMYK ke HSL berfungsi
- Tukarkan peratus CMYK kepada saluran RGB antara 0 dan 255.
- Bahagikan saluran dengan 255 dan ambil nilai maksimum dan minimum mereka.
- Purata maksimum dan minimum itu adalah lightness L, julat mereka menentukan saturation S.
- Saluran yang memegang nilai maksimum menentukan hue H dalam darjah pada roda warna.
Contoh terperinci
Langkah CMYK ke RGB sudah merupakan anggaran dan nilai HSL dibundarkan kepada nombor bulat. Keputusan adalah padanan yang sangat hampir, bukan penukaran terurus warna.
CMYK dan HSL diterangkan
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
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
Jadual rujukan CMYK ke HSL
Warna CSS paling biasa, ditukar 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%) |