Softonic

Генератор триадных цветов

Шаг 1 / 2
Далее

Триадная палитра строится на трёх цветах, отстоящих друг от друга на 120° по цветовому кругу; красный, жёлтый и синий, знакомые со школы, и есть классический пример. Результат получается сбалансированным и энергичным, но без хаоса. Выберите любой базовый цвет в палитре: генератор переведёт его в HSL, повернёт оттенок ровно на +120° и +240°, не трогая насыщенность и светлоту, и покажет три образца с их HEX-кодами. Кликните по образцу, чтобы скопировать код.

Как формируется палитра

  1. 1

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

    С помощью палитры выберите оттенок, вокруг которого будет построена схема.

  2. 2

    Рассчитываются два партнёра

    Инструмент поворачивает оттенок на +120° и +240° в пространстве HSL; насыщенность и светлота остаются одинаковыми, поэтому триада выглядит цельно.

  3. 3

    Смотрите HEX-коды

    Base, Triadic +120° и Triadic +240° выводятся рядом, каждый образец подписан шестизначным HEX-значением.

  4. 4

    Кликните, чтобы скопировать

    Один клик по образцу копирует его HEX-код в буфер обмена: вставляйте в CSS, конфиг Tailwind или ваш графический редактор.

Почему триадные палитры выглядят сбалансированно

Три цвета на равных расстояниях по цветовому кругу не делят соседних оттенков: они сильно контрастируют, а интервал 120° избавляет от лобового столкновения, характерного для прямых комплементарных пар (разнесённых на 180°). Глаз читает их как разные, но гармоничные.

Математика за образцами

Генератор переводит ваш HEX-цвет в HSL, прибавляет к оттенку 120° и 240° и конвертирует обратно. Поскольку меняется только оттенок, три цвета всегда имеют одинаковую насыщенность и светлоту. Забавный побочный эффект: поворот ровно на 120° равен циклической перестановке красного, зелёного и синего каналов, поэтому партнёрами #6366F1 (цвета по умолчанию) будут #F16366 и #66F163, те же три пары байтов в другом порядке.

Примеры триад, которые выдаёт этот инструмент:

База Triadic +120° Triadic +240°
#FF0000 (красный) #00FF00 #0000FF
#6366F1 (индиго) #F16366 #66F163
#E67E22 (оранжевый) #22E67E #7E22E6
#0EA5E9 (небесно-голубой) #E90EA5 #A5E90E
#2ECC71 (изумрудный) #712ECC #CC712E

Как использовать триаду и не переборщить

Три ярких оттенка на полной насыщенности, это перебор. Проверенная схема:

  • Один доминирующий (60%) для основного интерфейса.
  • Один вторичный (30%) для акцентов и разделов.
  • Один ударный (10%) для ключевых интерактивных элементов.

Второй рычаг: начать с приглушённой базы. Оба партнёра наследуют её насыщенность, поэтому мягкая база даёт мягкую триаду.

Триада и другие гармонии

Гармония Структура Ощущение
Комплементарная 2 цвета, через 180° Высокий контраст, броско
Аналоговая 3 цвета, соседние Спокойно, цельно
Триадная 3 цвета, через 120° Сбалансированно, энергично
Тетрадная 4 цвета, прямоугольник Богато, труднее балансировать
Разделённая компл. База + 2 почти комплементарных Сильно и без конфликтов

Советы для дизайна интерфейсов

  • Проверяйте контраст каждой пары. Триадная палитра не гарантирует контраст WCAG AA для текста поверх цвета; проверяйте сочетания по отдельности.
  • Выберите один цвет для кнопок действия и держитесь его. Кнопки, скачущие между цветами триады, путают пользователей.
  • Используйте светлые и тёмные вариации, чтобы расширить палитру без четвёртого оттенка.
  • Тестируйте в тёмной теме. Триада, работающая на белом, может потерять различимость на тёмном фоне; скорректируйте светлоту.

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

Три равные доли цветового круга в 360° дают максимальное расстояние между оттенками, и ни один не доминирует. Меньший интервал даёт аналоговую гармонию; больший ломает равные расстояния и обычно превращается в схему разделённых комплементарных цветов.

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

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

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

Регистрация не нужна, и ничего не сохраняется. Цвет используется только для расчёта и показа палитры, а в пошаговом режиме он попадает и в URL страницы, так что палитру легко добавить в закладки или отправить кому-то.

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

Сжать GIF

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

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Генератор линованной бумаги

Создавайте линованную бумагу для печати бесплатно. Выберите узкую, широкую или стандартную линовку, задайте расстояние между строками в мм, размер листа и линию поля, затем распечатайте или скачайте SVG.

Инструмент доступен на других языках