HSL kolorea aukeratzeko modu atsegina da; RGBa pantailak, canvas APIak eta irudi kodeak kontsumitzen duen formatu zehatza da. Konbertsore honek edozein tintu, saturazio eta argitasun hirukote bihurtzen ditu 0–255 arteko kanal zehatz bihurguneetan.
Nola funtzionatzen duen HSL-tik RGB-ra bihurketa
- Aldatu S eta L zatitan eta kalkulatu kromaren balioa C = (1 − |2L − 1|) × S.
- Banatu tindua 60ekin segmentua aurkitzeko kolore gurpilaren gainean eta kalkulatu tarteko balioa X = C × (1 − |(H/60 mod 2) − 1|).
- Eman C, X eta 0 R, G eta B hutsuneei segmentu horren arabera.
- Gehitu argitasunaren offset-a L − C/2 hiru kanal guztietara eta biderkatu 255arekin.
Adibide errealista
Emaitza zehatza da azken biribilketara arte. Tindu edo saturazio koefiziente urratuak onartzen dira eta hurbilen dagoen RGB hirukotean kokatzen dira.
HSL eta RGB 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 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
HSL-tik RGB-ra erreferentzia-taula
Ohikoenak diren CSS koloreak, HSL-tik RGB-ra bihurtuak.
| Kolorea | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |