Softonic

Поиск дополнительного цвета

Шаг 1 / 3

Введите базовый цвет

Поддерживаются #RGB, #RRGGBB, целочисленный rgb() и процентный hsl(). Расчёт остаётся в браузере; цвет входит в URL, отправляемый при запросе каждой страницы.

Дополнительные цвета находятся напротив друг друга на цифровом цветовом круге. Введите строго записанное значение HEX, RGB или HSL, чтобы вычислить дополнительный цвет HSL, сплит-комплементарные и тетрадные цвета, а также точные коэффициенты контраста WCAG. Все вычисления выполняются локально в браузере.

Как вычисляется дополнительный цвет

  1. 1

    Введите любой цвет

    Используйте #RGB, #RRGGBB, rgb() с целыми числами или hsl() с процентами. Перед расчётом проверяется всё значение.

  2. 2

    Поверните оттенок на 180°

    Дополнительный цвет по HSL: прибавьте к оттенку 180°, сохранив насыщенность и светлоту.

  3. 3

    Получите сплит-комплементарные цвета

    Два цвета под углом 150° и 210° от исходного, более мягкая альтернатива прямому дополнительному цвету, когда контраст слишком высок.

  4. 4

    Появляются подсказки о доступности

    Коэффициент контрастности пары на белом и чёрном фоне, а также предупреждение, если пара, скорее всего, не пройдёт WCAG AA при использовании как текст/фон.

Примеры

Базовый цвет HEX Дополнительный (HSL) HEX
Чистый красный #FF0000 Голубой #00FFFF
Коралловый #FF7F50 Аквамариново-бирюзовый #50D0FF
Лесной зелёный #228B22 Фиолетовый #8B228B
Королевский синий #4169E1 Золотисто-оранжевый #E1B941
Лавандовый #E6E6FA Бледно-жёлтый #FAFAE6

Показанные значения HEX, RGB и HSL описывают один и тот же цвет sRGB. Скопируйте результат для CSS или другого инструмента дизайна.

Дополнительный цвет по HSL и по RYB

  • HSL (экран): красный ↔ голубой, зелёный ↔ пурпурный, синий ↔ жёлтый. Это геометрия угла HSL, производного от sRGB и используемого в CSS, а не имитация смешения света.
  • RYB (художник): красный ↔ зелёный, синий ↔ оранжевый, жёлтый ↔ фиолетовый. Это традиционная учебная схема, а не прогноз смешения конкретных пигментов.

Инструмент использует только цифровую модель HSL. Пересчёта в художественную модель RYB нет, поскольку дополнительный цвет пигмента зависит от материалов и смешивания.

Где дополнительные цвета работают хорошо

  • Кнопки призыва к действию (CTA) на фирменном фоне. Сочетайте основной цвет с его дополнительным, чтобы кнопка выделялась.
  • Визуализация данных, графики с двумя сериями (прибыль и убыток, до и после).
  • Тени в иллюстрации: тень оранжевой тыквы выглядит убедительнее в синем, чем в более тёмном оранжевом.
  • Спортивный брендинг: многие команды используют дополнительные или сплит-комплементарные палитры (синий/оранжевый, красный/зелёный, жёлтый/фиолетовый).

Где они не работают

  • Основной текст на фоне: прямые дополнительные цвета (красный на зелёном, синий на оранжевом) неудобно читать. Сильная хроматическая аберрация вызывает зрительное утомление.
  • Сплошное использование: экран, наполовину красный и наполовину зелёный, утомляет. Используйте дополнительный цвет для акцентов (5–10% площади), а не как основной.
  • Цельность бренда: дополнительные цвета смотрятся пёстро. Большинство современных брендов используют монохромную или аналоговую палитру плюс один акцент, а не двойной дополнительный цвет.

Сплит-комплементарные цвета

Сплит-комплементарная схема (база + 150° + 210°) часто оказывается более практичным выбором:

  • Сохраняет высокий контраст с областью дополнительного цвета.
  • Избегает «вибрации» прямого дополнительного цвета.
  • Даёт два акцента для многослойного дизайна.

Пример: база = синий → дополнительный = оранжевый (резкий) → сплит-комплементарные = красно-оранжевый + жёлто-оранжевый (богаче).

Снижение насыщенности дополнительных цветов

Чистые дополнительные цвета редко смотрятся хорошо при полной насыщенности. Уменьшите насыщенность на 20–40 % у одного или обоих цветов, чтобы получить более спокойную палитру:

  • Красный (S=100%) + Голубой (S=100%) = «вибрирует».
  • Красный (S=60%) + Голубой (S=60%) = классическая плакатная палитра.
  • Фирменный кирпичный (S=45%) + Приглушённый бирюзовый (S=30%) = современно и практично.

Проверка перед использованием

  • Коэффициент контрастности пары: инструмент его показывает. Ниже 4,5:1 текст не проходит уровень AA.
  • Проверка на нейтральном фоне: дополнительные цвета выглядят по-разному на белом, сером и чёрном.
  • Пробная печать, если цель, печать: CMYK может смещать насыщенность и менять соотношения дополнительных цветов по сравнению с RGB.

Часто задаваемые вопросы

Они упорядочивают тона по разным соглашениям. HSL использует числовой угол, производный от sRGB, а традиционный круг RYB размещает основные краски художника на условной окружности. Ни один из них не предсказывает результат смешения реального света или красок.

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

Редко. Прямые дополнительные цвета обычно не проходят контраст WCAG при использовании как текст/фон, потому что у них близкая светлота. Чтобы пройти, увеличьте разницу в светлоте (тёмный текст на светлом фоне).

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

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Конвертер BBCode в HTML

Преобразуйте BBCode (разметку форумов) в чистый HTML. Поддерживает теги форматирования, списки, цитаты, код, изображения, ссылки и таблицы.

Генератор случайных цветовых палитр

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

Выбор цвета HEX

Выберите или введите HEX-цвет и получите RGB, HSL, примерный CMYK, относительную яркость и контраст с белым и чёрным.

Конвертер двоичного кода в ASCII

Вставьте двоичный код (байты через пробел или длинный поток битов) и получите текст ASCII, который он представляет. Поддерживает 7-битные и 8-битные кодировки.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.