HSL al HEX konvertilo

Konvertu ajnan HSL-koloron al HEX — tuj kaj senpage

#3398DB

Algluu iun kolorvaloron — ni detektas la formaton por vi.

H
S
L
Rezulto HEX

Ĉi tiu koloro en ĉiuj format'oj

CMYK-profilo: Coated FOGRA39 (la defaŭlta agordo de Photoshop por Eŭropo)

Elekti koloron en HSL estas komforta, sed stilfolioj, transdono de projektado kaj markaj dokumentoj ankoraŭ uzas HEX. Ĉi tiu konvertilo fermas tiun interspacon kaj donas al vi la ses-ciferan kodon por ajna kombino de nuanco, saturiĝo kaj lumeco.

Kiel funkcias konvertado de HSL al HEX

  1. Konvertu saturiĝon kaj lumecon al frakcioj: 60% fariĝas 0.6.
  2. Kalkulu la kromon C = (1 − |2L − 1|) × S — tio indikas kiom for la koloro estas de griza.
  3. Uzu la nuancon por poziciigi tiun kromon sur la ruĝajn, verdajn kaj blua-kanalojn, poste ŝovu ĉiujn tri per L − C/2.
  4. Multobligu ĉiun kanalon per 255, rondigu ĝin, kaj skribu ĝin kiel du heksadecimajn ciferojn.

Efektiva ekzemplo

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

Rondigo okazas unufoje, en la lasta paŝo, kiam ĉiu kanalo estas glatigita al entjera valoro 0–255. La rezulto estas la plej proksima HEX-kodo al via HSL-enigo kaj normale identa al tio, kion montras projektila ilo.

HSL kaj HEX klarigo

Kio estas HSL?

HSL dividas koloron en nuancon (0–360° sur la kolorrado), saturiĝon (kiom kolora, 0–100%) kaj lumon (kiom hela, 0–100%). Ĉar ĉiu parto kongruas kun la maniero kiel homoj priskribas koloron, HSL estas la plej simpla formato por konstrui kolorkopiojn, nuancojn kaj konsekvencajn paletrojn — per mano aŭ en kodo.

Sintekso:
hsl(H, S%, L%)
Gamo:
0–360°, 0–100%, 0–100%
Plej taŭga por:
paletroj, nuancoj kaj ombroj, temigado

Kio estas HEX?

HEX-kodo estas ses-cifera heksadecima nombro kiu stokas la ruĝan, verdan kaj bluan kanalon de koloro post antaŭa #. Ĉiu paro da ciferoj kovras unu kanalon, de 00 (neniu) ĝis FF (plena), kio donas la samajn 16.7 milionojn da koloroj kiel RGB en multe pli mallonga notacio. HEX estas la defaŭlta en CSS, dizajnotiloj kaj markgvidlinioj.

Sintekso:
#RRGGBB
Gamo:
00–FF po kanalo
Plej taŭga por:
CSS, transdono de dezajno, markgvidlinioj

HSL al HEX referenctabelo

La plej oftaj CSS-koloroj, konvertitaj de HSL al HEX.

KoloroHSLHEX
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

Oftaj demandoj

Konvertu saturiĝon kaj lumecon al frakcioj: 60% fariĝas 0.6. Kalkulu la kromon C = (1 − |2L − 1|) × S — tio indikas kiom for la koloro estas de griza. Uzu la nuancon por poziciigi tiun kromon sur la ruĝajn, verdajn kaj blua-kanalojn, poste ŝovu ĉiujn tri per L − C/2. Multobligu ĉiun kanalon per 255, rondigu ĝin, kaj skribu ĝin kiel du heksadecimajn ciferojn.

Rondigo okazas unufoje, en la lasta paŝo, kiam ĉiu kanalo estas glatigita al entjera valoro 0–255. La rezulto estas la plej proksima HEX-kodo al via HSL-enigo kaj normale identa al tio, kion montras projektila ilo.

HEX-kodo estas ses-cifera heksadecima nombro kiu stokas la ruĝan, verdan kaj bluan kanalon de koloro post antaŭa #. Ĉiu paro da ciferoj kovras unu kanalon, de 00 (neniu) ĝis FF (plena), kio donas la samajn 16.7 milionojn da koloroj kiel RGB en multe pli mallonga notacio. HEX estas la defaŭlta en CSS, dizajnotiloj kaj markgvidlinioj.

Jes. La ŝanĝbutono apud la enigo prenas vin al la HEX al HSL konvertilo, kiu funkcias ĝuste same. Ambaŭ direktoj uzas la saman formulon, nur aplikitan inverse.

Konstrua la paletón en HSL, poste eksportu HEX. La paletro konservas sian logikon — sama nuanco, paŝita lumeco — dum la liverita kodo restas en la formato, kiun programistoj atendas.