RGB ekranyň näçe ýagtylyk çykarýandygyny aýdýar; HSL reňkiň nähili görünýändigini aýdýar. Üç kanaly hue, saturation we lightness-e öwürmek reňki el bilen aýyrmakda aňsat edýär.
RGB-den HSL-a öwürmegiň işleýşi
- R, G we B-ni 255-e böl, şeýdip her bahanyň 0 bilen 1 aralygyna gelýär.
- Üçüniň iň uly we iň kiçisini al — olaryň ortaça bahasy lightness L bolar.
- Eger iň uly we iň kiçi deň bolsa, reňk göreldir: hue we saturation ikisi hem 0.
- Bolmasa S-i iň uly we iň kiçi arasyndaky giňlikden çykar, H-i bolsa iň köp kanaldan oka.
Işläp görlen mysal
Prinsipde tak. H, S we L adatça gurşalan doly san hökmünde görkezilýänligi üçin, yzyna öwürmede kanal bir ýa iki ädimçe gaçyp biler.
RGB we HSL düşündirişleri
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 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-den HSL-a derňewdiň tablisasy
Iň köp ulanylýan CSS reňkleri, RGB-den HSL-a öwrülen.
| Reňk | 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%) |