HEX-ийг RGB руу хөрвүүлэгч

HEX-ээс RGB-д хөрвүүлэх үндсэн зарчим

HEX код нь RGB өнгөний загварыг 16-тын тооллын системээр илэрхийлэх товч хэлбэр юм. Энэ хуудас нь #4f46e5 гэх мэт зургаан тэмдэгт бүхий HEX кодыг шууд RGB тоон утга болгон хөрвүүлдэг. RGB гурван суваг тус бүр 0-ээс 255 хүртэлх бүхэл тоогоор илэрхийлэгддэг бөгөөд HEX-ийн хос тэмдэгт бүр нь уг сувгийн 16-тын утгыг заана.

Хөрвүүлэлт нь математикийн хувьд шууд байна: #4f46e5 гэдэг кодонд 4f нь улаан суваг, 46 нь ногоон суваг, e5 нь цэнхэр суваг болно. 16-тын 4f нь 4 × 16 + 15 = 79, 46 нь 4 × 16 + 6 = 70, e5 нь 14 × 16 + 5 = 229 болно. Ингээд RGB(79, 70, 229) гарна. Энэ хөрвүүлэлт бүрэн урвуу боломжтой учир ямар ч бүрхэгдэлт, тойролт явагдахгүй.

HEX-ийн # тэмдэгтийг оруулах эсэх нь хамаагүй. 1E90FF эсвэл #1E90FF хоёулаа зөв оролт болно. Гурван тэмдэгтийн товч хэлбэр (#abc) ашиглахад уг хэрэгсэл автоматаар тус тусын тэмдэгтийг хоёр дахин давтаж зургаан тэмдэгт болгоно. #abc нь #aabbcc болж, RGB утга нь r=170, g=187, b=204 гарах болно. Энэ дүрэм нь CSS-ийн гурван тэмдэгтийн HEX-ийн дүрэмтэй яг адилхан.

Хуудас нь зөвхөн зургаан эсвэл гурван тэмдэгтийн HEX кодыг хүлээн авдаг. Найман тэмдэгтийн HEX код (альфа сувагтай) энэ хуудсанд ажиллахгүй. Хэрэв хэрэглэгч буруу формат оруулбал "Enter a hex color like #4f46e5 or #abc." гэсэн алдаа харагдана.

RGB суваг ба тэдгээрийн математик үндэс

RGB загварын суваг бүр 8 битийн гүнтэй, нийт 256 түвшинтэй. Энэ нь нэг пикселд 16.7 сая өнгө (256 × 256 × 256) үзүүлэх боломжийг олгодог. HEX код нь уг утгыг 16-тын тоогоор илэрхийлдэг: 0-ээс 255 хүртэлх тоо нь 16-тын системд 00-өөс FF хүртэл бичигдэнэ.

00 нь 0, FF нь 255, 80 нь 128, 7F нь 127 гэх мэт. Жишээ нь #808080 нь саарал өнгө (R=128, G=128, B=128), #FFFFFF нь цагаан (R=255, G=255, B=255), #000000 нь хар (R=0, G=0, B=0) болно.

RGB сувгийн утга нь мониторын гэрлийн ялгарлын хүчийг шууд заадаг. Улаан суваг 255 байвал улаан LED бүрэн асах бөгөөд 0 байвал бүрэн унтарна. Энэ нь нэмэгдүүлэх өнгөний загвар (additive color model) гэж нэрлэгддэг: гурван өнгийн гэрэл нэгдэх тусам илүү цагаан өнгө рүү тэмүүлдэг. Гурвуулаа 0 бол хар, 255 бол цагаан болно.

Хүний нүд хамгийн их мэдэрдэг ногоон суваг (565 nm) байдаг. Энэ нь RGB утгын тооцоонд нөлөөлдөг, ялангуяа гэрлийн тодотгол (luminance) тооцох үед ногоон жин нь улаан, цэнхэрээс илүү байдаг. Luminance = 0.299 × R + 0.587 × G + 0.114 × B гэсэн стандарт томьёо ашиглагддаг.

HEX, RGB, HSL болон бусад форматуудын харилцаа

