🎨
← Назад к руководствам

Веб-безопасные цвета: актуальны ли они в современном веб-дизайне?

· Теги: web-safe-colors, color-palette, web-design, css, color-history

Веб-безопасные цвета: актуальны ли они в современном веб-дизайне?

Если вы занимаетесь веб-дизайном достаточно давно, вы помните дни палитры «веб-безопасных» цветов. 216 цветов, которые обещали одинаковое отображение на любом мониторе и в любом браузере. Но в эпоху HDR-дисплеев, широкоформатных экранов и миллионов цветов, имеют ли веб-безопасные цвета всё ещё значение?

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

Что такое веб-безопасные цвета?

Веб-безопасные цвета — это набор из 216 цветов, разработанный в середине 1990-х годов, которые гарантированно отображались одинаково на разных компьютерных системах, браузерах и мониторах. В то время большинство компьютеров могли отображать только 256 цветов одновременно (8-битный цвет), и веб-безопасная палитра гарантировала, что цвета не будут дизеринговаться — процесса, при котором браузер аппроксимирует недоступные цвета, рассеивая пиксели доступных цветов в узоре.

Название «веб-безопасные» произошло от гарантии, что эти цвета будут выглядеть одинаково на ПК с Windows с VGA-монитором, Macintosh со встроенным CRT и Unix-рабочей станции с X11-дисплеем.

Палитра из 216 цветов: как она работает

Веб-безопасная палитра состоит из цветов, где каждый RGB-компонент может принимать только одно из шести значений: 0, 51, 102, 153, 204 или 255. В HEX это: 00, 33, 66, 99, CC, FF.

Поскольку каждый из трёх RGB-каналов имеет 6 возможных значений, общая палитра составляет 6 x 6 x 6 = 216 цветов.

Веб-безопасный HEX-цвет всегда выглядит так: #336699, #FFCC00, #996633.

Закономерность легко заметить: каждая двухзначная HEX-пара должна быть одним из шести значений (00, 33, 66, 99, CC, FF). Цвет #33AACC является веб-безопасным только если каждая пара входит в этот набор — так что #33AACC не является веб-безопасным, потому что AA не входит в число шести значений.

216 цветов исключают 40 из 256 системных цветов, поскольку разные операционные системы резервировали разные диапазоны для элементов системного интерфейса. Веб-безопасная палитра была разработана для одновременной работы на системах Windows, Mac и Unix.

Проблема, которую решали веб-безопасные цвета

В 1990-х годах большинство потребительских мониторов было настроено на 8-битную глубину цвета (256 цветов). Когда веб-сайт указывал цвет за пределами палитры браузера, браузер либо:

  1. Дизеринговал цвет — Смешивал пиксели доступных цветов для аппроксимации желаемого цвета. Результатом было пятнистое, зашумлённое изображение.
  2. Приводил к ближайшему цвету — Браузер переключался на ближайший доступный цвет, часто давая неожиданные результаты.

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

Актуальны ли веб-безопасные цвета в 2026 году?

Когда они абсолютно не имеют значения

Для общей веб-разработки сегодня веб-безопасные цвета по сути устарели:

Технология дисплеев ушла далеко вперёд от 8-битного цвета:

  • Каждый смартфон, выпущенный за последние 15 лет, поддерживает 24-битный цвет (16,7 миллионов цветов) или выше
  • Современные дисплеи поддерживают 30-битный (1 миллиард цветов) или даже HDR с 10-битными панелями
  • Даже бюджетные дисплеи комфортно покрывают цветовое пространство sRGB

Все современные браузеры корректно выполняют дизеринг:

  • Современные движки рендеринга плавно обрабатывают аппроксимацию цвета
  • Сглаживание и субпиксельный рендеринг устраняют артефакты дизеринга 90-х

Экосистема управления цветом зрелая:

  • ICC-цветовые профили обеспечивают точное воспроизведение цвета на разных устройствах
  • CSS и HTML изначально поддерживают полную гамму sRGB
  • Современные инструменты дизайна (Figma, Sketch, Adobe XD) по умолчанию используют полный sRGB

Ожидания пользователей изменились:

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

Когда они всё ещё имеют значение (редко)

Существуют нишевые сценарии, где веб-безопасные цвета всё ещё актуальны:

1. Устаревшие системы и встроенные дисплеи

  • POS-терминалы, банкоматы, киоски продажи билетов
  • Промышленные панели управления и встроенные Linux-дисплеи
  • Устройства для чтения E-ink и специализированное оборудование отображения
  • Некоторые публичные информационные дисплеи на транспорте и в государственных учреждениях

