Að færa prentlitasnið á vefinn er auðveldara í HSL: þegar blekblandan er komin í tóna, mettun og ljósleiðni getur þú byggt hover-ástand, litblöndur og skyggingar á sekúndum.
Hvernig CMYK í HSL umbreyting virkar
- Breyttu CMYK-prósentunum í RGB-rásir á bilinu 0 til 255.
- Deildu rásunum með 255 og taktu max og min þeirra.
- Meðaltal max og min er ljósleiðnin L, og dreifingin ræður mettun S.
- Rásin sem heldur max gildi ákvarðar tóna H í gráðum á litahjólinu.
Dæmi sem virkaði
CMYK til RGB skrefið er þegar nálgun og HSL-gildin eru færð í heilar tölur. Niðurstaðan er mjög nærri, ekki litastjórnuð umbreyting.
CMYK og HSL útskýrt
Hvað er CMYK?
CMYK er fjór-bleks módelið sem notað er í prentun: cyan, magenta, gult og key (svart), hver sem prósenta frá 0 til 100. Blekið dregur frá ljósi í stað þess að gefa frá sér, svo CMYK nær yfir færri liti en skjár — þess vegna virðast skærir skjálitir oft daufari þegar þeir eru prentaðir.
- Syntaks:
- cmyk(C%, M%, Y%, K%)
- Gildi:
- 0–100% per ink
- Best fyrir:
- prentun, umbúðir, pressu-verk
Hvað er HSL?
HSL skiptir lit í litstefnu (0–360° á litahring), mettun (hversu litríkur, 0–100%) og ljósleika (hversu bjartur, 0–100%). Þar sem hver hluti passar við hvernig fólk lýsir lit, er HSL auðveldasta formið til að byggja litasamstæður, ljósari- eða dekkri útgáfur og samræmdar pallettur — handvirkt eða í kóða.
- Syntaks:
- hsl(H, S%, L%)
- Gildi:
- 0–360°, 0–100%, 0–100%
- Best fyrir:
- pallettur, ljósari og dekkri tónar, þemu
CMYK í HSL yfirlitstafla
Algengustu CSS-litirnir, umbreyttir frá CMYK í HSL.
| Litur | 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%) |