Как конвертировать цветовые HEX-коды в RGB
HEX и RGB — это два способа записи точно одних и тех же цветов. Дизайнеры и разработчики постоянно жонглируют между двумя — HEX в CSS-таблицах, RGB в JavaScript-анимациях, HSL в дизайн-инструментах. Понимание их связи делает работу с цветами намного проще.
Как работает HEX
Цветовой HEX-код вроде #FF5733 — это 6-значное шестнадцатеричное число, представляющее красный, зелёный и синий каналы:
| Часть | Hex | Десятичное | Канал |
|---|---|---|---|
| FF | FF | 255 | Красный |
| 57 | 57 | 87 | Зелёный |
| 33 | 33 | 51 | Синий |
Каждый канал идёт от 00 (0, без цвета) до FF (255, максимальная интенсивность). Поэтому #FF5733 означает красный на полную, зелёный умеренный, немного синего — что даёт тёплый оранжево-красный.
Как конвертировать HEX в RGB
- Введите ваш HEX-код — введите или вставьте код вроде #FF5733 или используйте селектор цвета.
- Просмотрите RGB-значения — увидьте эквиваленты в красном, зелёном и синем (0–255 каждый).
- Скопируйте в любом формате — получите значения в
rgb(255, 87, 51), отдельных каналах или других форматах вроде HSL.
Распространённые цветовые коды
| Цвет | HEX | RGB |
|---|---|---|
| Белый | #FFFFFF | rgb(255, 255, 255) |
| Чёрный | #000000 | rgb(0, 0, 0) |
| Красный | #FF0000 | rgb(255, 0, 0) |
| Зелёный | #00FF00 | rgb(0, 255, 0) |
| Синий | #0000FF | rgb(0, 0, 255) |
| Жёлтый | #FFFF00 | rgb(255, 255, 0) |
Советы
- Используйте HEX в CSS —
color: #FF5733чище и более распространён, чемcolor: rgb(255, 87, 51)в таблицах стилей. - Используйте RGB для прозрачности — когда нужны полупрозрачные цвета, используйте
rgba(255, 87, 51, 0.5). Нет способа добавить альфа в стандартном HEX (хотя 8-значный HEX существует, поддержка браузеров варьируется). - 3-значное сокращение —
#F00эквивалентно#FF0000. Используйте его, когда у каждой пары идентичные цифры, чтобы выиграть в месте. - Селектор цвета быстрее — если вы ищете правильный цвет, используйте визуальный селектор, а не угадывайте HEX-значения. Скопируйте код, когда будете удовлетворены.
Часто задаваемые вопросы
Как вручную конвертировать HEX в RGB?
Разделите hex-код на три пары (например, #FF8800 становится FF, 88, 00). Конвертируйте каждую пару из системы счисления 16 в систему 10. FF = 255, 88 = 136, 00 = 0. Результат — rgb(255, 136, 0).
А как насчёт 3-значных HEX-кодов?
3-значный HEX — это сокращение, где каждая цифра удваивается. #F80 эквивалентно #FF8800. Большинство конвертеров автоматически обрабатывают оба формата.
Когда использовать HEX или RGB?
HEX более компактен и более распространён в CSS. RGB предпочтительнее, когда нужно манипулировать каналами по отдельности в коде или использовать rgba() для прозрачности. Оба представляют одинаковые цвета.
Что представляет символ # в HEX-коде?
Решётка (#) — это префикс, указывающий, что значение — это шестнадцатеричный цветовой код. Он не является частью самого значения. Некоторые инструменты принимают коды с решёткой или без неё.