RGB нь 0–255 хоорондох гурван аравтын сувгийг өгдөг. HEX-руу хөрвүүлэхдээ тус бүр сувгийг хоёр оронтой 16-н үндсэн тоогоор илэрхийлж, бүх өнгийг нэг шахсан тэмдэгт рүү оруулна — энэ нь бүх хөтөч, дизайн хэрэгсэл болон стийл удирдамжид ойлгомжтой.
RGB-г HEX-руу хэрхэн хөрвүүлдэг вэ
- Улаан сувгийг 16-аар хуваа: үржвэр нь эхний цифр, үлдэгдэл нь хоёр дахь цифр байна.
- 10–15 хүртэлх цифрүүдийг A–гаас F хүртэлх үсгээр бичнэ — 255 нь FF болдог.
- Ногоон ба цэнхэр сувгуудад давт: нэг цифртэй тоог эхэнд нь 0 тавьж нөхнө: 5 нь 05 болж хувирна.
- Гурван хосыг нийлүүлээд урд нь # тавь.
Ажлын жишээ
Нарийвчлал үндсэндээ яг — хэрэв сувгууд 0–255 хоорондох бүхэл тоонууд бол. rgb(79.5, 70, 229) шиг бутархай утгуудыг эхлээд ойролцоо бүхэл рүү хөрвүүлдэг, учир нь HEX дунд утга хадгалдаггүй.
RGB ба HEX тайлбарласан
RGB гэж юу вэ?
RGB нь өнгийг гурван гэрлийн сувгаар тодорхойлдог — улаан, ногоон, цэнхэр — тус бүр нь 0–255 хүртэл утгатай. Энэ нь дэлгэц хэрхэн ажилладагтай таарч байна: гурвын аль нь ч 255 байвал цагаан, бүгд 0 байвал хар болно. RGB нь өнгөөр тооцоолол хийх шаардлагатай үед тохиромжтой, мөн rgba() нь давхаргуудын тунгалаг байдлыг нэмдэг.
- Синтакс:
- rgb(R, G, B)
- Хүрээ:
- Сувгаар 0–255
- Хамгийн тохиромжтой:
- код, canvas, rgba()-тай тунгалаг байдал
HEX гэж юу вэ?
HEX код нь өнгийн улаан, ногоон, цэнхэр сувгийг удирдсан зургаан оронтой 16-н үндсэн тоо бөгөөд урьдчилсан # тэмдэгтэй байна. Нэг сугалаа нь нэг сувгийг илэрхийлж, 00 (өгөгдөлгүй)–FF (бүтэн) хүртэл утгатай тул RGB-ийн 16.7 сая өнгийг илэрхийлэх богино тэмдэглэгээ юм. HEX нь CSS, дизайн хэрэгсэл болон брэнд удирдамжийн хэвшмэл анхдагч формат юм.
- Синтакс:
- #RRGGBB
- Хүрээ:
- Сувгаар 00–FF
- Хамгийн тохиромжтой:
- CSS, загвар шилжүүлэг, брэнд удирдамж
RGB-г HEX-руу лавлах хүснэгт
Хамгийн түгээмэл CSS өнгөнүүд, RGB-аас HEX-руу хөрвүүлсэн.
| Өнгө | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |