HEX кодът опакова три 8-битови числа в шест шестнадесетични цифри. Конвертирането от HEX в RGB означава разделяне на тези цифри по двойки и тълкуване на всяка двойка като десетично число между 0 и 255 — точно стойностите, които очакват CSS, Figma и графичните редактори.
Как работи преобразуването от HEX към RGB
- Премахни водещото # и, ако кодът е само с три цифри, удвои всяка: #f53 става #ff5533.
- Раздели шестте цифри на три двойки — RR, GG и BB.
- Прочети всяка двойка като число в основа 16 и го конвертирай в основа 10: FF става 255, 57 става 87, 33 става 51.
- Запиши трите резултата като rgb(R, G, B).
Работещ пример
Тази конверсия е точна. HEX и RGB описват едни и същи sRGB стойности в различна нотация, така че нищо не се закръгля или губи в нито една посока.
HEX и RGB обяснени
Какво е HEX?
HEX кодът е шестцифрено шестнадесетично число, което съхранява червения, зелен и син канал на цвета след водещ #. Всяка двойка цифри отговаря за един канал, от 00 (липса) до FF (пълно), което дава същите 16.7 милиона цвята като RGB, но в по-кратка нотация. HEX е по подразбиране в CSS, дизайн инструменти и бранд гайдове.
- Синтаксис:
- #RRGGBB
- Обхват:
- 00–FF за канал
- Подходящо за:
- CSS, предаване на дизайн, бранд гайдове
Какво е RGB?
RGB описва цвета като три светлинни канала — red, green и blue — всеки от 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) |