Что означает web-safe

Название относится к эпохе ограниченных палитр, когда произвольный цвет мог заменяться близким оттенком или имитироваться чередованием пикселей. Набор web-safe помогал уменьшить такие различия в определённых условиях отображения.

Это историческая совместимость, а не обещание одинаковой цветопередачи на любом устройстве. Экран, яркость, профиль и окружающее освещение влияют на восприятие. Даже одинаковый цифровой код не делает два разных монитора физически одинаковыми.

Для современного проекта не обязательно ограничиваться этим набором. Если в старом техническом задании есть требование «только безопасные цвета», уточните, какое конкретное оборудование или ограничение оно должно поддерживать.

Как устроены HEX и RGB

В шестизначной записи HEX три пары обозначают красный, зелёный и синий каналы. Например, #336699 соответствует rgb(51 102 153). Короткая форма #369 раскрывается повторением каждой цифры, а не добавлением нулей.

Для web-safe каждый канал берёт одно из шести значений. Получается 6 × 6 × 6 = 216 комбинаций. Это математический набор, а не подборка цветов, которые обязательно красиво сочетаются друг с другом.

HEXRGB
000
3351
66102
99153
CC204
FF255

Современные варианты записи описаны в справочнике цветов CSS. Выбирайте формат, который понятен вашей команде и подходит используемым инструментам.

Полная таблица 216 цветов

Ниже представлены все комбинации набора. Надпись внутри каждого образца содержит его HEX-код; цвет текста выбран для читаемости подписи и не является частью самой палитры. При переносе значения копируйте код с символом решётки.

Открыть все 216 цветов
#000000#000033#000066#000099#0000CC#0000FF#003300#003333#003366#003399#0033CC#0033FF#006600#006633#006666#006699#0066CC#0066FF#009900#009933#009966#009999#0099CC#0099FF#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF#330000#330033#330066#330099#3300CC#3300FF#333300#333333#333366#333399#3333CC#3333FF#336600#336633#336666#336699#3366CC#3366FF#339900#339933#339966#339999#3399CC#3399FF#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF#660000#660033#660066#660099#6600CC#6600FF#663300#663333#663366#663399#6633CC#6633FF#666600#666633#666666#666699#6666CC#6666FF#669900#669933#669966#669999#6699CC#6699FF#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF#990000#990033#990066#990099#9900CC#9900FF#993300#993333#993366#993399#9933CC#9933FF#996600#996633#996666#996699#9966CC#9966FF#999900#999933#999966#999999#9999CC#9999FF#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF

Чтобы получить RGB, переведите каждую пару по таблице выше. Например, FF, CC и 00 дают 255, 204 и 0. Наличие оттенка в справочнике ничего не говорит о его пригодности для мелкого текста на выбранном фоне.

Не нужно использовать много образцов одновременно. Таблица помогает найти значение, а визуальную систему создают назначение цветов, композиция и проверка сочетаний.

Как подобрать приятные сочетания

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

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

Проверьте палитру вместе с фотографиями и логотипом. Цветовое окружение меняет впечатление: одно и то же значение может выглядеть мягким на одном фоне и резким на другом.

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

Как проверить читаемость

Контраст оценивается для пары «передний план — фон». В критерии WCAG AA для обычного текста указан минимум 4,5:1, для крупного — 3:1 с оговорёнными определениями и исключениями. Полные условия приведены в документации W3C.

Проверяйте реальный фон, особенно при прозрачности, градиенте и фотографии. Цвет поверх изображения может быть читаемым в одном месте и исчезать в другом. Для важной надписи иногда нужна отдельная подложка.

Не обозначайте ошибку или выбранное состояние только оттенком. Добавляйте текст, значок или другой различимый признак. Палитра должна работать и для людей, которые воспринимают цвета иначе.

Как закрепить палитру в проекте

Сохраните цвета как именованные переменные или стили: например, цвет основного текста и цвет действия. Это удобнее набора случайных HEX-кодов в разных файлах. При изменении темы вы сможете управлять системой последовательно.

Проверьте обычное состояние, наведение, фокус, ошибку и недоступный элемент. Тёмная тема требует отдельной проверки сочетаний, а не простого инвертирования всех значений. Не забывайте про изображения и сторонние виджеты.

Перед запуском посмотрите страницы на нескольких экранах и при увеличенном масштабе. Такая проверка не гарантирует абсолютного совпадения цветопередачи, но помогает обнаружить явные проблемы чтения и несогласованность оформления.

SEO-продвижение вашего сайта

Чтобы отдельные изменения работали на привлечение клиентов, объедините семантику, контент и технические задачи в общий план. На странице SEO-продвижения сайтов описаны состав работ и порядок сотрудничества.

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

Обязательно ли выбирать из 216 цветов?

Нет, если у проекта нет отдельного требования к старой ограниченной среде. Современный CSS поддерживает гораздо больше вариантов цвета.

Безопасный цвет всегда хорошо читается?

Нет. Читаемость зависит от сочетания текста и фона, размеров и начертания. Контраст нужно проверять отдельно.

Можно ли использовать HEX и RGB вместе?

Да. Это способы записи цвета. Для удобства поддержки лучше договориться о принятом в проекте стиле и хранить роли в общей системе.