RGB экранга канча жарык берип көрсөтөрүн айтса, HSL түстүн чыныгы көрүнүшүн берет. Үч каналды hue, saturation жана lightnessке которуу түстү кол менен оңдоону жеңилдетет.
RGB дан HSL га кантип айландыруу иштейт
- R, G жана Bни 255ке бөл, ошондо ар бир мааниде 0 менен 1дин ортосунда болот.
- Үчтөн максимумду жана минимумду ал — алардын орточосу L жарыктык болот.
- Эгер максимум менен минимум тең болсо, түс сұр: hue жана saturation экөө тең 0.
- Болбосо Sди максимум менен минимумдун айырмасынан чыгарып, Hти эң чоң мааниге ээ каналдан оку.
Иштеген мисал
Принципте так. Бирок H, S жана L адатта бүтүн сандарга тегеретилет, ошондуктан кайра конвертациялоо бир каналдын бир-эки кадамга жылышына алып келиши мүмкүн.
RGB жана HSL түшүндүрмөсү
RGB деген эмне?
RGB түсүн үч жарык каналы — кызыл, жашыл жана көк — түрүндө сүрөттөйт, ар биринин мааниси 0 ден 255 ке чейин. Бул экрандар кандай иштээрин так чагылдырат: баары 255 болсо ак түскө, баары 0 болсо кара түскө туура келет. RGB — түстөр менен эсептөөлөрдү жүргүзүү үчүн туура тандоо, ал эми rgba() функциясы үстүнө өтмөчөлүк (transparency) кошот.
- Синтаксиси:
- 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%) |