RGB экранға қанша жарық шығаруды айтады; HSL түстің қалай көрінетінін береді. Үш каналдан рең, қанықтық және жарықтық алу түсті қолмен оңай реттеуге мүмкіндік береді.
RGB-тан HSL-қа түрлендіру қалай жұмыс істейді
- R, G және B-ны 255-ке бөліп, әр мәнді 0 мен 1 аралығына келтір.
- Үштен ең үлкенін және ең кішісін ал — олардың орташа мәні жарықтық L болады.
- Егер ең үлкені мен ең кішісі тең болса, түс сұр: реңі мен қанықтығы екеуі де 0.
- Олай болмаса, S-ты ең үлкен мен ең кішінің айырмасынан шығарып, H-ты ең үлкен мәнді ұстаған каналдан оқы.
Жұмыс істейтін мысал
Принципте дәл. Бірақ H, S және L әдетте бүтін сандарға дөңгелектеледі, сондықтан қайта айналдырғанда канал бір-екі қадам өзгеруі мүмкін.
RGB және HSL түсініктемесі
RGB деген не?
RGB түсін үш жарық арнасы — қызыл, жасыл және көк — арқылы сипаттайды, әрқайсысы 0‑ден 255‑ке дейін. Бұл экрандардың нақты қалай жұмыс істейтінін көрсетеді: барлық үші 255 болса ақ болады, барлығы 0 болса қара. RGB сандық есептеулер қажет кезде дұрыс таңдау, ал rgba() арқылы мөлдірлік қосылады.
- Синтаксис:
- rgb(R, G, B)
- Ауқымы:
- Арна бойынша 0–255
- Үшін ең жақсы:
- код, canvas, rgba() арқылы мөлдірлік
HSL деген не?
HSL түсті үшке бөледі: рең (түс дөңгелегінде 0–360°), қанықтылық (қаншалықты түсті, 0–100%) және жарықтық (қаншалықты жарық, 0–100%). Әр бөлік адамдар түс туралы сипаттауымен сәйкес келетіндіктен, HSL масштабтар, реңк‑түстер және бірізді палитра жасау үшін ең ыңғайлы формат — қолмен немесе кодта.
- Синтаксис:
- hsl(H, S%, L%)
- Ауқымы:
- 0–360°, 0–100%, 0–100%
- Үшін ең жақсы:
- палитралар, реңктер мен көлеңкелер, тақырыптау
RGB-тан HSL-қа анықтама кестесі
Ең жиі қолданылатын CSS түстері, RGB-тан HSL-қа түрлендірілді.
| Түс | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |