Eng Dréckpalette op d'Web ze bréngen ass an HSL einfacher: wann d'Drockmëscht als hue, saturatioun a liichtegkeet ausdréckt ass, kanns du Hover-Zoustänn, Tints an Shades an Sekonnen opbauen.
Wéi d'Konversioun vu CMYK op HSL funktionéiert
- Konvertéier d'CMYK-Prozenten an RGB-Kanäl tëscht 0 an 255.
- Deel d'Kanäl duerch 255 a nimm hir Maximum an Minimum.
- De Moyenne vum Maximum an Minimum ass d'Liichtegkeet L, hir Differenz bestëmmt d'Saturatioun S.
- De Kanal mat dem Maximum bestëmmt den Hue H a Grad um Faarfrad.
Praktescht Beispill
De CMYK-op-RGB-Schratt ass scho eng Approximatioun an HSL-Wäerter ginn op ganz Zuelen geronnt. De Resultat ass eng ganz noostehend Match, net eng faarf-verwaltete Konversioun.
CMYK an HSL erkläert
Wat ass CMYK?
CMYK ass d'Vier-Faarf-Typologie déi an der Dréckerei benotzt gëtt: cyan, magenta, giel a key (schwaarz), all als Prozent tëscht 0 a 100. D'Zeechen zéien Liicht of amplaz et auszeleeën, also deckt CMYK manner Faarwen wéi en Écran — dofir schéngen zäitweis liicht staark Écranfaarwen am Dréck gedämpft.
- Syntax:
- cmyk(C%, M%, Y%, K%)
- Beräich:
- 0–100% pro Tënt
- Beschte fir:
- Dréck, Verpackung, press-fäerdeg Artwork
Wat ass HSL?
HSL deelt eng Faarf an Hue (0–360° um Faarfrad), Saturatioun (wéi faarweg, 0–100%) an Liichtegkeet (wéi hell, 0–100%). Well all Deel esou beschriwwe gëtt wéi Leit Faarwen duerstellen, ass HSL dat einfachst Format fir Tënten, Schied an konsistent Palette ze bauen — manuell oder am Code.
- Syntax:
- hsl(H, S%, L%)
- Beräich:
- 0–360°, 0–100%, 0–100%
- Beschte fir:
- Palette, Tënten a Schied, Theming
Referenztabell vu CMYK op HSL
Déi heefegst CSS-Faarwen, konvertéiert vu CMYK op HSL.
| Faarf | 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%) |