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|).
- Анан ошол секторго ылайык R, G жана B орундарына C, X жана 0 кой.
- Бардык үч каналга жарыктык офсети L − C/2 кошуп, андан соң 255 менен көбөйт.
Иштеген мисал
Жыйынтык акыркы бүтүн каналдарга тегеректөөгө чейинки так натыйжа. Бөлүкчө hue же saturation маанилери да колдоого алынат жана жөн гана жакынкы 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() функциясы үстүнө өтмөчөлүк (transparency) кошот.
- Синтаксиси:
- 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) |