RGBek pantailari adierazten dio zein neurri argia igortzeko; HSLek esaten dizu kolorea nola agertzen den benetan. Kanal hiruak tonu, saturazio eta argitasun bihurtzeak kolorea eskuz moldatzea errazten du.
Nola funtzionatzen duen RGB-tik HSL-ra bihurketa
- Zatitu R, G eta B 255ekin, horrela balio bakoitza 0 eta 1 artean egongo da.
- Hartzen ezazu hiruen artean handiena eta txikiena — haien batezbestekoa da argitasuna L.
- Kasuetan handiena eta txikiena berdinak badira, kolorea griseko da: tonuak eta saturazioak 0 izango dira biak.
- Bestela, lortu S maximoaren eta minimoaren arteko tartearen arabera, eta irakurri H zein kanal den maximuma.
Adibide errealista
Printzipioz zehatza. H, S eta L normalean biribilduak erakusten direnez, atzera bihurtzeak kanal baten balioa pauso edo bi mugitu dezake.
RGB eta HSL azalduak
Zer da RGB?
RGB kolore bat hiru argi-kanal gisa deskribatzen du — gorri, berde eta urdin — bakoitza 0tik 255era. Pantailen funtzionamendua islatzen du: hirurak 255etan zuria ematen dute, guztiak 0an beltza. RGB egokia da kolerekin kalkulatu behar duzunean, eta rgba()k gardentasuna gehitzen du horren gainean.
- Sintaxia:
- rgb(R, G, B)
- Tartea:
- 0–255 kanal bakoitzean
- Egokiena:
- kodea, canvas, gardentasuna rgba()arekin
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
RGB-tik HSL-ra erreferentzia-taula
Ohikoenak diren CSS koloreak, RGB-tik HSL-ra bihurtuak.
| Kolorea | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |