Li tagħżel kulur f’HSL hu komdu, imma stylesheets, handoffs tad-disinn u dokumenti tal-marka għadhom jużaw HEX. Dan il-konvertitur jagħlaq dak il-voqgħa u jagħtik il-kodiċi sitta-dijitali għal kwalunkwe kombinazzjoni ta’ hue, saturation u lightness.
Kif taħdem il-konverżjoni HSL għal HEX
- Ittraduċi s-saturazzjoni u l-lightness fi frakjonijiet: 60% isir 0.6.
- Ikkalkula l-chroma C = (1 − |2L − 1|) × S — hekk kif il-kulur jinsab 'il bogħod mis-servi (grey).
- Uża l-hue biex tpoġġi dik il-chroma fuq il-kanali aħmar, aħdar u blu, imbagħad iċċaqlaq it-tlieta kollha bi L − C/2.
- Immultiplika kull kanal b’255, rroundjah, u iktebih bħala żewġ dijti esadesimali.
Eżempju mwettaq
Ir-rounding iseħħ darba, fl-aħħar pass, meta kull kanal jiġi kkattivat għal valur sħiħ bejn 0–255. Ir-riżultat hu l-kodiċi HEX l-iktar viċin għall-input HSL tiegħek u normalment identiku ma’ dak li juri għodda tad-disinn.
HSL u HEX spjegati
X'inhu HSL?
HSL jaqsmu kulur f'ċpar nagħta: hue (0–360° fuq ir-rota tal-kulur), saturation (kemm huwa kulurit, 0–100%) u lightness (kemm hu jiddi, 0–100%). Peress li kull parti tirrifletti kif in-nies jiddeskrivu l-kulur, HSL huwa l-iktar format faċli biex tibni tints, shades u palettes konsistenti — permezz ta' idejn jew fil-kodiċi.
- Sintassi:
- hsl(H, S%, L%)
- Firxa:
- 0–360°, 0–100%, 0–100%
- L-aħjar għal:
- palettes, tints u shades, theming
X'inhu HEX?
Kodiċi HEX huwa numru esadesimali ta' sitt ċifri li jżomm il-kanal aħmar, aħdar u blu ta' kulur wara # quddiem. Kull par ta' ċifri jkopri kanal wieħed, minn 00 (ebda) sa FF (sħiħ), li jipprovdi l-istess 16.7 miljun kulur bħar-RGB fi notazzjoni ħafna aktar korta. HEX huwa l-default f'CSS, għodod ta' disinn u linji gwida tal-marka.
- Sintassi:
- #RRGGBB
- Firxa:
- 00–FF kull kanal
- L-aħjar għal:
- CSS, handoff tad-disinn, linji gwida tal-marka
HSL to HEX reference table
L-aktar kuluri CSS komuni, konvertiti minn HSL għal HEX.
| Kulur | 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 |