Генератор дополнительного цвета
Найдите дополнительный цвет для любого базового цвета с помощью этого генератора. Введите 3- или 6-значный HEX-код: инструмент повернет его оттенок на 180 градусов на цветовом круге HSL, сохранив насыщенность и светлоту, а затем вернет базовый цвет и его дополнение в виде HEX-кодов. Идеально для дизайнеров и разработчиков, которым нужен контрастный акцент для кнопок, выделений, диаграмм и фирменной графики.
Часто задаваемые вопросы
Что возвращает генератор дополнительных цветов?
Он возвращает два цвета в виде шестизначных строчных HEX-кодов. Цвет 1 — это базовый цвет, а цвет 2 — его дополнение, то есть цвет, расположенный напротив него на цветовом круге.
Как рассчитывается дополнительный цвет?
Инструмент преобразует ваш HEX-код в HSL, добавляет 180 градусов к оттенку и сохраняет насыщенность и светлоту без изменений. Полученное значение преобразуется обратно в RGB и записывается в виде HEX-кода, поэтому дополнительный цвет имеет ту же яркость и насыщенность, что и базовый.
Какие форматы цветов можно вводить?
Введите 3- или 6-значный HEX-код с начальным символом # или без него, в верхнем или нижнем регистре, например #ff5733, FF5733 или #f00. Запись RGB и HSL, а также названия цветов не принимаются: сначала преобразуйте их в HEX с помощью конвертера цветов.
Почему цвет 1 немного отличается от введенного мной HEX-кода?
Базовый цвет преобразуется в HSL с целочисленными значениями оттенка, насыщенности и светлоты, а затем обратно в HEX, поэтому один из каналов может измениться на один шаг. Например, #ff5733 преобразуется обратно в #ff5833, а его дополнительный цвет — #33daff.
Какой цвет дополняет чистый красный?
Дополнительный цвет для #ff0000 — #00ffff, циан. Этот инструмент использует цветовой круг RGB, основанный на HSL и предназначенный для экранов: красный сочетается с цианом, а не с зеленым, как на традиционном круге художников.
Что происходит с черным, белым и серым цветами?
Нейтральные цвета имеют нулевую насыщенность, поэтому поворот оттенка ничего не меняет, и оба результата представляют собой один и тот же серый цвет. Если вам нужен заметный дополнительный цвет, выберите базовый цвет с некоторой насыщенностью.
Как использовать пару дополнительных цветов в дизайне?
Используйте один цвет для большей части поверхности, а дополнительный — умеренно для призывов к действию, выделений или данных, которые нужно подчеркнуть. Равное количество обоих цветов с максимальной насыщенностью создает зрительную вибрацию, поэтому для больших областей осветлите или затемните один из них.
Проверяет ли инструмент контрастность текста?
Нет, он только вычисляет пару цветов. Дополнительный цвет сохраняет светлоту базового, поэтому у двух цветов может быть схожая яркость и недостаточная контрастность для текста. Перед тем как размещать один цвет на другом, проверьте их с помощью средства проверки контрастности WCAG.
Можно ли ввести несколько цветов сразу?
Нет, за один запуск принимается ровно один HEX-код. Ввод с несколькими строками или дополнительным текстом отклоняется с сообщением об ошибке, поэтому запускайте инструмент отдельно для каждого базового цвета.
Совпадает ли результат с результатом генератора цветовых палитр?
Да. Этот инструмент выполняет тот же расчет, что и параметр «Дополнительный» в генераторе цветовых палитр, поэтому для одного и того же базового цвета оба инструмента всегда возвращают одинаковые два HEX-кода.