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 описва цвета като три светлинни канала — red, green и blue — всеки от 0 до 255. Това отразява как работят екраните: всички три на 255 дават бяло, всички на 0 дават черно. RGB е правилният избор, когато трябва да смяташ с цвят, а rgba() добавя прозрачност.
- Синтаксис:
- rgb(R, G, B)
- Обхват:
- 0–255 за канал
- Подходящо за:
- код, canvas, прозрачност с rgba()
Какво е HEX?
HEX кодът е шестцифрено шестнадесетично число, което съхранява червения, зелен и син канал на цвета след водещ #. Всяка двойка цифри отговаря за един канал, от 00 (липса) до FF (пълно), което дава същите 16.7 милиона цвята като RGB, но в по-кратка нотация. 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 |