Шестнадцатеричные цвета в веб-дизайне

Каждый веб-дизайнер сталкивается с кодами вроде #FF5733 или #2C3E50. Эти шестнадцатеричные цветовые коды — компактный способ задания цветов с использованием той же системы счисления, которую программисты применяют для двоичных данных. Понимание HEX-цветов открывает возможности точного управления цветом в веб-дизайне.

Как работают HEX-цвета

Цветовая модель RGB

Цифровые экраны создают цвета путём смешивания красного, зелёного и синего света.

• Каждый канал имеет 256 уровней интенсивности (0–255)
• 0 = нет света, 255 = максимальная интенсивность
• 256 × 256 × 256 = 16,7 млн возможных цветов

Шестнадцатеричное представление

• 256 значений = FF в HEX (две шестнадцатеричные цифры)
• Компактнее десятичного формата (255,128,0 → FF8000)
• Легко набирать и запоминать

Пример: #FF5733

• FF = 255 красного (максимум)
• 57 = 87 зелёного (умеренно)
• 33 = 51 синего (мало)
• Результат: яркий оранжево-красный цвет

Распространённые значения цветов

Сокращённая запись HEX-цветов

CSS позволяет использовать 3-значную сокращённую форму, когда обе цифры в каждой паре совпадают.

Как это работает

• #RGB раскрывается в #RRGGBB
• Каждая цифра удваивается

Примеры

• #FFF = #FFFFFF (белый)
• #000 = #000000 (чёрный)
• #F00 = #FF0000 (красный)
• #369 = #336699 (стальной синий)

Ограничение

#FF5733 нельзя сократить (57 ≠ 55 или 77)

HEX с альфа-каналом (прозрачность)

8-значный HEX: #RRGGBBAA

Современный CSS поддерживает добавление альфа-канала:

• AA = непрозрачность (00 = прозрачный, FF = непрозрачный)
• #FF573380 = 50% прозрачный оранжево-красный

Распространённые значения альфа-канала

• FF = 100% непрозрачный
• CC = ~80% непрозрачный
• 80 = 50% непрозрачный
• 40 = 25% непрозрачный
• 00 = полностью прозрачный

Преобразование HEX в RGB

Метод

1. Разделите код на 2-значные пары
2. Переведите каждую из шестнадцатеричной в десятичную систему

Пример: #4A90D9

• 4A = 4×16 + 10 = 74 красного
• 90 = 9×16 + 0 = 144 зелёного
• D9 = 13×16 + 9 = 217 синего
• RGB: rgb(74, 144, 217)

Краткий справочник

• 00 = 0
• 40 = 64
• 80 = 128
• C0 = 192
• FF = 255

Преобразование RGB в HEX

Метод

1. Переведите каждое десятичное значение (0–255) в шестнадцатеричное (00–FF)
2. Объедините с префиксом #

Пример: rgb(100, 200, 150)

• 100 = 64 (6×16 + 4)
• 200 = C8 (12×16 + 8)
• 150 = 96 (9×16 + 6)
• HEX: #64C896

Быстрый расчёт

• Разделите на 16 = первая цифра
• Остаток = вторая цифра
• 100 ÷ 16 = 6 остаток 4 → 64

Использование HEX-цветов в CSS

Стандартное использование

color: #FF5733;

background-color: #2C3E50;

border: 2px solid #E74C3C;

Альтернативные форматы цвета в CSS

• rgb(255, 87, 51) — RGB в десятичной форме
• rgba(255, 87, 51, 0.5) — RGB с альфа-каналом
• hsl(9, 100%, 60%) — тон, насыщенность, светлота

Когда использовать каждый формат

• HEX: самый распространённый, компактный
• RGB/RGBA: при динамическом вычислении цветов
• HSL: при настройке светлоты/насыщенности

Популярные цветовые палитры в HEX

Material Design

• Основной синий: #2196F3
• Зелёный: #4CAF50
• Красный: #F44336
• Фиолетовый: #9C27B0

Flat UI Colors

• Бирюзовый: #1ABC9C
• Изумрудный: #2ECC71
• Мокрый асфальт: #34495E
• Ализариновый: #E74C3C

Заключение

Шестнадцатеричные цветовые коды — это компактный способ выражения цветов RGB с помощью системы счисления с основанием 16. Каждая пара цифр (00–FF) представляет интенсивность одного цветового канала от 0 до 255. Понимание HEX-цветов помогает веб-дизайнерам эффективно работать с палитрами, таблицами стилей и инструментами дизайна. Хотя инструменты могут выполнять преобразование автоматически, знание принципов работы HEX-цветов позволяет лучше управлять цветами и быстрее находить ошибки.

Похожие статьи

• Как конвертировать системы счисления: пошаговое руководство
• Двоичная, десятичная и шестнадцатеричная: понимание систем счисления
• Двоичная система в вычислительной технике
• Биты и байты