Aducerea unei palete tipărite pe web e mai simplă în HSL: odată ce amestecul de cerneală e exprimat ca nuanță, saturație și luminozitate, poți construi state de hover, nuanțe și umbre în câteva secunde.
Cum funcționează conversia din CMYK în HSL
- Convertește procentele CMYK în canale RGB între 0 și 255.
- Împarte canalele la 255 și ia maximul și minimul lor.
- Media dintre maxim și minim este luminozitatea L, iar diferența lor determină saturația S.
- Canalul care conține maximul determină nuanța H în grade pe roata culorilor.
Exemplu de aplicare
Pasul CMYK → RGB este deja o aproximație, iar valorile HSL sunt rotunjite la numere întregi. Rezultatul e o potrivire foarte apropiată, nu o conversie gestionată de profil de culoare.
CMYK și HSL, explicate
Ce este CMYK?
CMYK este modelul cu patru cerneluri folosit la tipar: cyan, magenta, galben și key (negru), fiecare exprimat ca procentaj între 0 și 100. Cernelurile scad lumina în loc să o emită, astfel CMYK acoperă mai puține culori decât un ecran — motiv pentru care culorile vii de pe ecran pot părea mai fade după tipărire.
- Sintaxă:
- cmyk(C%, M%, Y%, K%)
- Interval:
- 0–100% per cerneală
- Ideal pentru:
- print, ambalaje, materiale pregătite pentru tipar
Ce este HSL?
HSL împarte o culoare în nuanță (0–360° pe roata culorilor), saturație (cât de colorată, 0–100%) și luminozitate (cât de deschisă, 0–100%). Deoarece fiecare parte se potrivește modului în care oamenii descriu culoarea, HSL e cel mai simplu format pentru a crea nuanțe, umbre și palete consistente — manual sau în cod.
- Sintaxă:
- hsl(H, S%, L%)
- Interval:
- 0–360°, 0–100%, 0–100%
- Ideal pentru:
- palete, nuanțe și umbre, tematizare
CMYK în HSL tabel de referință
Cele mai comune culori CSS, convertite din CMYK în HSL.
| Culoare | 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%) |