HSL түсті адамдар сөйлегендей сипаттайды: реңі қандай, қаншалықты қанық, қаншалықты жарық. HEX кодын HSL-ге айналдыру түсті нақты түзетуге — ашықтыру, бәсеңдету немесе толығымен шкала құру — ыңғайлы форматқа әкеледі.
HEX-тан HSL-қа түрлендіру қалай жұмыс істейді
- HEX кодын RGB-ге айналдырып, әр каналды 255-ке бөліп, үш мәнді 0 мен 1 аралығына келтір.
- Үш мәннің ең үлкені мен ең кішісін таб. Олардың орташа мәні — жарықтық L.
- Олардың айырмасы қанықтық S-ты анықтайды: жарық түстер үшін оны (2 − max − min)-ге, қара түстер үшін (max + min)-ге бөл.
- Ең үлкен мәнді ұстайтын канал реңді H анықтайды — қызыл 0°, жасыл 120°, көк 240° — қалған екі канал сол сегмент ішіндегі нақты реңді орналастырады.
Жұмыс істейтін мысал
Есептеулер нақты, бірақ HSL мәндері әдетте градус пен пайызға дөңгелектеледі. Сондықтан қайта айналдырғанда RGB-ден бір-екі қадам алыста болуы мүмкін — практикасында байқалмайды, бірақ түстерді жиі екіжақты айналдырғанда білу қажет.
HEX және HSL түсініктемесі
HEX деген не?
HEX коды алдыңғы # таңбасымен бірге үш арнаның — қызыл, жасыл және көк — мәндерін сақтайтын алты таңбалы оналтылық сан. Әр жұп таңба бір арнаны білдіреді, 00 (еш)‑ден FF (максимум)‑қа дейін, бұл RGB‑тің 16.7 миллион түсіне сәйкес келеді, бірақ қысқа жазылады. HEX CSS, дизайн құралдары және бренд нұсқауларында әдеттегі таңдау.
- Синтаксис:
- #RRGGBB
- Ауқымы:
- Арна бойынша 00–FF
- Үшін ең жақсы:
- CSS, дизайн тапсыру, бренд нұсқаулары
HSL деген не?
HSL түсті үшке бөледі: рең (түс дөңгелегінде 0–360°), қанықтылық (қаншалықты түсті, 0–100%) және жарықтық (қаншалықты жарық, 0–100%). Әр бөлік адамдар түс туралы сипаттауымен сәйкес келетіндіктен, HSL масштабтар, реңк‑түстер және бірізді палитра жасау үшін ең ыңғайлы формат — қолмен немесе кодта.
- Синтаксис:
- hsl(H, S%, L%)
- Ауқымы:
- 0–360°, 0–100%, 0–100%
- Үшін ең жақсы:
- палитралар, реңктер мен көлеңкелер, тақырыптау
HEX-тан HSL-қа анықтама кестесі
Ең жиі қолданылатын CSS түстері, HEX-тан HSL-қа түрлендірілді.
| Түс | 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%) |