HSL reňki seçmegiň utgaşykly we düşnükli usulydyr, RGB bolsa ekrany, canvas API-lerini we surata degişli kodlary hakykatdanam iýýär. Bu konwerter islendik hue, saturation we lightness üçlügini takyk 0–255 kanallaryna öwürýär.
HSL-den RGB-a öwürmegiň işleýşi
- S we L-ni fraksiýalara öwürip, xroma C = (1 − |2L − 1|) × S hasapla.
- Hue-i 60-a bölüp reňk çarjagyndaky segmentini tap we ara baha X = C × (1 − |(H/60 mod 2) − 1|) hasapla.
- Şol segment boýunça R, G we B oturýanlyklara C, X we 0-ni bellen.
- Lightness offset L − C/2-i üç kanalň hemmesine goşup 255 bilen köpeldiň.
Işläp görlen mysal
Netije soňky butun kanalara golaýlamak derejesine çenli takyk. Onluk hue ýa-da saturation bahalary goldanylýar we ýakynRGB üçlügine düşýär.
HSL we RGB düşündirişleri
HSL näme?
HSL reňki reňk tonu (reňk tegelekde 0–360°), toýgunlyk (näçe reňkli, 0–100%) we ýalptylyk (näçe ýagty, 0–100%) bölýär. Her bölek adamala reňki düşündirişine gabat gelýänligi sebäpli, HSL reňk çalşyklary, kölegeler we yzygiderli paletalar taýýarlamak üçin iň ýönekeý format — el bilen ýa-da kodda.
- Sintaksis:
- hsl(H, S%, L%)
- Diapazon:
- 0–360°, 0–100%, 0–100%
- Iň amatly üçin:
- paletalar, çalşyklary we tematika
RGB näme?
RGB reňki üç yşyk kanal hökmünde düşündirýär — gyzyl, gök we ýaşyl — her biri 0-dan 255-e çenli. Bu ekranlaryň hakykatdan nähili işleýşini görkezýär: üçüsi-de 255-de bolanda ak peýda bolýar, ählisi 0-da bolsa gara. RGB reňk bilen hasaplama gerek bolanda dogry saýlawdyr, we rgba() onuň üstüne gözençlik goşýar.
- Sintaksis:
- rgb(R, G, B)
- Diapazon:
- Her kanal üçin 0–255
- Iň amatly üçin:
- kod, canvas, rgba() bilen aşaka gözençlik
HSL-den RGB-a derňewdiň tablisasy
Iň köp ulanylýan CSS reňkleri, HSL-den RGB-a öwrülen.
| Reňk | 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) |