HSL reňki adamlaryň düşündirşi ýaly beýan edýär: haýsy tint, nähili reňkly, nähili ýaryk. HEX kodyny HSL-e öwürmek reňki hakykatdanam üýtgedip bolar görnüşe getirip, ony ýaryndyrmak, solgunlaşdyrmak ýa-da süzgeç görnüşinde dolandyrmak üçin iň çalt ýoldur.
HEX-den HSL-a öwürmegiň işleýşi
- HEX kodyny RGB-e öwürip, her kanaly 255-e böl, şonuň üçin üçüsi hem 0 bilen 1 arasynda bolar.
- Üç bahanyň iň uly we iň kiçisini tap. Olaryň ortaça bahasy lightness L bolar.
- Olaryň arasyndaky giňlik saturation S-i kesgitleýär: ýagty reňklerde ony (2 − max − min)-e böl, garaňky reňklerde (max + min)-e böl.
- Iň ýokary kanalyň hyzmaty hue H-y kesgitleýär — gyzyk 0°, ýaşyl 120°, gök 240° — we beýleki iki kanal hue-i şol segmentiň içinde ýerleşdirýär.
Işläp görlen mysal
Hesaplama tak, emma HSL bahalary adatça doly derejeler we prosentler görnüşinde gurşalýar. Yzyna öwrülenimde şol sebäpli RGB bir ýa iki ädimçe tapawut edip biler — işjeňlikde görünmeýän, ýöne reňkler bilen yzygiderli öwrüp-öwürseň bilesiñ.
HEX we HSL düşündirişleri
HEX näme?
HEX kody lider # bilen iň öňde turýan we reňkiň gyzyl, gök we yaşyl kanallaryny saklaýan alty basgançakly onaltyk san. Her bir san juftlygy bir kanaly görkezip, 00 (hiç) -den FF (dolýan) çenli bolup, RGB bilen birmeňzeş 16,7 million reňki has gysga ýazgyda berýär. HEX CSS-de, dizaýn gurallarynda we brend ýörelgelerinde standartdyr.
- Sintaksis:
- #RRGGBB
- Diapazon:
- Her kanal üçin 00–FF
- Iň amatly üçin:
- CSS, dizaýn tabşyryşy, brend ýörelgeleri
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
HEX-den HSL-a derňewdiň tablisasy
Iň köp ulanylýan CSS reňkleri, HEX-den HSL-a öwrülen.
| Reňk | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |