HSL ir draudzīgs veids, kā izvēlēties krāsu, RGB ir tas, ko ekrāni, canvas API un attēlu kods patiesībā patērē. Šis konvertors pārveido jebkuru toņa, piesātinājuma un gaišuma trīskāršu uz precīzām 0–255 kanālu vērtībām.
Kā darbojas HSL uz RGB konvertēšana
- Pārvērt S un L par daļskaitļiem un aprēķini hromu C = (1 − |2L − 1|) × S.
- Daliet toņu ar 60, lai atrastu segmentu krāsu ritenī, un aprēķini starpvērtību X = C × (1 − |(H/60 mod 2) − 1|).
- Piešķir C, X un 0 R, G un B vietām atbilstoši tam segmentam.
- Pievieno gaišuma nobīdi L − C/2 visiem trim kanāliem un reizinā ar 255.
Praktisks piemērs
Rezultāts ir precīzs līdz pēdējai noapaļošanai uz veseliem kanāliem. Atbalstītas arī daļējas toņa vai piesātinājuma vērtības — tās vienkārši noapaļojas uz tuvāko RGB trīskāršu.
HSL un RGB izskaidrojums
Kas ir HSL?
HSL sadala krāsu toņos (0–360° krāsu ritenī), piesātinājumā (cik krāsaina, 0–100%) un gaišumā (cik spilgta, 0–100%). Tā kā katra daļa atbilst tam, kā cilvēki apraksta krāsu, HSL ir visvienkāršākais formāts tintiņu, nokrāsu un konsekventu paletju veidošanai — gan manuāli, gan kodā.
- Sintakse:
- hsl(H, S%, L%)
- Diapazons:
- 0–360°, 0–100%, 0–100%
- Vislabāk piemērots:
- paletes, tintiņas un nokrāsas, tēmu veidošana
Kas ir RGB?
RGB attēlo krāsu kā trīs gaismas kanālus — sarkanu, zaļu un zilu — katrs no 0 līdz 255. Tas atspoguļo, kā ekrāni patiesībā strādā: visi trīs 255 dod baltu, visi 0 dod melnu. RGB ir pareizā izvēle, kad jāveic aprēķini ar krāsu, un rgba() pievieno caurspīdīgumu virsū.
- Sintakse:
- rgb(R, G, B)
- Diapazons:
- 0–255 per channel
- Vislabāk piemērots:
- kods, canvas, caurspīdīgums ar rgba()
HSL uz RGB atsauces tabula
Visizplatītākās CSS krāsas, konvertētas no HSL uz RGB.
| Krāsa | 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) |