HEX-код цвета: как работает и как подобрать свой

Дизайнер присылает макет, в стилях стоит #FF6600, а в комментариях просят сделать кнопку тем же оранжевым, только чуть темнее. HEX-код цвета это стандартная запись оттенка шестью символами после решётки, и в ней же обычно лежит ответ: код показывает, из чего цвет собран. Ниже разберём, как устроен формат, как узнать hex-код любого цвета с картинки или сайта и как подобрать оттенки для своего интерфейса, не полагаясь только на глаз.

Что такое HEX-код цвета

Экран собирает любой оттенок из трёх базовых лучей: красного, зелёного и синего. Каждому каналу отведён один байт, то есть 256 градаций от 0 до 255. Ноль означает, что луча в смеси нет, 255 что он светит на полную. Тройка чисел вроде 255, 102, 0 полностью описывает цвет, и такая запись называется RGB.

HEX это та же тройка, переведённая в шестнадцатеричную систему счисления. Основание 16 здесь не прихоть: байт распадается на две половины по четыре бита, каждая половина принимает 16 значений, и одна шестнадцатеричная цифра кодирует ровно одну половину. Выходят две цифры на канал и шесть на весь цвет, отсюда привычная форма #RRGGBB, где каждая пара это один байт.

• цифры 0-9 значат сами себя, дальше буквы: A это десять, B одиннадцать, C двенадцать, D тринадцать, E четырнадцать, F пятнадцать;
• пара 00 даёт ноль, FF даёт 255, а 80 даёт 128, середину шкалы;
• порядок каналов фиксированный: красный, зелёный, синий, как в записи rgb();
• решётка не часть числа, а метка формата: без неё CSS примет символы за строку и отбросит значение.

#FF6600

FF = 15 × 16 + 15 = 255   →  красный канал на максимуме
66 = 6 × 16 + 6 = 102     →  зелёный чуть выше середины
00 = 0                    →  синего в смеси нет

Итог: rgb(255, 102, 0), насыщенный оранжевый

Читать код удобно парами слева направо, как три независимые ручки громкости. Первая пара задаёт красную составляющую, вторая зелёную, третья синюю. Когда все три пары равны, например #666666, каналы уравновешены и цвет выглядит нейтральным серым. Для повседневных задач арифметика не обязательна: конвертер HEX в RGB переводит код в десятичные числа, конвертер RGB в HEX возвращает обратно, и цвет при этом не меняется, меняется только форма записи.

Короткая форма из трёх цифр

Если обе цифры каждой пары совпадают, код сжимается вдвое: #FF6600 превращается в #F60, потому что F разворачивается в FF, 6 в 66 и 0 в 00. Условие жёсткое: у #124578 пары не дублируются, короче его записать нельзя. Короткая форма покрывает 16³ = 4096 цветов, полная 16⁶ = 16 777 216, и вся разница живёт именно в дублирующихся парах.

Регистр букв значения не имеет: #ff6600 и #FF6600 это один цвет, браузер сравнивает их без учёта регистра. В CSS-коде чаще пишут строчными, в каталогах и документации прописными, но это вопрос стиля проекта, а не синтаксиса.

Восьмая пара: прозрачность

После синего канала можно дописать ещё одну пару, получится формат #RRGGBBAA. Последняя пара задаёт непрозрачность: 00 полностью прозрачный цвет, FF полностью плотный. Шкала та же, от 0 до 255, поэтому 80 это 128 из 255, чуть меньше половины.

#FF660080

80 = 8 × 16 + 0 = 128
128 / 255 ≈ 0.50  →  цвет наполовину прозрачный

Эквивалент в CSS: rgba(255, 102, 0, 0.5)

Формы #RRGGBBAA и rgba() дают одинаковый полупрозрачный результат. Восьмизначный код компактнее и остаётся в hex-нотации, rgba() нагляднее: доля прозрачности видна сразу. Все актуальные браузеры поддерживают оба формата, выбор обычно диктуют правила проекта. Стандарт CSS Color 4 разрешает и сокращение #RGBA, но редакторы и генераторы поддерживают его неровно, в работе надёжнее шести- или восьмизначный код.

