HSL-та түс таңдау ыңғайлы, бірақ stylesheet-тер, дизайн тапсырыстары мен бренд құжаттары әлі де HEX-пен жұмыс істейді. Бұл конвертер кез келген рең, қанықтық және жарықтық комбинациясының алты таңбалы кодын береді.
HSL-тан HEX-қа түрлендіру қалай жұмыс істейді
- Қанықтық пен жарықтықты бөлшекке айналдыр: 60% → 0.6.
- Хроманы есепте C = (1 − |2L − 1|) × S — бұл түс сұрдан қаншалықты алыста тұрғанын көрсетеді.
- Хроманы қызыл, жасыл және көк каналдарға орналастырып, содан кейін барлық үш каналды L − C/2 бойынша жылжыт.
- Әр каналды 255-ке көбейтіп, дөңгелет, содан кейін оны екі он алтылық цифрмен жаз.
Жұмыс істейтін мысал
Дөңгелектеу соңғы қадамда, әр канал 0–255 бүтін мәнге көшкенде болады. Нәтиже сенің HSL енгізуіңе ең жақын HEX коды болып шығады және әдетте дизайн құралдарының көрсеткенімен бірдей болады.
HSL және HEX түсініктемесі
HSL деген не?
HSL түсті үшке бөледі: рең (түс дөңгелегінде 0–360°), қанықтылық (қаншалықты түсті, 0–100%) және жарықтық (қаншалықты жарық, 0–100%). Әр бөлік адамдар түс туралы сипаттауымен сәйкес келетіндіктен, HSL масштабтар, реңк‑түстер және бірізді палитра жасау үшін ең ыңғайлы формат — қолмен немесе кодта.
- Синтаксис:
- hsl(H, S%, L%)
- Ауқымы:
- 0–360°, 0–100%, 0–100%
- Үшін ең жақсы:
- палитралар, реңктер мен көлеңкелер, тақырыптау
HEX деген не?
HEX коды алдыңғы # таңбасымен бірге үш арнаның — қызыл, жасыл және көк — мәндерін сақтайтын алты таңбалы оналтылық сан. Әр жұп таңба бір арнаны білдіреді, 00 (еш)‑ден FF (максимум)‑қа дейін, бұл RGB‑тің 16.7 миллион түсіне сәйкес келеді, бірақ қысқа жазылады. HEX CSS, дизайн құралдары және бренд нұсқауларында әдеттегі таңдау.
- Синтаксис:
- #RRGGBB
- Ауқымы:
- Арна бойынша 00–FF
- Үшін ең жақсы:
- CSS, дизайн тапсыру, бренд нұсқаулары
HSL-тан HEX-қа анықтама кестесі
Ең жиі қолданылатын CSS түстері, HSL-тан HEX-қа түрлендірілді.
| Түс | 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 |