HSL-de reňk saýlamak rahat, ýöne usulyýetler, dizaýn geçişleri we brend dokumentleri henizem HEX-de işleýär. Bu konwerter şol boşlugy dolduryp, haýsydyr bir hue, saturation we lightness kombinasiýasy üçin alty sanly kody berýär.
HSL-den HEX-a öwürmegiň işleýşi
- Saturation we lightness-i fraksiýalara öwür: 60% 0.6 bolýar.
- Chroma C = (1 − |2L − 1|) × S-hasapla — bu reňkiň göwreliden näçe aralykda ýatanlygyny görkezýär.
- Hue-i ulanyp şol chromany gyzyl, ýaşyl we gök kanallarda ýerleşdir, soňra üçüsini L − C/2 bilen süýşür.
- Her kanaly 255-e köpelt, gurşulaň we ony iki hex san hökmünde ýaz.
Işläp görlen mysal
Gurşulaş soňky ädimde, her kanal 0–255 aralygyndaky bütin san bolmagyna çakyrylýar. Netije seniň HSL girizmelerine iň ýakyn HEX kody bolup, adatça dizaýn gurallarynda görünýän bilen deň bolýar.
HSL we HEX 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
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-den HEX-a derňewdiň tablisasy
Iň köp ulanylýan CSS reňkleri, HSL-den HEX-a öwrülen.
| Reňk | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |