HSL kolorea gizakiek nola deskribatzen duten adierazten du: zein tonua, zenbat kolore bizi, zenbat distira. HEX kodea HSLra bihurtzea da kolorea benetan aldatu dezakezun formara azkar sartzearen modu onena — argitu, itzali edo oso eskala bat sortu dezakezu horretatik.
Nola funtzionatzen duen HEX-tik HSL-ra bihurketa
- Aldatu HEX kodea RGBra eta zatitu kanal bakoitza 255ekin, horrela hiruak 0 eta 1 artean egongo dira.
- Bilatu balioen artean handiena eta txikiena. Haien batezbestekoa da argitasuna L.
- Haien arteko tarteak gidatzen du saturazioa S: habia argietan zatitu (2 − max − min)z, edo ilunetan (max + min)arekin.
- Kanalik handienak erabakiko du tonuak H — gorriak 0°, berdeak 120°, urdinak 240° — eta beste bi kanalek tonuaren posizioa segmentu horren barruan kokatuko dute.
Adibide errealista
Matematika zehatza da, baina HSL balioak normalean maila osoetara eta ehunekoetara biribildu ohi dira. Beraz atzera bihurtzean RGBko pauso bat edo bi aldatzea gerta daiteke — praktikan ikusezina da, baina kontuan hartu behar da koloreak maiz birbidaltzen badituzu.
HEX eta HSL azalduak
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
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
HEX-tik HSL-ra erreferentzia-taula
Ohikoenak diren CSS koloreak, HEX-tik HSL-ra bihurtuak.
| Kolorea | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |