ImageColorPicker.com

HSL í HEX breytir

Breyttu hvaða HSL-lita sem er í HEX — samstundis og ókeypis

#3398DB

Límdu inn hvaða litagildi sem er — við greinum sniðið fyrir þig.

H
S
L
HEX niðurstaða

Þessi litur í öllum sniðum

CMYK-prófíll: Coated FOGRA39 (sjálfgefin stilling Photoshop fyrir Evrópu)

Það er þægilegt að velja lit í HSL, en stíllblöð, afhendingar til hönnunar og vörumerkjaskjöl nota enn HEX. Þessi breytir lokar bilið og gefur þér sex stafa kóðann fyrir hvaða samsetningu af litblæ, mettun og ljósleika sem er.

Hvernig HSL í HEX umbreyting virkar

  1. Breyttu mettun og ljósleika í tugabrot: 60% verður 0.6.
  2. Reiknaðu kromu C = (1 − |2L − 1|) × S — það segir hversu langt liturinn er frá gráum.
  3. Notaðu litblæðið til að staðsetja þá kromu á rauðu, grænu og bláu rásirnar, og færa síðan allar þrjár um L − C/2.
  4. Fjölgaðu hverja rás með 255, nákvæmduðuðu og skrifaðu sem tvær hexadecimal tölustafir.

Dæmi sem virkaði

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

Nákvæmni tapast aðeins við eina umgerð, seinasta skrefið, þegar hver rás er fest við heila 0–255 tölu. Niðurstaðan er næst besta HEX-kóði miðað við HSL-inntakið og er venjulega eins og það sem hönnunarforrit sýnir.

HSL og HEX útskýrt

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

Hvað er HEX?

HEX kóði er sex stafa hexadecimal tala sem geymir rauða, græna og bláa rás litar á undan með #. Sérhvert tvíund getur táknað eina rás, frá 00 (ekkert) til FF (fullt), sem gefur sama 16,7 milljón liti og RGB í mun styttri táknun. HEX er sjálfgefið í CSS, hönnunarverkfærum og leiðbeiningum vörumerkis.

Syntaks:
#RRGGBB
Gildi:
00–FF per channel
Best fyrir:
CSS, afhending hönnunar, leiðbeiningar vörumerkis

HSL í HEX yfirlitstafla

Algengustu CSS-litirnir, umbreyttir frá HSL í HEX.

LiturHSLHEX
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

Fleiri litaumbreytar

Algengar spurningar

Breyttu mettun og ljósleika í tugabrot: 60% verður 0.6. Reiknaðu kromu C = (1 − |2L − 1|) × S — það segir hversu langt liturinn er frá gráum. Notaðu litblæðið til að staðsetja þá kromu á rauðu, grænu og bláu rásirnar, og færa síðan allar þrjár um L − C/2. Fjölgaðu hverja rás með 255, nákvæmduðuðu og skrifaðu sem tvær hexadecimal tölustafir.

Nákvæmni tapast aðeins við eina umgerð, seinasta skrefið, þegar hver rás er fest við heila 0–255 tölu. Niðurstaðan er næst besta HEX-kóði miðað við HSL-inntakið og er venjulega eins og það sem hönnunarforrit sýnir.

HEX kóði er sex stafa hexadecimal tala sem geymir rauða, græna og bláa rás litar á undan með #. Sérhvert tvíund getur táknað eina rás, frá 00 (ekkert) til FF (fullt), sem gefur sama 16,7 milljón liti og RGB í mun styttri táknun. HEX er sjálfgefið í CSS, hönnunarverkfærum og leiðbeiningum vörumerkis.

Já. Skipta-takkinn við hliðina á inntakinu tekur þig á HEX í HSL breytirinn, sem virkar nákvæmlega á sama hátt. Báðar leiðir nota sama formúluna, bara beitt í öfuga röð.

Byggðu litasafnið í HSL, þá flytdu út í HEX. Safnið heldur röksemdinni — sami litblær, stigvaxandi ljósleiki — á meðan afhent kóði er í formi sem forritarar vænta.