RGB-аас HSL руу хөрвүүлэх хуудас: Өнгөний загваруудын хоорондын гүүр
Энэ хуудас юу хийдэг
RGB өнгө—0-ээс 255 хүртэлх гурван тоо, дэлгэц улаан, ногоон, хөх гэрлийг хэрхэн хольж харуулж байгааг илэрхийлдэг—оруулмагц HSL-ээр (hue градусаар, saturation болон lightness хувиар) шууд харна. Энэ хэрэгсэл мөн өнгийг бусад түгээмэл форматаар (HEX, HSV, CMYK, LAB) харуулж, төсөлдөө хэрэгтэй утгыг хуулах боломж олгоно.
RGB ба HSL: Хоёр өөр ертөнц
RGB нь дэлгэцийн төрөлх загвар юм. Улаан, ногоон, хөх гэрлийн гурван сувгийн эрчмийг 0-255 хүртэлх масштабаар хэмждэг. Энэ бол нэмэлт холилдох загвар—гурван сувгийг бүгдийг 255 болговол цагаан өнгө үүснэ. sRGB ажлын орон зай нь интернетийн стандарт бөгөөд ихэнх дэлгэц, хөтөч, үйлдлийн системүүд үүнийг ашигладаг.
HSL нь хүний нүдний өнгийг хүлээн авах аргад ойрхон бүтээгдсэн загвар юм. H (hue) нь 0-360° хүртэлх өнгөний дугуй дээрх байрлалыг илэрхийлнэ. 0° нь улаан, 120° нь ногоон, 240° нь хөх. S (saturation) нь 0-100% хүртэлх өнгөний цэвэршилт. 0% нь саарал, 100% нь хамгийн тод өнгө. L (lightness) нь 0-100% хүртэлх хүлээн зөвшөөрөгдсөн гэрэлтэл. 0% нь хар, 100% нь цагаан.
Энэ хуудасны онцлог
RGB-д нэг сувгийг өөрчлөх нь тухайн өнгөний хүлээн зөвшөөрөгдсөн өнгийг өөрчилдөг. Улаан өнгийг багасгахад зөвхөн улаан биш, бүх өнгөний харагдах байдал өөрчлөгддөг. Харин HSL-д lightness-ийг тус тусад нь тохируулж болно. Жишээ нь: 243° hue, 75% saturation, 59% lightness гэсэн HSL утгыг RGB-ээр 79, 70, 229 гэж илэрхийлнэ. Хэрэв lightness-ийг 59% -аас 40% болгон өөрчилвөл, hue болон saturation хэвээр үлдэнэ. Өнгөний жинхэнэ мөн чанар өөрчлөгдөхгүйгээр зөвхөн бараан болно. RGB-д үүнийг хийхэд гурван сувгийг бүгдийг нь тус тусад нь тохируулах шаардлагатай бөгөөд үр дүн нь ихэвчлэн өөр өнгө болдог.
Энэ онцлог нь HSL-ийг дизайнеруудын дуртай загвар болгодог. Өнгөний палитр, тем, хандалтын эсрэг тодосгогч харьцааг бий болгохдоо hue-ээ өөрчлөхгүйгээр lightness-ийг тохируулах нь маш их хэрэгтэй.
Оролт ба гаралтын дүрмүүд
Оролтын дүрэм:
- RGB гурван тоог 0-255 хүртэлх бүхэл тоогоор, таслал эсвэл зайгаар тусгаарлан оруулна.
- Буруу оролтод: "Enter RGB as three numbers 0–255, like 79, 70, 229." гэсэн алдааны мэдээлэл гарна.
- HSL-ийг шууд оруулж RGB руу хөрвүүлж болно. Буруу оролтод: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%." гэсэн алдаа гарна.
Гаралтын форматууд:
- HSL: hue (0-360°), saturation (%), lightness (%)
- HEX: #4F46E5
- HSV: 243°, 69%, 90%
- CMYK: 66%, 69%, 0%, 10% (дэлгэц дээрх тооцоолол)
- LAB: 33, 48, -68
Чухал зүйлс:
- Аливаа талбарыг засах нь бусад бүх талбарыг шууд шинэчилдэг.
- Бүх хөрвүүлэлт хэрэглэгчийн хөтөч дотор явагдана; юу ч сервер рүү илгээгдэхгүй.
- Хэрэв LAB эсвэл CMYK утгууд нь харагдах RGB хүрээнээс гадуур байвал, хэрэгсэл хамгийн ойр харагдах өнгөнд тохируулдаг. Тэр өнгийг дахин хөрвүүлэхэд бага зэргийн зөрүү гарч болно.
- CMYK гаралт нь зөвхөн дэлгэц дээрх тооцоолол бөгөөд мэргэжлийн хэвлэлд ашиглахгүй байх хэрэгтэй.
Хөрвүүлэлтийн математик
RGB-аас HSL руу хөрвүүлэх нь хэдэн үндсэн алхамаас бүрддэг. Эхлээд R, G, B утгуудыг 0-255-аас 0-1 хүртэлх масштаб руу хувааж хэвийн болгоно. Жишээ нь: 79, 70, 229 нь 0.31, 0.27, 0.90 болно.
Дараа нь хамгийн их (max) ба хамгийн бага (min) утгыг олно. Энэ тохиолдолд max=0.90, min=0.27.
Lightness (L) нь (max + min) / 2 томьёогоор тооцоологддог: (0.90 + 0.27) / 2 = 0.585 = 58.5% ≈ 59%.
Saturation (S) нь max ба min-ийн зөрүүгээс хамаарна. Хэрэв max = min бол доплер өнгө байхгүй, saturation = 0%. Энэ тохиолдолд: Δ = max - min = 0.90 - 0.27 = 0.63 L ≤ 0.5 бол S = Δ / (max + min) = 0.63 / (0.90 + 0.27) = 0.538 = 53.8% L > 0.5 бол S = Δ / (2 - max - min)
Энэ тохиолдолд L=0.585 > 0.5 тул: S = 0.63 / (2 - 0.90 - 0.27) = 0.63 / 0.83 = 0.759 = 75.9% ≈ 75%.
Hue (H) нь хамгийн их утга аль сувагт байгаагаас хамаарна:
- Хэрэв max = R бол: H = ((G - B) / Δ) * 60
- Хэрэв max = G бол: H = (2 + (B - R) / Δ) * 60
- Хэрэв max = B бол: H = (4 + (R - G) / Δ) * 60
Энд max = B (0.90), тиймээс: H = (4 + (0.31 - 0.27) / 0.63) * 60 = (4 + 0.0635) * 60 = 4.0635 * 60 = 243.81° ≈ 243°.
Тэгэхээр 79, 70, 229 RGB нь 243°, 75%, 59% HSL болно.
HSL-аас RGB руу буцах нь урвуу процесс бөгөөд эхлээд saturation ба lightness-аас тохирох RGB утгуудыг тооцоолдог.
Дизайн ба хандалтын практик хэрэглээ
UI/UX дизайнерууд HSL-ийг өнгөний палитр үүсгэхдээ өргөн ашигладаг. Brand-ийн үндсэн өнгөнөөс light болон dark variant-ууд үүсгэхэд hue-ээ өөрчлөхгүйгээр зөвхөн lightness-ийг тохируулахад хангалттай. Жишээ нь, дээрх 243°-ийн хөх өнгөнөөс lightness-ийг 30% болгон өөрчилвөл бараан хөх, 80% болгон өөрчилвөл цайвар хөх өнгө гаргаж болно.
WCAG хандалтын тодосгогч харьцааг хангахад HSL маш хэрэгтэй. Текст ба дэвсгэр өнгөний хооронд 4.5:1 харьцаатай байх шаардлагатай. RGB-д lightness-ийг хянах нь тодорхойгүй бол HSL-д lightness-ийг шууд тохируулснаар хандалтын шаардлагыг хангах боломжтой.
Front-end хөгжүүлэгчид CSS-ийн hsl() функцээр өнгөний утгыг шууд тодорхойлох боломжтой. color: hsl(243, 75%, 59%) гэсэн мөр нь дээрх RGB утгыг илэрхийлнэ. JavaScript-ээр динамик загвар өөрчлөхөд HSL-ийг ашиглах нь хялбар байдаг—зөвхөн нэг тоог өөрчлөхөд л хангалттай.
Data visualization дизайнерууд HSL-ийн lightness сувгийг ашиглан персептивээр дараалсан өнгөний масштаб үүсгэдэг. Lightness-ийг жигд өөрчлөхөд хүний нүд өнгөний гүнийг зөв хүлээн авдаг.
Хязгаарлалт ба болгоомжлол
HSL нь персептивээр жигд биш. Ижил lightness утгатай шар ба хөх өнгө нь хүний нүдэнд өөр өөр гэрэлтэй санагддаг. Шар болон хөх хоёрыг ижил lightness-ээр (жишээ нь 50%) харьцуулахад шар илүү тод, хөх илүү бараан харагддаг. Учир нь хүний нүд өөр өөр долгионы урттай гэрлийг өөрөөр хүлээн авдаг.
Энэ шалтгаанаар өнгөний шинжлэх ухааны нарийн ажилд LAB эсвэл OKLab загварууд илүү тохиромжтой. LAB нь хүний нүдний хүлээн авах чадварт илүү ойрхон загвар бөгөөд персептивээр жигд байдаг.
RGB болон HSL хоёулаа дэлгэцийн өнгөний хүрээнд хамаардаг. LAB эсвэл CMYK-аас хөрвүүлэх үед зарим өнгө нь дэлгэц дээр харагдахгүй байж болно. Ийм тохиолдолд хэрэгсэл хамгийн ойр харагдах өнгөнд тохируулдаг.
CMYK гаралт нь дэлгэц дээрх тооцоолол бөгөөд бодит хэвлэлийн төхөөрөмж, цаас, бэхний төрлөөс хамаарч өөр өөр үр дүн гарч болно. Мэргэжлийн хэвлэлд ашиглахдаа пантон эсвэл бодит CMYK хэвлэлийн дээжээр баталгаажуулах шаардлагатай.
Түгээмэл асуултууд
RGB-ийг HSL руу хөрвүүлэхэд юу тохиолддог вэ?
Өнгөний дотоод мөн чанар хадгалагдана. Зөвхөн илэрхийлэх арга өөрчлөгдөнө. RGB нь гэрлийн эрчмийг илэрхийлдэг бол HSL нь өнгөний хүний хүлээн авах талыг илэрхийлдэг.
Яагаад RGB-ийг HSL руу хөрвүүлэх хэрэгтэй вэ?
Дизайн, хандалт, өнгөний палитр үүсгэхэд хялбар. RGB-д lightness-ийг тохируулахад өнгөний өөрчлөлт гардаг бол HSL-д hue хэвээр үлддэг.
HSL-ийн saturation ба lightness ямар утгатай вэ?
Saturation нь өнгөний цэвэршилтийг 0-100% хүртэл илэрхийлнэ. Lightness нь хүлээн зөвшөөрөгдсөн гэрэлтэлтийг 0-100% хүртэл илэрхийлнэ. 0% хар, 100% цагаан.
CMYK гаралт яагаад зөвхөн тооцоолол гэж хэлдэг вэ?
Учир нь CMYK нь хэвлэлийн төхөөрөмж, цаас, бэх болон бусад хүчин зүйлсээс хамаардаг. Дэлгэц дээрх тооцоолол нь зөвхөн ойролцоо үр дүн өгдөг.
LAB эсвэл CMYK-аас хөрвүүлэхэд яагаад өнгө өөрчлөгдөж болох вэ?
Учир нь RGB хүрээ нь LAB эсвэл CMYK-ийн бүх өнгөний хүрээг хамардаггүй. Зарим өнгө нь дэлгэц дээр харагдахгүй тул хамгийн ойр харагдах өнгөнд тохируулагддаг.
HSL нь бүх хэрэглээнд тохиромжтой юу?
Үгүй. Персептивээр жигд биш учраас шинжлэх ухааны нарийн ажилд LAB илүү тохиромжтой. Мөн хэвлэлийн ажилд CMYK эсвэл тусгай өнгөний систем ашиглах хэрэгтэй.