Om 'n kleur in HSL te kies is gemaklik, maar stylesheets, ontwerpoordragte en merkdokumente loop steeds op HEX. Hierdie omskakelaar oorbrug daardie gaping en gee jou die ses-syfer kode vir enige tint-, versadiging- en ligtheidskombinasie.
Hoe HSL na HEX omskakeling werk
- Maak versadiging en ligtheid fraksies: 60% word 0.6.
- Bereken die chroma C = (1 − |2L − 1|) × S — dit is hoe ver die kleur van grys af sit.
- Gebruik die tint om daardie chroma op die rooi, groen en blou kanale te plaas, en skuif dan al drie met L − C/2.
- Vermenigvuldig elke kanaal met 255, rond af, en skryf dit as twee hexadesimale syfers.
Werkende voorbeeld
Afronding gebeur net een keer, in die laaste stap, wanneer elke kanaal na 'n hele 0–255 waarde gesnap word. Die resultaat is die naaste HEX-kode tot jou HSL-inset en gewoonlik identies met wat 'n ontwerp-tool sal wys.
HSL en HEX verduidelik
Wat is HSL?
HSL verdeel ’n kleur in hue (0–360° op die kleurwiel), versadiging (hoe kleurvol, 0–100%) en ligtheid (hoe helder, 0–100%). Omdat elk van hierdie dele ooreenstem met hoe mense kleur beskryf, is HSL die maklikste formaat om tint-, skadu- en konsekwente palette te bou — met die hand of in kode.
- Sintaks:
- hsl(H, S%, L%)
- Reeks:
- 0–360°, 0–100%, 0–100%
- Beste vir:
- palette, tint- en skaduwerk, theming
Wat is HEX?
’n HEX-kode is ’n ses-syfer heksadesimale getal wat die rooi-, groen- en bloukanaal van ’n kleur agter ’n leidende # stoor. Elke paar syfers dek een kanaal, van 00 (geen) tot FF (vol), wat dieselfde 16,7 miljoen kleure gee as RGB maar in ’n baie korter notasie. HEX is die verstek in CSS, ontwerptoepassings en handelsriglyne.
- Sintaks:
- #RRGGBB
- Reeks:
- 00–FF per kanaal
- Beste vir:
- CSS, ontwerp-oordrag, handelsriglyne
HSL na HEX verwysingstabel
Die mees algemene CSS-kleure, omgeskakel van HSL na HEX.
| Kleur | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |