HSLn kolore bat aukeratzea erosoa da, baina estilo-orriak, diseinu entregak eta marka-dokumentuak oraindik HEXean ibiltzen dira. Konbertsore honek hutsunea beteko du eta emango dizu hue, saturation eta lightness konbinaziotik sortutako sei digituetako kodea.
Nola funtzionatzen duen HSL-tik HEX-ra bihurketa
- Bihurtu saturazioa eta distira zatikietara: 60% 0.6 bihurtzen da.
- Kalkulatu kromaren C = (1 − |2L − 1|) × S — horrela neurtzen da kolorea zenbaterainokoa den grisetik urrun.
- Erabili tonuak kromaa kokatzeko gorri, berde eta urdin kanalen artean, eta ondoren desplazatu hiruak L − C/2rekin.
- Biderkatu kanal bakoitza 255ekin, biribildu, eta idatzi bi digitu hexazeharreko moduan.
Adibide errealista
Biribilketa azken pausoan gertatzen da, kanal bakoitza 0–255 arteko balio oso batera lotzen denean. Emaitza zure HSL sarrerari gehien hurbiltzen zaion HEX kodea da eta normalean diseinu tresnek ematen dutena bezalakoa izaten da.
HSL eta HEX azalduak
Zer da HSL?
HSL kolorea hiru zatitan banatzen du: tonuak (0–360° kolore-zirkluan), saturazioak (zenbat kolore, 0–100%) eta argitasunak (zenbat distira, 0–100%). Zati bakoitzak gizakiek kolorea deskribatzeko modua islatzen duenez, HSL errazenetakoa da tints, shades eta koherentziazko paletak eskuz edo kode bidez sortzeko.
- Sintaxia:
- hsl(H, S%, L%)
- Tartea:
- 0–360°, 0–100%, 0–100%
- Egokiena:
- paletak, tints eta shades, theming
Zer da HEX?
HEX kodea sei digituko hexaidezimal zenbaki bat da, kolore baten gorri, berde eta urdin kanalak gordetzen dituena aurreko # batekin. Digituen bikote bakoitzak kanal bat adierazten du, 00 (ezik)etik FF (osoa)ra, eta horrek RGBk bezalako 16,7 milioi kolore ematen ditu notazio askoz txikiago batean. HEX da lehenetsi CSSen, diseinu tresnen eta marka gidailetan.
- Sintaxia:
- #RRGGBB
- Tartea:
- 00–FF kanal bakoitzean
- Egokiena:
- CSS, diseinu entregak, marka gidailetarako
HSL-tik HEX-ra erreferentzia-taula
Ohikoenak diren CSS koloreak, HSL-tik HEX-ra bihurtuak.
| Kolorea | 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 |