HSL-ээс HEX рүү хөрвүүлэх: Энэ хуудас юу хийдэг вэ
Танд HSL өнгө өгөгдсөн гэж бодъё: ханасан байдал 100%, гэрэлтэл 50%, өнгөний голч (hue) 240°. Энэ хуудас дээр та тэр гурван утгыг оруулахад л хөдөлгөөнгүй хуудас тэр даруй түүнтэй тэнцэх HEX кодыг харуулна. HEX нь CSS болон дизайны хэрэгслүүдэд хаа сайгүй хэрэглэгддэг зургаан оронтой (эсвэл гурван оронтой товчилсон) тэмдэглэгээ бөгөөд жишээ нь #1E90FF гэх мэт. Та HSL утгуудыг бичиж оруулах эсвэл өнгө сонгогчоос сонгох үед HEX код нь шууд шинэчлэгддэг.
Энэ хуудас юугаараа онцлог вэ
Энэ хуудас нь зөвхөн HSL-ээс HEX рүү хөрвүүлэхэд зориулагдсан. HSL бол хүний өнгөний тухай ойлголтод зориулагдсан өнгөний загвар юм. Гэрэлтэлтийг (lightness) өөрчлөхөд голч (hue) хэвээр үлддэг тул палитр болон сэдэв үүсгэхэд маш тохиромжтой. HEX нь эсрэгээрээ RGB тэмдэглэгээний зургаан оронтой (эсвэл гурван оронтой товчилсон) хэлбэр юм; энэ нь найман оронтой хэлбэрийг ашиглахгүй бол тунгалаг байдлын суваг (alpha) агуулдаггүй. HSL-ээс HEX рүү хөрвүүлэлт нь sRGB өнгөний хүрээнд (gamut) шууд бөгөөд алдагдалгүй (lossless) явагддаг. Энэ нь LAB эсвэл CMYK-тэй холбоотой хөрвүүлэлтүүдээс ялгаатай бөгөөд тэдгээр нь хүрээнээс гарсан өнгөнүүдийг тохируулж болдог.
Оролт, гаралт
Оролт: Хэрэглэгч 0-360 хооронд өнгөний голч (Hue), 0-100% хооронд ханасан байдал (Saturation), 0-100% хооронд гэрэлтэлт (Lightness) оруулна. Жишээ нь: 243, 75%, 59%.
Гаралт: Анхдагч гаралт нь HEX өнгөний код (жишээ нь: #4f46e5). Хэрэв өнгөний RGB суваг бүрийг нэг hex цифрээр илэрхийлж чадвал, хэрэгсэл нь гурван оронтой товчилсон хэлбэрийг (жишээ нь: #abc) харуулж болно. Бусад бүх өнгөний талбарууд (RGB, HSV, CMYK, LAB) нэгэн зэрэг шинэчлэгддэг.
Дүрэм ба онцгой тохиолдлууд
- Аливаа талбарыг засварлахад бусад бүх талбарууд шууд шинэчлэгддэг.
- Хэрэв HSL утгууд хүчинтэй хязгаараас гадуур байвал (голч 0-360, ханасан байдал 0-100%, гэрэлтэлт 0-100%) эсвэл зөв форматлагдаагүй бол хэрэгсэл дараах алдааны мэдээллийг харуулна: "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%." (Алдааны мэдээлэл нь англи хэлээр харагдана.)
- HSL-ээс HEX рүү хөрвүүлэлт нь үргэлж харагдах RGB хүрээнд үлддэг; энэ хөрвүүлэлтийн үед хүрээнээс гарах тохируулга хийгддэггүй.
- Дэлгэц дээр харагдах CMYK гаралт нь зөвхөн тооцоолсон утга бөгөөд мэргэжлийн хэвлэлийн утгуудаас ялгаатай байж болно.
- Бүх боловсруулалт таны хөтөч дээр шууд явагддаг; таны оруулсан зүйл хаана ч байршуулагдахгүй.
HSL загварын мөн чанар ба HEX тэмдэглэгээ
HSL загвар нь гурван хэмжээст орон зайг ашигладаг: өнгөний голч (hue) нь өнгөний дугуй дээрх байрлалыг 0-360 градусаар тодорхойлдог. 0° нь улаан, 120° нь ногоон, 240° нь цэнхэр. Ханасан байдал (saturation) нь өнгөний эрчмийг 0% (саарал) - 100% (цэвэр өнгө) хооронд тодорхойлдог. Гэрэлтэлт (lightness) нь өнгөний гэрлийн хэмжээг 0% (хар) - 100% (цагаан) хооронд тодорхойлдог. Энэ загвар нь дизайнеруудад өнгөний голчийг хадгалахын зэрэгцээ гэрэлтэлтийг өөрчлөх боломжийг олгодог тул WCAG хүртээмжийн харьцааг тохируулахад маш тохиромжтой.
HEX тэмдэглэгээ нь RGB утгуудыг 16-тын тооллын системээр илэрхийлдэг. Жишээ нь: #FF5733 гэдэг нь улаан (FF=255), ногоон (57=87), цэнхэр (33=51) гэсэн утгатай. Гурван оронтой товчилсон хэлбэр нь суваг бүр давхар цифрээс бүрдсэн тохиолдолд л боломжтой (жишээ нь: #abc нь #aabbcc-тэй тэнцүү). Зургаан оронтой хэлбэр нь 16.7 сая өнгийг дэмждэг бол гурван оронтой хэлбэр нь зөвхөн 4096 өнгийг дэмждэг.
Практик хэрэглээ: Дизайнерууд, хөгжүүлэгчид ба хүртээмж
Дизайнерууд HSL дээр өнгөний палитр бүтээж, дараа нь кодыг хэрэгжүүлэхэд HEX код хэрэгтэй болдог. Жишээ нь: та Figma дээр 243°, 75%, 59% гэсэн HSL утгатай өнгө үүсгээд, дараа нь CSS дээр #4f46e5 гэж бичих хэрэгтэй. Энэ хэрэгсэл нь тэр хөрвүүлэлтийг шууд хийдэг.
Фронт-энд хөгжүүлэгчид дизайны файлаас (Figma, Sketch) HSL утгыг хүлээн авч, түүнийг CSS HEX шинж чанарт хөрвүүлэх шаардлагатай болдог. Энэ хэрэгсэл нь хугацаа хэмнэж, гарын авлагын тооцооллоос зайлсхийхэд тусалдаг.
Хүртээмжийн мэргэжилтнүүд HSL-ийн гэрэлтэлтийг өөрчлөх замаар WCAG тодосгогч харьцааг тохируулдаг. Жишээ нь: та голчийг хадгалахын зэрэгцээ гэрэлтэлтийг 50% -аас 70% болгон нэмэгдүүлж, дараа нь үр дүнг HEX код болгон хөрвүүлж болно. Энэ нь хараа бэрхшээлтэй хэрэглэгчдэд зориулсан өнгөний сонголтыг хөнгөвчилдөг.
Хөрвүүлэлтийн алгоритм: HSL-ээс RGB, дараа нь HEX
Хөрвүүлэлт нь хоёр үе шаттай: эхлээд HSL-ээс RGB, дараа нь RGB-ээс HEX. HSL-ээс RGB хөрвүүлэлт нь дараах томьёог ашигладаг. Эхлээд ханасан байдал (S) ба гэрэлтэлт (L) -ийг 0-1 хоорондын бутархай болгон хөрвүүлнэ. Дараа нь хромыг (C) тооцоолно: C = (1 - |2L - 1|) × S. Дараа нь X = C × (1 - |(H/60) % 2 - 1|). Мөн m = L - C/2. Эцэст нь RGB утгуудыг голч (H) -ийн дагуу тохируулж, дараа нь m нэмнэ. Голч нь 0-60° хооронд байвал (R, G, B) = (C, X, 0), 60-120° хооронд (X, C, 0) гэх мэт.
RGB-ээс HEX хөрвүүлэлт нь илүү шууд: R, G, B утга бүрийг 16-тын тоонд хөрвүүлж, хоёр цифрээр төлөөлнө. Жишээ нь: (79, 70, 229) нь 4F46E5 болно. Хэрэв суваг бүр давхар цифрээс бүрдсэн бол (жишээ нь: #AABBCC) товчилсон гурван оронтой хэлбэр #ABC харуулагдана. Энэ тохиолдолд 4f нь давхар цифрээс бүрдээгүй тул товчлол үүсэхгүй.
Нийтлэг алдаа ба шийдэл
Хамгийн нийтлэг алдаа бол хувь тэмдэглэгээг (%) орхигдуулах явдал юм. Жишээ нь: 243, 75, 59 гэж бичих нь буруу, учир нь ханасан байдал ба гэрэлтэлт нь хувиар илэрхийлэгдэх ёстой. Хоёрдахь нийтлэг алдаа нь өнгөний голчийг 360-аас хэтрүүлэх явдал юм. 400° нь хүчинтэй биш, учир нь дугуй 360°-д дуусдаг. Гуравдугаар алдаа нь сөрөг утга оруулах явдал юм. Хэрэв та эдгээр алдааны аль нэгийг гаргавал хэрэгсэл нь англи хэлний алдааны мэдээллийг харуулна.
Өөр нэг чухал зүйл: CMYK утгууд нь зөвхөн тооцоолсон утга гэдгийг санах хэрэгтэй. Эдгээр нь дэлгэцэн дээр харагдах өнгөнөөс хэвлэсэн өнгө рүү шилжихэд тохирохгүй байж болно. Мэргэжлийн хэвлэлд зориулж CMYK профайл ашиглах шаардлагатай.
Түгээмэл асуултууд
1. Яагаад миний оруулсан HSL утга алдаа гаргаж байна вэ?
Та хувь тэмдэглэгээг (%) оруулсан эсэхээ шалгана уу. Ханасан байдал ба гэрэлтэлт нь 0-100% хооронд байх ёстой. Мөн өнгөний голч 0-360 хооронд байх ёстой. Жишээ зөв формат: 243, 75%, 59%.
2. Гурван оронтой HEX код яаж гарч ирдэг вэ?
Хэрэв RGB суваг бүр давхар 16-тын цифрээс бүрдсэн бол (жишээ нь: #AABBCC) хэрэгсэл нь гурван оронтой товчилсон хэлбэрийг (#ABC) харуулдаг. Энэ нь зөвхөн суваг бүр 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238, 255 гэсэн утгуудаас бүрдсэн үед л боломжтой.
3. HEX кодонд тунгалаг байдлын суваг (alpha) оруулж болох уу?
Энэ хэрэгсэл нь зургаан оронтой HEX код гаргадаг бөгөөд энэ нь тунгалаг байдлын суваг агуулдаггүй. Хэрэв танд тунгалаг байдлын суваг хэрэгтэй бол найман оронтой хэлбэрийг (жишээ нь: #4f46e580) ашиглах хэрэгтэй, гэхдээ энэ хуудас түүнийг дэмждэггүй.
4. HSL-ээс HEX рүү хөрвүүлэлт яагаад LAB эсвэл CMYK-ээс илүү энгийн вэ?
Учир нь HSL болон RGB нь нэг өнгөний орон зайд (sRGB) ажилладаг. LAB ба CMYK нь өөр өөр өнгөний хүрээтэй байдаг тул хөрвүүлэлт нь хүрээнээс гарсан өнгөнүүдийг тохируулах шаардлагатай болдог. HSL-ээс HEX рүү хөрвүүлэлт нь энэ тохируулгагүйгээр шууд явагддаг.
5. CMYK утгууд яагаад дэлгэцэн дээр харагдах өнгөнөөс ялгаатай байдаг вэ?
Дэлгэцэн дээр харагдах CMYK утгууд нь зөвхөн тооцоолсон утга юм. Мэргэжлийн хэвлэлд хэрэглэгдэх CMYK нь цаас, бэх, принтерийн тохиргооноос хамаардаг. Тиймээс энэ хэрэгсэл нь зөвхөн ойролцоо утгыг өгдөг.
6. Миний оруулсан өгөгдлийг сервер рүү илгээдэг үү?
Үгүй. Бүх боловсруулалт таны хөтөч дээр шууд явагддаг. Ямар ч өгөгдөл илгээгдэхгүй, байршуулагдахгүй.