Энэ ганц хуудас HEX кодыг RGB хэлбэрт хөрвүүлэхээс гадна HSL, HSV, CMYK, LAB зэрэг бусад өнгөний формат руу нэгэн зэрэг хөрвүүлдэг. Аливаа талбарыг өөрчлөхөд бусад бүх талбар автоматаар шинэчлэгддэг. Энэ нь өөр өөр форматаар ажилладаг хэрэглэгчдэд хамгийн тохиромжтой арга юм.

HSL (Hue, Saturation, Lightness) нь өнгөний өнгөн хэсэг (0-360°), ханалт (0-100%), гэрэлтэлт (0-100%) гэсэн гурван хэмжигдэхүүнээр өнгийг тодорхойлдог. HSV (Hue, Saturation, Value) нь HSL-тэй ойролцоо боловч гэрэлтэлтийн оронд тодотгол (value) ашигладаг. CMYK (Cyan, Magenta, Yellow, Key/Black) нь хэвлэлтэнд хэрэглэгддэг хасах өнгөний загвар юм. LAB нь хүний нүдний өнгө мэдрэмжинд тохируулагдсан төхөөрөмжөөс хамааралгүй өнгөний загвар юм.

Эдгээр бүх хөрвүүлэлт таны хөтөч дотор шууд явагддаг бөгөөд таны оруулсан өгөгдлийг сервер рүү явуулахгүй. Энэ нь нууцлал, хурдны хувьд хамгийн сайн шийдэл юм.

HEX ба RGB: хэзээ алийг нь хэрэглэх вэ?

CSS дотор color: #ff6600 эсвэл color: rgb(255, 102, 0) гэх мэт хоёр хэлбэр хэрэглэгддэг. HEX нь илүү товч бөгөөд 6 тэмдэгтээр бичигддэг бол RGB нь 3 тоо, хашилт, функц зэргээр илүү урт харагддаг. Хоёулаа хөтөч дотор адилхан тайлагддаг тул ялгаа нь зөвхөн синтакс, уншихад хялбар байдалд оршино.

Хэрэв та canvas API, JavaScript-ийн өнгөний функц, эсвэл gradient тооцоолол хийх гэж байгаа бол RGB утга нь тоон хэлбэрээр хэрэгтэй болно. Тухайлбал, ctx.fillStyle = 'rgb(255,102,0)' гэж бичихэд хялбар. Харин CSS-ийн зарим хувилбар (CSS3-ын дараа) color: #ff6600 ба color: rgb(255, 102, 0) хоёуланг нь хүлээн авдаг.

HEX код нь түүхэн шалтгаанаар CSS-д давамгайлсан. Эхэн үед HTML-ийн өнгөний кодчилол нь 6 тэмдэгтийн 16-тын системийг ашигладаг байсан. #RRGGBB гэсэн формат нь rgb(R, G, B) хэлбэрээс илүү богино, санах ойд хадгалахад хялбар болсон.

Практик жишээ ба нийтлэг алдаа

Жишээ 1: Нийтлэг өнгөнүүд

Жишээ 2: Гурван тэмдэгтийн товч хэлбэр

#F00 гэх код нь #FF0000-тэй ижил утга (улаан). Хэрэв та #F гэж бичвэл буруу формат гэж үзнэ. Гурван тэмдэгтийн товчлол зөвхөн 0-9, A-F тэмдэгтүүдээс бүрдэх ба # дэмжигддэг.

Нийтлэг алдаа 1: HEX кодонд # тэмдэгтээс өөр тэмдэгт ашиглах. Зөвхөн # болон 16-тын цифрүүд (0-9, A-F) хэрэглэгдэнэ. G, Z, _ зэрэг тэмдэгтүүд ашиглавал алдаа гарна.

Нийтлэг алдаа 2: Зургаан биш, харин 4 эсвэл 5 тэмдэгт бүхий HEX код оруулах. #1234 нь зөв биш. Зургаан тэмдэгт (RRGGBB) эсвэл гурван тэмдэгт (RGB) байх ёстой.

Нийтлэг алдаа 3: Том жижиг үсгийн ялгааг тоохгүй байх. #4F46E5 ба #4f46e5 адилхан бөгөөд хөтөч том жижиг үсгийг ялгадаггүй.

