ПаветтаВеб-безопасные цвета
Веб-безопасная палитра — это 216 цветов, у которых каждый канал берёт одно из шести значений: 00, 33, 66, 99, CC или FF. Набор появился во времена мониторов с 256 цветами: только эти оттенки одинаково отображались в Windows и Mac без искажения.
Ближайший безопасный цвет
—
Все 216 цветов
Выгрузка
Откуда берутся ровно 216 цветов
Веб-безопасная палитра — это 216 цветов, у которых каждый канал берёт одно из шести значений: 00, 33, 66, 99, CC или FF. Шесть в кубе даёт 216 сочетаний, и все они одинаково отображались на мониторах с индексированной палитрой в двести пятьдесят шесть цветов. Остальные сорок ячеек система резервировала под собственный интерфейс, причём в Windows и на Mac под разные.
Инструмент показывает весь куб и подбирает ближайший веб-безопасный оттенок к любому введённому цвету. Расстояние считается по каналам, поэтому подобранный цвет всегда узнаваем, хотя и может отличаться на глаз.
Практический смысл палитры сегодня исторический: экраны давно показывают миллионы цветов, и ограничивать себя шестью ступенями на канал незачем. Пользу набор сохранил в двух местах — как быстрый источник трёхсимвольных записей вроде #3c9 и как ориентир при работе с очень старым оборудованием или индексированными форматами.
| Канал | Допустимые значения |
|---|---|
| Красный | 00 33 66 99 CC FF |
| Зелёный | 00 33 66 99 CC FF |
| Синий | 00 33 66 99 CC FF |
| Всего сочетаний | 6 × 6 × 6 = 216 |
Восемь бит, Netscape и общий куб
В начале девяностых видеокарты массовых компьютеров работали в восьмибитном режиме: на экране одновременно жили двести пятьдесят шесть цветов, и какие именно — задавала таблица палитры. Когда браузер показывал картинку с цветом вне палитры, система подменяла его ближайшим или имитировала точками, и изображение покрывалось рябью.
Куб из 216 оттенков предложили в Netscape около 1994 года как пересечение системных палитр Windows и Macintosh: эти цвета совпадали в обеих и потому отображались одинаково везде. Набор быстро стал негласным стандартом, и целое поколение дизайнеров подбирало цвета только из него.
Ограничение исчезло к началу двухтысячных вместе с распространением режимов True Color. Уже к 2000 году доля восьмибитных экранов упала до единиц процентов, и палитра перешла в разряд исторических. Название при этом осталось, и его до сих пор встречают в старых руководствах как обязательное требование. Любопытно, что шаг между значениями неровный по восприятию: разница между 00 и 33 глазу заметна сильнее, чем между CC и FF, потому что чувствительность к яркости нелинейна.
Когда палитра ещё пригодится
Введите свой цвет — инструмент покажет ближайший из палитры и его запись. Если нужен просто короткий шестнадцатеричный код для быстрой правки, берите цвет прямо из куба: любой из 216 сокращается до трёх символов, потому что каждая пара цифр в нём одинакова.
Держать современный сайт внутри этой палитры смысла нет: она заметно беднее по оттенкам и почти не содержит приглушённых тонов, из-за чего интерфейс выглядит по-девяностнически ярким. Берите её как справочник, а рабочие цвета подбирайте свободно.
Проверить контраст выбранной пары и подобрать компаньона помогут сочетание цветов и палитра оттенков.
Если работаете со старым форматом вроде GIF, палитра пригодится по прямому назначению: индексированное изображение хранит таблицу из ограниченного числа цветов, и подобранные из куба оттенки лягут в неё без потерь и без имитации точками. Название закрепилось так прочно, что требование «использовать только веб-безопасные цвета» встречается в технических заданиях до сих пор, хотя смысла в нём давно нет.
| Цветов в палитре | 216 |
| Значений на канал | шесть |
| Шаг между значениями | 51 или 33 в шестнадцатеричной |
| Системная палитра | 256 цветов |
| Резерв системы | 40 ячеек |
| Предложена в | Netscape, около 1994 |
| Потеряла смысл к | 2000-м |
| Короткая запись | всегда возможна |
Как пользоваться
Мониторов таких давно нет, и как ограничение палитра больше не нужна. Осталась её вторая роль — компактный набор предсказуемых цветов с круглыми кодами, который до сих пор удобен для быстрых прототипов, служебных пометок и заглушек. Ниже вся таблица с кодами HEX и RGB, поиск и подбор ближайшего безопасного цвета к любому вашему.
- Кликом копируется код. Фильтр сверху отбирает по группе цвета.
- Введите свой цвет — покажу ближайший безопасный и расстояние до него.
- Коды показываются в HEX или в RGB.
- Кнопкой выгрузки — переменными CSS или списком кодов.
Частые вопросы
Почему безопасных цветов именно 216
Каждый из трёх каналов принимает шесть значений, шесть в кубе — 216. Остальные 40 из 256 слотов системной палитры занимали цвета операционной системы, разные в Windows и в Mac, поэтому под общий набор их не отдавали.
Нужна ли эта палитра сегодня
Как ограничение — нет. Мониторы с 256 цветами вышли из обращения к середине двухтысячных, современные экраны показывают миллионы оттенков, а часть — расширенный цветовой охват. Практическая польза осталась в другом: коды здесь короткие и запоминаемые, поэтому набор удобен для черновиков, отладочной подсветки блоков и мест, где цвет неважен.
Правда ли, что эти цвета выглядят одинаково везде
Нет, и это распространённое заблуждение. Безопасная палитра гарантировала отсутствие дизеринга при 8-битном экране, но не совпадение цвета: без управления цветом один и тот же код на разных мониторах выглядит по-разному, потому что различаются профиль и охват. Точного совпадения круглые коды не дают — для этого нужны профили.
Что показывает расстояние до ближайшего безопасного цвета
Насколько цвет изменится при округлении к палитре. Считается евклидово расстояние по RGB. Значение до 20 глаз почти не замечает, от 20 до 40 разница видна при сравнении рядом, свыше 40 цвет заметно другой. Максимум для этой сетки — около 44, потому что шаг между соседними значениями канала равен 51.
Почему шаг между значениями равен 51
Потому что шестнадцатеричные 00, 33, 66, 99, CC, FF в десятичной системе дают 0, 51, 102, 153, 204, 255 — ровное деление отрезка 0–255 на пять частей. В hex это выглядит круглее, чем в десятичной записи, и отсюда пошло правило «повторяющиеся пары».
Все ли трёхсимвольные коды безопасны
Да, и это удобный признак. Сокращённая запись вроде #39c разворачивается в #3399cc, то есть каждый канал получает повторяющуюся пару из набора 0, 3, 6, 9, C, F — а это ровно шесть допустимых значений. Любой валидный трёхсимвольный код автоматически веб-безопасен.
Спросите нейросети об инструменте
Похожие инструменты
Гармоничные палитры по цветовому кругу: комплементарные, триада, аналоговые. С симуляцией дальтонизма и контрастом пар.
ОткрытьГенератор оттенков и тоновШкала от 50 до 950 по одному цвету: осветление, затемнение и приглушение. Контраст каждой ступени и выгрузка в CSS, SCSS и Tailwind.
ОткрытьПалитра flat-цветовГотовые палитры плоского дизайна: Flat UI и три ступени Material. Названия, коды, контраст текста и выгрузка в CSS.
ОткрытьПалитра из картинкиГлавные цвета фото или логотипа: от 3 до 10 оттенков с HEX и RGB, копирование, экспорт в CSS-переменные и проверка контраста с текстом.
ОткрытьГенератор случайных цветовСлучайный цвет или палитра из пяти с фиксацией удачных. Диапазоны тона, насыщенности и светлоты, пресеты пастели и тёмных.
ОткрытьПазлы онлайнПазл из своего фото или картинки галереи: 12–200 кусочков с выступами, стыковка в группы, образец, подсказка, таймер, ходы и рекорды; фото не покидает устройство.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.