HSL түсті таңдаудың ыңғайлы тәсілі, ал RGB — экрандар, canvas API-лар мен кескін кодтары нақты тұтынатын формат. Бұл конвертер кез келген hue, saturation және lightness үштігін дәл 0–255 арналарға айналдырады.
HSL-тан RGB-қа түрлендіру қалай жұмыс істейді
- S пен L-ды бөлшекке айналдырып, хрома C = (1 − |2L − 1|) × S формуласын есепте.
- Түсті дөңгелектегі сегментін табу үшін hue-ты 60-қа бөліп, аралық мән X = C × (1 − |(H/60 mod 2) − 1|) есепте.
- Сегментке қарай C, X және 0 мәндерін R, G және B слоттарына орналастыр.
- Барлық үш арнаға L − C/2 жарықтық офсет қосып, 255-ке көбейт.
Жұмыс істейтін мысал
Нәтиже соңғы бүтінге дөңгелектеуге дейін дәл келеді. Хью немесе қанықтылықтың бөлшек мәндері қолдау табады және ең жақын RGB үштігіне сәйкес келеді.
HSL және RGB түсініктемесі
HSL деген не?
HSL түсті үшке бөледі: рең (түс дөңгелегінде 0–360°), қанықтылық (қаншалықты түсті, 0–100%) және жарықтық (қаншалықты жарық, 0–100%). Әр бөлік адамдар түс туралы сипаттауымен сәйкес келетіндіктен, HSL масштабтар, реңк‑түстер және бірізді палитра жасау үшін ең ыңғайлы формат — қолмен немесе кодта.
- Синтаксис:
- hsl(H, S%, L%)
- Ауқымы:
- 0–360°, 0–100%, 0–100%
- Үшін ең жақсы:
- палитралар, реңктер мен көлеңкелер, тақырыптау
RGB деген не?
RGB түсін үш жарық арнасы — қызыл, жасыл және көк — арқылы сипаттайды, әрқайсысы 0‑ден 255‑ке дейін. Бұл экрандардың нақты қалай жұмыс істейтінін көрсетеді: барлық үші 255 болса ақ болады, барлығы 0 болса қара. RGB сандық есептеулер қажет кезде дұрыс таңдау, ал rgba() арқылы мөлдірлік қосылады.
- Синтаксис:
- rgb(R, G, B)
- Ауқымы:
- Арна бойынша 0–255
- Үшін ең жақсы:
- код, canvas, rgba() арқылы мөлдірлік
HSL-тан RGB-қа анықтама кестесі
Ең жиі қолданылатын CSS түстері, HSL-тан RGB-қа түрлендірілді.
| Түс | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |