RGB nurodo ekranui, kiek šviesos išskirti; HSL sako, kaip ta spalva iš tikrųjų atrodo. Trys kanalai paverčiami į hue, saturation ir lightness, todėl spalvą lengva reguliuoti rankomis.
Kaip veikia RGB į HSL konvertavimas
- Padalink R, G ir B iš 255, kad kiekviena reikšmė būtų tarp 0 ir 1.
- Imk didžiausią ir mažiausią iš trijų — jų vidurkis yra šviesis L.
- Jei maksimumas ir minimumas sutampa, spalva yra pilka: hue ir saturation abu lygūs 0.
- Kitu atveju apskaičiuok S pagal skirtumą tarp maksimumo ir minimumo, o H nustatyk pagal kanalą, kuris yra maksimalus.
Veikęs pavyzdys
Principu metu tikslu. Kadangi H, S ir L dažniausiai rodoma suapvalintais sveikaisiais skaičiais, grįžtant atgal gali vienas kanalas pasikeisti per vieną ar du žingsnius.
RGB ir HSL paaiškinta
Kas yra RGB?
RGB aprašo spalvą kaip tris šviesos kanalus — raudoną, žalią ir mėlyną — kiekvienas nuo 0 iki 255. Tai atspindi, kaip iš tikrųjų veikia ekranai: visi trys 255 reiškia baltą, visi 0 — juodą. RGB tinka, kai reikia skaičiuoti su spalva, o rgba() prideda permatomumą.
- Sintaksė:
- rgb(R, G, B)
- Intervalas:
- 0–255 per kanalą
- Tinka geriausiai:
- kodas, canvas, permatomumas su rgba()
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
RGB į HSL atnaujinimo lentelė
Dažniausiai sutinkamos CSS spalvos, konvertuotos iš RGB į HSL.
| Spalva | 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%) |