Spalvos pasirinkimas HSL yra patogus, bet stiliaus lapai, perdavimai dizaineriams ir brand dokumentai vis dar naudoja HEX. Šis konverteris užpildo spragą ir duoda šešių skaitmenų kodą bet kokiai hue, saturation ir lightness kombinacijai.
Kaip veikia HSL į HEX konvertavimas
- Paversk saturation ir lightness į trupmenas: 60% tampa 0.6.
- Apskaičiuok chromą C = (1 − |2L − 1|) × S — taip nustatoma, kiek spalva nutolusi nuo pilkos.
- Naudok hue, kad išdėstytum tą chromą ant raudono, žalio ir mėlyno kanalų, tada visus tris pastumk pagal L − C/2.
- Padaugink kiekvieną kanalą iš 255, suapvalink ir užrašyk kaip dvi šešioliktainės skaitmenis.
Veikęs pavyzdys
Suapvalinimas vyksta tik paskutiniame žingsnyje, kai kiekvienas kanalas prikabinamas prie sveiko 0–255 reikšmės. Rezultatas yra artimiausias HEX kodas tavo HSL įėjimui ir paprastai sutampa su tuo, ką rodo dizaino įrankis.
HSL ir HEX paaiškinta
Kas yra HSL?
HSL suskaido spalvą į atspalvį (0–360° spalvų rate), saturaciją (kiek ryški, 0–100%) ir šviesumą (kiek šviesi, 0–100%). Kadangi kiekviena dalis atitinka tai, kaip žmonės apibūdina spalvas, HSL yra lengviausias formatas kurti šviesesnes ar tamsesnes variacijas ir nuoseklias paletes — ranka arba kode.
- Sintaksė:
- hsl(H, S%, L%)
- Intervalas:
- 0–360°, 0–100%, 0–100%
- Tinka geriausiai:
- paletės, atspalviai ir tamsūs/nešviesūs variantai, temingas dizainas
Kas yra HEX?
HEX kodas yra šešiženklis šešioliktainis skaičius, saugantis spalvos raudonos, žalios ir mėlynos kanalus po pradinio #. Kiekviena skaitmenų pora atitinka vieną kanalą nuo 00 (nėra) iki FF (pilnai), todėl tai suteikia tą pačią 16,7 milijono spalvų aprėptį kaip RGB, bet daug trumpesne užrašo forma. HEX yra numatytasis CSS, dizaino įrankių ir prekių ženklo gairių formatas.
- Sintaksė:
- #RRGGBB
- Intervalas:
- 00–FF per kanalą
- Tinka geriausiai:
- CSS, dizaino perdavimas, prekių ženklo gairės
HSL į HEX atnaujinimo lentelė
Dažniausiai sutinkamos CSS spalvos, konvertuotos iš HSL į HEX.
| Spalva | 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 |