2. Проекционные дисплеи

  • Некоторые проекторы имеют ограниченный цветовой охват
  • Проекторы для конференц-залов часто отображают с меньшей глубиной цвета
  • Высокий уровень внешнего освещения в проекционных средах снижает воспринимаемую цветовую вариацию

3. Ретро и пиксель-арт дизайн

  • Намеренная ретро-эстетика, имитирующая веб-дизайн 90-х
  • Пиксель-арт игры с намеренными цветовыми ограничениями
  • Ностальгический или «бруталистский» веб-дизайн, вызывающий стиль раннего интернета

4. Телекоммуникации и приложения с низкой пропускной способностью

  • Некоторые специализированные терминалы в логистике и полевых службах
  • Приложения, написанные для крайне ограниченных сред

Для подавляющего большинства веб-разработчиков ни один из этих сценариев не применим.

Современные альтернативы веб-безопасным цветам

Вместо ограничения себя 216 цветами используйте эти стратегии для кросс-платформенной цветовой согласованности:

1. Работайте в цветовом пространстве sRGB

sRGB является стандартным цветовым пространством для веба. Все браузеры и большинство дисплеев (за исключением профессиональных широкоформатных мониторов) откалиброваны под sRGB. Работая в sRGB, вы гарантируете, что ваш дизайн будет выглядеть так, как задумано, на самом широком диапазоне устройств.

2. Используйте дизайн-токены с разумными границами

Современные дизайн-системы определяют цветовые шкалы с 10-12 остановками вместо полного спектра. Это обеспечивает согласованность, которую обещали веб-безопасные цвета, но с лучшими визуальными результатами:

--blue-50: #EFF6FF;    /* Самый светлый */
--blue-100: #DBEAFE;
--blue-200: #BFDBFE;
--blue-400: #60A5FA;
--blue-600: #2563EB;
--blue-800: #1E40AF;
--blue-900: #1E3A8A;   /* Самый тёмный */

3. Используйте перцептивно равномерные цветовые пространства

OKLCH и LAB обеспечивают согласованный перцептивный интервал, который веб-безопасная палитра не могла обеспечить. Два цвета с одинаковым значением светлоты в OKLCH будут выглядеть одинаково яркими — то, что веб-безопасная палитра никогда не гарантировала.

4. Тестируйте на реальных устройствах

Вместо того чтобы полагаться на теоретическую палитру, тестируйте свои цвета на реальных устройствах:

  • MacBook Pro или iMac с высококачественным дисплеем
  • Ноутбук среднего уровня на Windows
  • Современный Android-телефон и iPhone
  • Внешний монитор или проектор, если ваша аудитория их использует

Наследие веб-безопасных цветов

Хотя веб-безопасная палитра технически устарела, её наследие живёт в важных аспектах:

  • Ограниченные палитры всё ещё хорошая практика — Ограничение себя курируемым набором цветов (например, 10-12 в дизайн-системе) создаёт более целостные дизайны, чем использование произвольных цветов повсюду, даже если эти цвета не являются веб-безопасными.
  • Математика всё ещё элегантна — Формула 6 x 6 x 6 = 216 является прекрасным примером работы в рамках технических ограничений, навык, который остаётся ценным в веб-разработке.
  • Кросс-платформенное тестирование важно — Основная проблема, породившая веб-безопасные цвета (одинаковое отображение на разных платформах), всё ещё критична. Мы просто решаем её иначе сейчас.

Заключение

Веб-безопасные цвета — это увлекательная часть истории веб-разработки, но они больше не актуальны для современного веб-дизайна. Сегодняшние дисплеи, браузеры и инструменты управления цветом предоставляют вам полный спектр sRGB для работы — и даже больше, с поддержкой широкой гаммы и HDR.

Вместо того чтобы ограничивать себя 216 цветами, сосредоточьтесь на построении продуманных, доступных и согласованных с брендом цветовых систем. Используйте перцептивно равномерные цветовые пространства, такие как OKLCH, тестируйте на реальных устройствах и обеспечивайте доступность через проверку контрастности. Веб-безопасная палитра — это история: извлеките из неё уроки, но не проектируйте по ней.

Используйте наш бесплатный онлайн-конвертер цветов, чтобы проверить, является ли любой HEX-цвет веб-безопасным, и конвертировать между всеми современными цветовыми форматами.