Как узнать HEX-код цвета с картинки или сайта

Для страницы в браузере кратчайший путь ведёт через инструменты разработчика. Откройте страницу, нажмите F12, найдите в панели стилей любое значение цвета и кликните по квадратному образцу рядом с ним: появится пипетка, которая снимает цвет с любой точки экрана.

1. Наведите пипетку на нужный пиксель: рядом с курсором виден увеличенный фрагмент и текущее значение.
2. Кликните: код подставится в стили, откуда его можно скопировать.
3. Чтобы узнать цвет с картинки, откройте файл в отдельной вкладке браузера и повторите те же шаги, пипетка работает по всему окну.
4. Для программы вне браузера сделайте скриншот и снимите цвет встроенной пипеткой графического редактора или системного диалога выбора цвета.

Есть маршрут и без DevTools. Диалог выбора цвета открывается прямо со страницы, например через онлайн-пипетку: в свежих версиях Chrome и Edge в системном окне есть собственная пипетка, снимающая цвет с экрана, а известный код, вставленный в поле, сразу возвращается в форматах HEX, RGB, HSL и HSV с копированием в один клик. Инструмент работает с кодами и с системным диалогом, целую картинку анализировать он не умеет и доминирующие оттенки из загруженного файла не извлекает.

Как подобрать свой цвет для интерфейса

Код редко живёт в одиночку. В интерфейсе у цвета есть роли, и каждой роли нужно своё значение.

• основной цвет несёт фирменный характер: кнопки, ссылки, активные состояния;
• дополнительный строит фон и подложки, обычно почти нейтральный, чтобы не спорить с текстом;
• акцентный один или два, для предупреждений, бейджей и действий, которые нельзя пропустить.

Баланс площадей удобно проверять правилом 60-30-10: около 60 процентов занимает доминирующий, чаще всего нейтральный цвет, около 30 процентов дополнительный и примерно 10 акцент. Тёплые оттенки, красные и оранжевые, читаются как энергия и зовут к действию, холодные синие и зелёные как спокойствие и надёжность, поэтому финансовые сервисы тяготеют к холодной гамме, а доставка еды к тёплой.

Сила одного точного кода видна на фирменных цветах брендов. По общедоступным каталогам брендовых стилей красный Coca-Cola это примерно #F40009, синий Facebook примерно #1877F2, зелёный Spotify примерно #1DB954. Значения стоит считать ориентиром: гайдлайны обновляются, оттенок зависит от носителя и версии руководства, и ни один из этих кодов не является официальной спецификацией на все случаи.

От базового кода выстраивается шкала: тёмный вариант для текста и рамок, основной для акцентов, светлый для подложек. Вручную такое подбирать долго, а генератор палитр строит из одного исходного цвета комплементарную, аналоговую и триадную схемы плюс наборы светлых и тёмных оттенков. Системный подход к сочетаниям разобран в статье о подборе цветовой палитры.

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

Ниже собраны коды, которые спрашивают чаще всего. Значения соответствуют стандартным именованным цветам CSS, копировать их можно как есть.

• #FFFFFF — белый, фон по умолчанию в большинстве интерфейсов;
• #000000 — чёрный, основной текст и тёмная тема;
• #808080 — серый, второстепенные подписи и иконки;
• #D3D3D3 — светло-серый, рамки и разделители;
• #A9A9A9 — тёмно-серый, неактивные элементы;

• #FF0000 — красный, ошибки и предупреждения;
• #800000 — бордо, тёмный акцент вместо чистого красного;
• #FFA500 — оранжевый, кнопки и уведомления;
• #FFD700 — золотистый, рейтинги и звёзды;
• #FFFF00 — жёлтый, подсказки и выделение.

• #00FF00 — лайм, чистый яркий зелёный;
• #008000 — зелёный, успех и подтверждение;
• #006400 — тёмно-зелёный, текст на светлой зелёной подложке;
• #00FFFF — циан, бирюзовые акценты;
• #008080 — морская волна, спокойный фон блоков.

• #0000FF — синий, ссылки по умолчанию;
• #000080 — тёмно-синий, заголовки и деловой стиль;
• #800080 — пурпурный, премиум и креатив;
• #FFC0CB — розовый, мягкие акценты;
• #A52A2A — коричневый, дерево, еда и крафт-стиль.

