HEX код нь гурван 8-бит тоог зургаан 16-н үндсэн цифрэнд багтаадаг. HEX-ийг RGB-т шилжүүлэх нь тэдгээр цифрүүдийг хос болгон хувааж, тус бүрийг 0–255 хоорондох аравтын тоогоор уншихыг шаарддаг — яг л CSS, Figma болон зураг засварлагчид хүлээдэг утгууд.
HEX-г RGB-руу хэрхэн хөрвүүлдэг вэ
- Урьдчилсан # тэмдэгийг хасаад, хэрвээ код зөвхөн 3 оронтой бол тус бүрийг давхарла: #f53 → #ff5533.
- Зургаан цифрийг гурван хос болгон хуваа — RR, GG, BB.
- Тус бүрийн хосыг 16-н үндсэн тоогоор уншиж аравтын системд хөрвүүл: FF → 255, 57 → 87, 33 → 51.
- Гурван үр дүнг rgb(R, G, B) хэлбэрээр бич.
Ажлын жишээ
Энэхүү хөрвүүлэлтийг яг таг гэж үзэж болно. HEX ба RGB нь ижил sRGB утгуудыг өөр тэмдэглэлээр илэрхийлдэг тул аль аль чиглэлд ямар ч тойрог, мэдээлэл алдагдахгүй.
HEX ба RGB тайлбарласан
HEX гэж юу вэ?
HEX код нь өнгийн улаан, ногоон, цэнхэр сувгийг удирдсан зургаан оронтой 16-н үндсэн тоо бөгөөд урьдчилсан # тэмдэгтэй байна. Нэг сугалаа нь нэг сувгийг илэрхийлж, 00 (өгөгдөлгүй)–FF (бүтэн) хүртэл утгатай тул RGB-ийн 16.7 сая өнгийг илэрхийлэх богино тэмдэглэгээ юм. HEX нь CSS, дизайн хэрэгсэл болон брэнд удирдамжийн хэвшмэл анхдагч формат юм.
- Синтакс:
- #RRGGBB
- Хүрээ:
- Сувгаар 00–FF
- Хамгийн тохиромжтой:
- CSS, загвар шилжүүлэг, брэнд удирдамж
RGB гэж юу вэ?
RGB нь өнгийг гурван гэрлийн сувгаар тодорхойлдог — улаан, ногоон, цэнхэр — тус бүр нь 0–255 хүртэл утгатай. Энэ нь дэлгэц хэрхэн ажилладагтай таарч байна: гурвын аль нь ч 255 байвал цагаан, бүгд 0 байвал хар болно. RGB нь өнгөөр тооцоолол хийх шаардлагатай үед тохиромжтой, мөн rgba() нь давхаргуудын тунгалаг байдлыг нэмдэг.
- Синтакс:
- rgb(R, G, B)
- Хүрээ:
- Сувгаар 0–255
- Хамгийн тохиромжтой:
- код, canvas, rgba()-тай тунгалаг байдал
HEX-г RGB-руу лавлах хүснэгт
Хамгийн түгээмэл CSS өнгөнүүд, HEX-аас RGB-руу хөрвүүлсэн.
| Өнгө | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |