RGB үш ондық арнаны 0‑ден 255‑ке дейін береді. HEX‑ке түрлендіру әр арнаны екі таңбалы оналтылық санға айналдырады, сол арқылы бүкіл түс бір ықшам токенге сыйып, әр браузер, дизайн құралы және стиль нұсқаулығы түсіне алады.
RGB-тан HEX-қа түрлендіру қалай жұмыс істейді
- Қызыл каналды алып, 16-ға бөл: бөлігі бірінші цифр, қалдық екінші цифр болады.
- 10-дан 15-ке дейінгі сандарды A-дан F-ге дейінгі әріптермен жазың — 255 → FF.
- Жасыл және көк үшін қайтала, бір таңбалы болса алдына нөл қос: 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 коды алдыңғы # таңбасымен бірге үш арнаның — қызыл, жасыл және көк — мәндерін сақтайтын алты таңбалы оналтылық сан. Әр жұп таңба бір арнаны білдіреді, 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 |