HSL-ээс RGB рүү хөрвүүлэх: Өнгөний загваруудын гүүр
HSL (Hue, Saturation, Lightness) болон RGB (Red, Green, Blue) гэдэг нь дижитал өнгөний хоёр өөр ертөнц юм. HSL нь хүний нүдээр өнгийг ойлгоход зориулагдсан бол RGB нь дэлгэцийн физик үйлдэл юм. Энэ хуудас нь эдгээр хоёр загварын хооронд шууд, алдагдалгүй хөрвүүлэлт хийж, HSL-ээр бодож, RGB-ээр код бичих боломжийг олгодог. Хуудасны гол онцлог нь HSL-ийн гэрэлтэлтийг өөрчлөхөд өнгөний өнгө аяс (hue) хэвээр үлддэг бөгөөд энэ нь палитр болон сэдэв үүсгэхэд HSL-ийг хүний оюун ухаанд ойлгомжтой болгодог. RGB нь эсрэгээрээ, дэлгэцийн өнгөний математик тооцооллын ажлын орон зай юм.
Энэ хэрэгсэл нь өнгөний хөрвүүлэлтийн хамгийн энгийн бөгөөд найдвартай аргуудын нэг юм. Энэ нь бүх хүчинтэй HSL утгыг дэлгэцэнд харуулах боломжтой RGB гурвалсан утгад алдагдалгүй хөрвүүлдэг. LAB эсвэл CMYK-ээс RGB руу хөрвүүлэхэд тохиолддог зүйлээс ялгаатай нь, энэ хөрвүүлэлтэд ямар ч өнгөний gamut-аас гадуур хасалт (clipping) байхгүй. Иймээс буцаан хөрвүүлэхэд өнгөний шилжилт үүсэхгүй.
HSL ба RGB: Хүний сэтгэлгээ ба дэлгэцийн хэл
HSL загвар нь өнгөний гурван хэмжээст орон зайг ашигладаг: өнгөний өнцөг (0-360°), ханасан байдал (0-100%), гэрэлтэлт (0-100%). Энэ нь хүний өнгөний талаарх ойлголттой илүү нийцдэг. Жишээлбэл, та цэнхэр өнгийг бодож байна гэж бодъё. HSL-ээр та 240°, 100%, 50% гэж бичиж болно. Дараа нь гэрэлтэлтийг 30% болгон бууруулахад та ижил цэнхэр өнгийн бараан хувилбарыг авах болно. Энэ нь палитр үүсгэхэд маш тохиромжтой.
RGB загвар нь гурван өнгийн сувгийг (улаан, ногоон, цэнхэр) ашигладаг бөгөөд тус бүр нь 0-255 хүртэлх утгатай. Эдгээр нь дэлгэцийн пикселүүдийг асаах хүчийг тодорхойлдог. Жишээлбэл, дээрх цэнхэр өнгө 240°, 100%, 50% нь RGB-ээр 0, 0, 255 болно. RGB нь дэлгэцэнд өнгө харуулахын тулд шууд хэрэглэгддэг тул ямар ч CSS код, зургийн формат, график процессор RGB утгыг хүлээн авдаг.
Энэ хуудасны гол онцлог нь эдгээр хоёр ертөнцийг холбох явдал юм. Дизайнерууд HSL-ээр палитр бодож, хөгжүүлэгчид RGB-ээр код бичих ёстой. Энэ хэрэгсэл нь энэ шилжилтийг шуурхай, алдаагүй хийхэд тусалдаг.
Оролт, гаралт ба дэмжигдсэн өнгөний загварууд
Хуудасны оролт нь маш энгийн:
- HSL утга: Өнгөний өнцөг (0-360), ханасан байдал (хувь), гэрэлтэлт (хувь). Жишээ нь:
243, 75%, 59%.
Энэ оролтыг оруулсны дараа бүх гаралтын талбарууд шууд шинэчлэгддэг:
- HEX:
#4F46E5 - RGB:
79, 70, 229 - HSL:
243, 75%, 59% - HSV: Өнгөний өнцөг, ханасан байдал, утга (Value)
- CMYK: Цэнхэр, мадента, шар, хар (дэлгэцийн тооцоолол)
- LAB: Гэрэлтэлт, a тэнхлэг, b тэнхлэг
Эдгээр бүх гаралт нь нэгэн зэрэг шинэчлэгддэг. Та HSL утгыг өөрчлөхөд бусад бүх загварын утга автоматаар тооцоологддог. Энэ нь өнгөний өөр өөр тайлбаруудыг харьцуулахад маш тохиромжтой.
Хөрвүүлэлтийн дүрэм ба анхааруулга
Хуудасны хөрвүүлэлт нь тодорхой дүрмүүд дээр суурилдаг. Хэрэв та HSL утгыг буруу оруулбал, тухайлбал, 300, 150%, 50% гэх мэт ханасан байдал нь 100-аас дээш байвал, дараах алдааны мессеж гарч ирнэ:
"Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
Энэ нь хэрэглэгчийг зөв формат руу чиглүүлдэг. Хүчинтэй HSL утгын хүрээ нь:
- Өнгөний өнцөг: 0-360
- Ханасан байдал: 0-100%
- Гэрэлтэлт: 0-100%
Хэрэв танд hsl(243, 75%, 59%) гэх мэт CSS хэлбэрээр өгөгдсөн бол энэ нь энэ хэрэгсэлд тохирохгүй. Та 243, 75%, 59% гэх мэт тоон утгыг оруулах хэрэгтэй.
CMYK гаралтын тухай анхааруулга: CMYK гаралт нь зөвхөн дэлгэцийн тооцоолол юм. Мэргэжлийн хэвлэлд ашигладаг CMYK утга нь цаас, бэх, принтерийн профайлаас хамаарч өөр байж болно. Энэ хэрэгсэл нь зөвхөн ойролцоо утгыг харуулдаг. Хэрэв та мэргэжлийн хэвлэлд зориулж өнгө бэлтгэж байгаа бол принтерийн профайлыг ашиглах хэрэгтэй.
Мөн энэ хуудас нь бүх өнгөний хөрвүүлэлтийг таны хөтөч дотор шууд гүйцэтгэдэг. Таны оруулсан өгөгдөл хаана ч дээшлэхгүй. Энэ нь нууцлалын аюулгүй байдлыг хангаж, хурдан ажиллагааг хангадаг.
Энэ хэрэгсэл хэнд хэрэгтэй вэ?
Энэ хэрэгсэл нь өнгөний загваруудын хооронд шилжих шаардлагатай хэн бүхэнд хэрэгтэй. Гол хэрэглэгчид нь:
- Дизайнерууд: HSL ашиглан палитр, сэдэв үүсгэж, дараа нь RGB утгыг кодонд ашиглах шаардлагатай.
- Front-end хөгжүүлэгчид: Дизайн хэрэгслээс (ихэвчлэн HSL ашигладаг) CSS эсвэл JavaScript кодонд RGB утгыг шилжүүлэх.
- График дизайнерууд: Өнгөний математик нарийвчлалыг шаарддаг ажилд HSL-ээр бодож, RGB-ээр дэлгэцэнд харуулах.
- Вэб хөгжүүлэгчид: HEX, RGB, HSL, HSV, CMYK, LAB гэх мэт олон өнгөний загварыг нэг дор харж, харьцуулах.
Жишээ нь, хэрэв та hsl(0, 100%, 50%) (улаан) гэсэн утгыг ашиглаж байгаа бол RGB-ээр 255, 0, 0 болон HEX-ээр #FF0000 болно. Энэ нь маш энгийн, гэхдээ илүү төвөгтэй палитрт энэ хэрэгсэл үнэхээр хэрэгтэй.
Өнгөний загваруудын ялгаа
Энэ хэрэгсэл нь зургаан өөр өнгөний загварыг харуулдаг. Тэдгээрийн ялгаа нь:
| Загвар | Тайлбар | Хэрэглээ |
|---|---|---|
| HSL | Хүний оюун ухаанд зориулсан | Палитр, сэдэв үүсгэх |
| RGB | Дэлгэцийн физик үйлдэл | Дэлгэц харуулах |
| HEX | RGB-ийн 16-тын дүрслэл | CSS, HTML |
| HSV | HSL-тэй төстэй, гэхдээ утга (Value) ашигладаг | Зургийн боловсруулалт |
| CMYK | Хасах аргын загвар | Хэвлэл |
| LAB | Хүний нүдний өнгөний ойлголтод суурилсан | Өнгөний удирдлага |
LAB болон CMYK нь RGB-тэй өөр өөр gamut-тай. Энэ нь зарим LAB эсвэл CMYK утгыг RGB-д хөрвүүлэх боломжгүй гэсэн үг. Гэхдээ энэ хэрэгсэл нь зөвхөн дэлгэцэнд харуулах боломжтой RGB утгыг тооцоолдог. Хэрэв LAB эсвэл CMYK утга нь RGB gamut-аас гадуур байвал, ойролцоо утгыг харуулж болно.
FAQ
1. HSL утгыг хэрхэн зөв оруулах вэ?
Та өнгөний өнцөг (0-360), ханасан байдал (хувь), гэрэлтэлт (хувь) гэсэн гурван утгыг таслалаар тусгаарлан оруулах хэрэгтэй. Жишээ нь: 243, 75%, 59%. CSS хэлбэр (hsl(243, 75%, 59%)) ажиллахгүй.
2. Яагаад CMYK утга нь зөвхөн ойролцоо байдаг вэ? Мэргэжлийн хэвлэлд ашигладаг CMYK утга нь цаас, бэх, принтерийн профайлаас хамаардаг. Энэ хэрэгсэл нь зөвхөн дэлгэцийн тооцоолол хийж чаддаг тул мэргэжлийн хэвлэлд зориулж нарийвчилсан өнгөний удирдлага хийх боломжгүй.
3. Хэрэв би HSL утгыг буруу оруулбал яах вэ? Хэрэв таны оруулсан утга хүчинтэй хүрээнээс гадуур байвал (жишээ нь, ханасан байдал 100-аас дээш), дараах мессеж гарч ирнэ: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
4. Энэ хэрэгсэл миний өгөгдлийг серверт илгээдэг үү? Үгүй. Бүх өнгөний хөрвүүлэлт таны хөтөч дотор шууд хийгддөг. Ямар ч өгөгдөл дээшлэхгүй.
5. HSL болон HSV хоёрын ялгаа юу вэ? HSL нь гэрэлтэлт (lightness) ашигладаг бол HSV нь утга (value) ашигладаг. HSL-ийн гэрэлтэлт нь 0% (хар) - 100% (цагаан) хүртэл байдаг бол HSV-ийн утга нь 0% (хар) - 100% (цэвэр өнгө) хүртэл байдаг. Энэ нь HSL нь илүү байгалийн гэрэлтэлтийн мэдрэмж өгдөг.
6. Яагаад өнгөний хөрвүүлэлт алдагдалгүй байдаг вэ? HSL-ээс RGB руу хөрвүүлэх нь математикийн хувьд шууд урвуу хамааралтай. Өөрөөр хэлбэл, ямар ч хүчинтэй HSL утга дэлгэцэнд харуулах боломжтой RGB утгад хөрвүүлэгддэг. LAB эсвэл CMYK-ээс ялгаатай нь, энд gamut-аас гадуур өнгө байхгүй тул хасалт (clipping) хийх шаардлагагүй. Иймээс өнгөний ямар ч шилжилт үүсэхгүй.