Bir baskı paletini web'e taşımak HSL'de daha kolaydır: mürekkep karışımın hue, saturation ve lightness olarak ifade edildiğinde, hover durumları, tonlar ve gölgeleri saniyeler içinde oluşturabilirsin.
How CMYK to HSL conversion works
- CMYK yüzdelerini 0 ile 255 arası RGB kanallarına çevir.
- Kanal değerlerini 255'e böl ve maksimum ile minimumlarını al.
- Maksimum ile minimumun ortalaması ışıklılık L'dir, aralarındaki fark doygunluğu S'i belirler.
- Maksimumu tutan kanal, renk çemberinde derece olarak hue H'yi belirler.
Çalışan örnek
CMYK'dan RGB'ye adımı zaten bir yaklaşımdır ve HSL değerleri tam sayıya yuvarlanır. Sonuç çok yakın bir eşleşme sağlar; renk yönetimli bir dönüşüm değildir.
CMYK and HSL explained
CMYK nedir?
CMYK, baskıda kullanılan dört mürekkep modelidir: camgöbeği (cyan), macenta (magenta), sarı (yellow) ve siyah (key), her biri 0 ile 100 arasında yüzde olarak ifade edilir. Mürekkep ışığı emdiği için (yaymaz), CMYK ekranlardan daha az rengi kapsar — bu yüzden parlak ekran renkleri basıldığında genellikle daha sönük görünür.
- Sözdizimi:
- cmyk(C%, M%, Y%, K%)
- Aralık:
- 0–100% her mürekkep için
- En uygun:
- baskı, ambalaj, baskıya hazır artwork
HSL nedir?
HSL, bir rengi ton (renk çemberinde 0–360°), doygunluk (ne kadar renkli, 0–100%) ve açıklık (ne kadar parlak, 0–100%) olarak ayırır. Her parça insanların rengi tanımlama biçimine uyduğu için HSL, tonlar, gölgeler ve tutarlı paletler oluşturmayı — elle veya kodla — en kolay hale getirir.
- Sözdizimi:
- hsl(H, S%, L%)
- Aralık:
- 0–360°, 0–100%, 0–100%
- En uygun:
- paletler, tonlar ve gölgeler, temalandırma
CMYK to HSL reference table
En yaygın CSS renkleri, CMYK formatından HSL formatına dönüştürülmüş.
| Renk | 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%) |