Контраст: читается ли текст на этом фоне

Красивый код не гарантирует читаемости. Один и тот же оттенок в одном месте отлично держит белую надпись, в другом превращает её в кашу. Мерой служит контраст, отношение яркости текста к яркости фона, а стандарт WCAG задаёт для него минимумы.

• AA для обычного текста: 4.5:1 и выше;
• AA для крупного текста, от 18 pt или от 14 pt полужирного: 3:1;
• AAA для обычного текста: 7:1, для крупного 4.5:1;
• для границ кнопок, полей ввода и иконок: 3:1.

Проверка занимает секунды: в проверке контраста вводятся коды текста и фона, сразу видны коэффициент и пройденные уровни. Методика расчёта и связь контраста с размером и насыщенностью шрифта разобраны в статье о контрастности текста на сайте.

Типичные ошибки

• код без решётки: FF6600 в CSS значение не изменит, синтаксис требует #FF6600;
• пять цифр: допустимы формы из трёх, шести и восьми знаков, так что #FF660 это опечатка, а не сокращение;
• путаница HEX и RGB: это один цвет в двух записях, rgb(255, 102, 0) и #FF6600 равны, и сравнивать их как разные оттенки не нужно;
• смешанные способы прозрачности: пара AA в #RRGGBBAA и четвёртое число в rgba() означают одно и то же, но восьмизначный код дробь 0.5 не примет, а rgba() не поймёт пару AA;
• переставленные каналы: #FF0066 это розово-малиновый, #6600FF фиолетовый, порядок всегда красный, зелёный, синий;
• копирование с мусором: пробел, кавычка или пометка из макета ломают значение, в поле должен попадать чистый код.

Чеклист выбора цвета для интерфейса

1. Проверьте контраст каждой пары текст и фон: для основного текста минимум 4.5:1.
2. Прогоните палитру в тёмной теме: оттенок, удачный на белом фоне, может слепить на чёрном.
3. Продублируйте смысл не только цветом: у дальтоников красный и зелёный могут сливаться, выручают иконка или подпись.
4. Оставьте один акцентный код и расходуйте его только на главные действия.
5. Посмотрите интерфейс на другом экране и в другом масштабе: цветовой профиль сдвигает оттенки.

Частые вопросы

Сколько всего цветов в HEX?

Шесть знаков дают 16⁶ вариантов, то есть 16 777 216 оттенков. Запас огромный: глаз различает заметно меньше, поэтому рядом в коде часто живут значения вроде #FF6600 и #FF6601, разницу между которыми увидеть невозможно.

Чем HEX отличается от RGB?

Только записью. RGB задаёт цвет тремя десятичными числами от 0 до 255, HEX переводит каждое в пару шестнадцатеричных цифр. #FF6600 и rgb(255, 102, 0) это один и тот же оттенок. HEX компактнее и копируется из любого редактора, RGB удобнее в вычислениях: каналы видны числами без перевода.

Что означает сокращение #F60?

Это #FF6600. Каждая цифра короткой формы удваивается: F становится FF, 6 становится 66, 0 становится 00. Разворот срабатывает только когда пары дублируются, поэтому произвольный цвет вроде #123456 сократить нельзя.

Как узнать цвет с картинки без установки программ?

Откройте изображение в новой вкладке браузера, нажмите F12 и снимите цвет пипеткой из панели стилей. Запасной вариант: скриншот экрана и встроенная пипетка любого графического редактора или системного диалога выбора цвета.

Почему напечатанный цвет не совпадает с HEX?

Монитор светится и работает в модели RGB, принтер красит и работает в CMYK с другим охватом. Яркие экранные оттенки, особенно насыщенные оранжевые и синие, красками воспроизводятся тусклее. Для печати цвет переводят в CMYK отдельно и проверяют на пробном оттиске.

Нужно ли писать код заглавными буквами?

Нет, регистр не влияет: #ff6600 и #FF6600 один цвет. Важно одно правило на проект: в коде и в документации пишите одинаково, чтобы поиск по коду не находил лишнего.