Генератор цветовых палитр
Выберите базовый цвет и мгновенно создавайте гармонии из теории цвета — комплементарные, аналогичные, триаду, тетраду, раздельно-комплементарные и монохромные — в виде живых образцов, которые можно скопировать как HEX, RGB, HSL, CSS-переменные или конфигурацию Tailwind.
Комплементарные
Базовый цвет и его противоположность на круге (тон + 180°) — сочетание с наибольшим контрастом.
Аналогичные
Базовый цвет в окружении двух соседей на круге (тон ± 30°) — спокойная, цельная схема.
Триада
Три цвета, равномерно расположенные через 120° (тон, +120°, +240°) — яркие, но сбалансированные.
Тетрада (прямоугольник)
Четыре цвета, образующие прямоугольник на круге (тон, +90°, +180°, +270°) — две комплементарные пары.
Раздельно-комплементарные
Базовый цвет плюс два цвета по обе стороны от его комплемента (тон +150° и +210°) — сильный контраст, который легче сбалансировать.
Монохромные
Один тон, представленный как переход по светлоте от светлого к тёмному — легко гармоничная шкала.
Экспорт палитры
Скопируйте выбранную гармонию как готовые к вставке пользовательские свойства CSS или конфигурацию цветов Tailwind.
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}О генераторе цветовых палитр
Генератор цветовых палитр превращает один базовый цвет в набор сочетающихся цветов, используя геометрию цветового круга. Гармонии из теории цвета — это просто заданные отношения между тонами: цвета, расположенные напротив друг друга, рядом друг с другом или равномерно распределённые по кругу. Этот инструмент берёт ваш базовый цвет, считывает его тон, насыщенность и светлоту (HSL) и поворачивает тон на фиксированные значения, создавая шесть классических схем — комплементарную (тон + 180°), аналогичную (тон ± 30°), триаду (120° друг от друга), тетраду или прямоугольник (90° друг от друга), раздельно-комплементарную (по обе стороны от комплемента) и монохромную (один тон, разная светлота). Каждая палитра показана как живые образцы, чтобы вы видели отношения, а не просто читали числа, и у каждого цвета есть значения HEX, RGB и HSL, готовые к копированию. Когда схема вам нравится, экспортируйте её как пользовательские свойства CSS или конфигурацию цветов Tailwind и добавьте прямо в проект. Он создан для дизайнеров, разработчиков, иллюстраторов и всех, кто выбирает цвета для сайта, бренда, диаграммы, презентации или интерьера — быстрый способ перейти от одного любимого цвета к целой сбалансированной палитре.
Как пользоваться этим генератором
- 1 Выберите базовый цвет с помощью палитры выбора образца или введите любое hex-значение (например #3498DB или #39F) в поле.
- 2 Просмотрите шесть разделов гармоний — комплементарную, аналогичную, триаду, тетраду, раздельно-комплементарную и монохромную — каждый показан как живые цветовые образцы.
- 3 Скопируйте любой отдельный цвет как HEX кнопкой у каждого образца; на каждом образце также показаны соответствующие значения RGB и HSL.
- 4 Выберите палитру и формат в блоке экспорта, чтобы скопировать пользовательские свойства CSS или конфигурацию цветов Tailwind, затем вставьте их в свой проект.
Как работают цветовые гармонии (цветовой круг)
Каждая гармония — это поворот тона базового цвета по цветовому кругу в 360° при сохранении неизменных насыщенности и светлоты. В модели HSL (тон, насыщенность, светлота) это просто: меняется только тон. Комплементарная — тон + 180°. Два цвета расположены прямо напротив друг друга, давая самый сильный контраст. Аналогичная — тон − 30°, тон, тон + 30°. Соседние цвета, которые плавно перетекают и выглядят гармонично. Триада — тон, тон + 120°, тон + 240°. Три цвета в вершинах равностороннего треугольника: яркие, но сбалансированные. Тетрада (прямоугольник) — тон, тон + 90°, тон + 180°, тон + 270°. Две комплементарные пары для насыщенной четырёхцветной схемы. Раздельно-комплементарная — тон, тон + 150°, тон + 210°. Базовый цвет с двумя тонами, окружающими его комплемент — почти контраст комплементарной, но мягче. Монохромная — один тон на нескольких уровнях светлоты, от светлых оттенков до тёмных теней. Например, у базового цвета #3498DB тон около 204°. Его комплемент — 204° + 180° = 24° (оранжевый), его триадные партнёры находятся на 324° и 84°, а раздельные комплементы — на 354° и 54°. Вычисления выполняются в HSL и преобразуются обратно в HEX для каждого образца.
Часто задаваемые вопросы
Что такое комплементарный цвет?
Комплементарный цвет — это цвет, расположенный прямо напротив другого на цветовом круге, то есть поворот тона на 180°. Синий и оранжевый, красный и зелёный, жёлтый и фиолетовый — комплементарные пары. Поставленные рядом, они создают максимально возможный контраст, отчего каждый цвет кажется насыщеннее, поэтому комплементарные пары популярны для призывов к действию, акцентов и всего, что должно выделяться. Этот генератор находит комплемент, беря тон вашего базового цвета и прибавляя 180°.
Как составить цветовую палитру?
Начните с одного понравившегося базового цвета, а затем используйте отношения из теории цвета, чтобы вывести остальные, а не угадывать. Выберите гармонию под настроение: аналогичные или монохромные схемы кажутся спокойными и цельными, тогда как комплементарные, триадные и раздельно-комплементарные добавляют контраст и энергию. Держите насыщенность и светлоту согласованными, чтобы цвета воспринимались как единый набор, и ограничьтесь несколькими цветами плюс нейтральными. Этот инструмент автоматизирует процесс — введите базовый цвет, и он создаст шесть готовых палитр, которые можно скопировать как HEX, RGB, HSL, CSS-переменные или конфигурацию Tailwind.
Что такое триадная цветовая схема?
Триадная цветовая схема использует три цвета, равномерно распределённые по цветовому кругу, на 120° друг от друга — например красный, синий и жёлтый. Триадные палитры яркие и полны контраста, но при этом остаются сбалансированными, потому что три тона равноудалены друг от друга. Распространённый приём — дать одному цвету доминировать, а два других использовать как акценты. В этом генераторе триадная палитра — это ваш базовый цвет плюс тона на +120° и +240°.
Что такое аналогичная цветовая схема?
Аналогичная цветовая схема использует цвета, расположенные рядом на круге, обычно в пределах примерно 30° от базового тона — например синий, сине-зелёный и зелёный. Поскольку тона очень близки, аналогичные палитры выглядят плавными, естественными и гармоничными, поэтому они так часто встречаются в природе (закаты, листва, океан). У них меньше контраста, чем у комплементарных схем, поэтому полезно выбрать один доминирующий цвет. Этот инструмент строит аналогичную палитру из тонов на −30°, базового цвета и +30°.
Связанные инструменты дизайна и цвета
Генератор палитр естественно сочетается с конвертером цвета для перевода любого образца между HEX, RGB, HSL, HSV и CMYK, проверкой контраста для уверенности, что выбранные цвета читаемы и соответствуют WCAG, генератором CSS-градиентов для смешивания цветов палитры в плавные фоны и калькулятором соотношения сторон для остальной части вашего дизайн-процесса.