ImageColorPicker.com

HSL na HEX omskakelaar

Skakel enige HSL-kleur na HEX om — onmiddellik en gratis

#3398DB

Plak enige kleurwaarde — ons herken die formaat vir jou.

H
S
L
HEX resultaat

Hierdie kleur in elke formaat

CMYK-profiel: Coated FOGRA39 (Photoshop se standaard vir Europa)

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

  1. Maak versadiging en ligtheid fraksies: 60% word 0.6.
  2. Bereken die chroma C = (1 − |2L − 1|) × S — dit is hoe ver die kleur van grys af sit.
  3. Gebruik die tint om daardie chroma op die rooi, groen en blou kanale te plaas, en skuif dan al drie met L − C/2.
  4. Vermenigvuldig elke kanaal met 255, rond af, en skryf dit as twee hexadesimale syfers.

Werkende voorbeeld

HSL hsl(204, 70%, 53%)=HEX #3398DB

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.

KleurHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

Meer kleuromskakelaars

Gereelde vrae

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.

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.

’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.

Ja. Die ruilknoppie langs die invoer neem jou na die HEX na HSL omsetter, wat presies op dieselfde manier werk. Albei rigtings gebruik dieselfde formule, net omgekeerd toegepas.

Bou die palet in HSL en voer dan HEX uit. Die palet behou sy logika — dieselfde tint, getrapte ligtheid — terwyl die gelewerde kode in die formaat bly wat ontwikkelaars verwag.