Нийтлэг алдаа 4: HEX кодонд зай, цэг, таслал ашиглах. #4f 46 e5 эсвэл #4f,46,e5 зөв биш. HEX код нь ямар ч тусгаарлагчгүйгээр бичигдэх ёстой.

HEX кодын бодит хэрэглээ ба хүртээмж

Хүртээмжийн үүднээс HEX кодыг ашиглахдаа WCAG (Web Content Accessibility Guidelines) стандартыг санах хэрэгтэй. RGB сувгийн утгыг ашиглан тодосгогч харьцааг тооцож болно. Жишээ нь, #4f46e5 (RGB(79, 70, 229)) гэх өнгөний гэрлийн тодотгол нь luminance = 0.299 × 79 + 0.587 × 70 + 0.114 × 229 = 89.8 орчим байна. Энэ нь хэт харанхуй биш ч, цагаан текстэн дээр хэрэглэхэд хангалттай тодосгогч өгөх эсэхийг шалгах хэрэгтэй.

WCAG AA стандартын хувьд энгийн текстэнд дор хаяж 4.5:1, том текстэнд 3:1 тодосгогч харьцаа шаардлагатай. Энэ харьцааг RGB утгуудаас тооцож болно. Тиймээс HEX-ээс RGB хөрвүүлэлт нь хүртээмжийн шалгалт хийх үндсэн эхлэл болдог.

Өнгөний онолын хувьд HEX код нь эсрэг өнгө, нөхөх өнгө олоход хэрэглэгддэг. Улаан (255, 0, 0) ба циан (0, 255, 255) нь нөхөх хос юм. HEX-ээр #FF0000 ба #00FFFF болно. Энэ нь график дизайн, вэб хөгжүүлэлтэд өнгөний зохицол бий болгох үндсэн арга юм.

FAQ

1. HEX кодонд # тэмдэгт байхгүй бол ажиллах уу? Тийм, ажиллана. #4f46e5 эсвэл 4f46e5 хоёулаа зөв оролт. Хэрэгсэл нь # тэмдэгтийг автоматаар хүлээн авдаг эсвэл үгүйг нь шалгадаг.

2. Гурван тэмдэгтийн HEX код яаж хөрвүүлэгдэх вэ? Гурван тэмдэгтийн товч хэлбэрийн үсэг бүр хоёр дахин давтагдана. Жишээ нь #abc нь #aabbcc болж, RGB утга нь r=170, g=187, b=204 гарна. Энэ нь CSS-ийн гурван тэмдэгтийн шортхэнд хэрэглэгддэг дүрэмтэй яг адилхан.

3. Найман тэмдэгтийн HEX код (альфа сувагтай) ажиллах уу? Энэ хуудас нь зургаан тэмдэгтийн (RRGGBB) ба гурван тэмдэгтийн (RGB) кодыг л хүлээн авдаг. Найман тэмдэгтийн код (RRGGBBAA) нь ажиллахгүй бөгөөд алдааны мэдээлэл харагдана.

4. RGB утга нь яагаад 0-255 хүртэл байдаг вэ? Энэ нь 8 битийн дижитал дүрслэлтэй холбоотой. 8 бит нь 2^8 = 256 утга илэрхийлэх чадвартай, учир нь 0-өөс эхэлдэг тул 0-255 гэсэн 256 утгыг хамардаг. Энэ нь мониторын LED-ийн гэрэл ялгаруулах түвшинг хянах боломжтой нарийвчлал юм.

5. HEX код ба CMYK хэрхэн холбогддог вэ? HEX нь RGB загварт суурилдаг, харин CMYK нь хэвлэлтэнд хэрэглэгддэг. Энэ хуудас HEX-ээс RGB-д шууд хөрвүүлээд, дараа нь бусад форматуудыг (CMYK зэрэг) гаргадаг. CMYK хөрвүүлэлт нь шууд биш, учир нь CMYK нь хэвлэх тоног төхөөрөмжөөс хамаардаг.

6. Хэрэв би #GGG гэж оруулбал юу болох вэ? GGG нь зөв HEX тэмдэгт биш (G нь 0-9 эсвэл A-F дотор орохгүй). Ингэвэл "Enter a hex color like #4f46e5 or #abc." гэсэн алдааны мэдээлэл харагдана.