Генератор цветовой палитры
Выберите или введите базовый цвет — этот инструмент преобразует его в HSL и создаёт на его основе три готовые палитры: комплементарную, аналоговую и триадную, — чтобы вы могли быстро подобрать цветовые сочетания для дизайна. Нажмите на любой образец, чтобы скопировать его hex-код.
Комплементарная
Аналоговая
Триадная
Как это работает
Цвета преобразуются в HSL (оттенок, насыщенность, светлота), благодаря чему новые цвета можно получить простым поворотом оттенка. Комплементарная палитра добавляет цвет, расположенный точно напротив на цветовом круге (+180°); аналоговая палитра добавляет два соседних оттенка (±30°); триадная палитра добавляет два оттенка, равномерно распределённых по кругу (+120° и +240°).
Совет
Нажмите на любой образец, чтобы скопировать его hex-код в буфер обмена — удобно вставлять прямо в свой дизайн-инструмент или CSS.
Какую палитру выбрать?
Комплементарные палитры создают яркий контраст и хорошо подходят для одного акцентного цвета; аналоговые палитры выглядят спокойно и слаженно, отлично подходят для фонов и градиентов; триадные палитры яркие и сбалансированные — пригодятся, если нужны три одинаково заметных цвета.
Больше инструментов в этой категории
Калькулятор экспозиции
Находите эквивалентные значения экспозиции для диафрагмы, выдержки и ISO.
Калькулятор соотношения сторон
Пропорционально масштабируйте изображение или видео и находите упрощённое соотношение.
Генератор CSS-градиентов
Создайте линейный или радиальный CSS-градиент и скопируйте готовый код.
Проверка контраста
Проверьте, соответствуют ли цвет текста и фона рекомендациям WCAG по контрасту.
Конвертер цветовых форматов
Мгновенно конвертируйте любой цвет между HEX, RGB, HSL и CMYK — с копированием каждого формата одним кликом.
Генератор типографической шкалы
Создайте гармоничный набор размеров шрифта на основе базового размера и коэффициента масштаба — готовый для копирования в виде CSS-переменных.