Графика / Цвет

Генератор цветовых палитр: гармоничные схемы в один клик

Создавайте цветовые палитры на основе теории цвета: аналоговые, комплементарные, триадные, раздельно-комплементарные, монохромные или случайные — от трёх до восьми цветов. Фиксируйте понравившиеся цвета и создавайте остальные заново, проверяйте контраст каждого цвета с белым и экспортируйте палитру как переменные CSS, конфигурацию Tailwind, JSON, hex-коды или PNG.

Генератор цветовых палитр: гармоничные схемы в один клик: Каждая палитра начинается с базового оттенка: он берётся из зафиксированного цвета, если такой есть. Остальные оттенки размещаются по выбранному правилу: шаг 30° для аналоговой схемы, противоположный оттенок для комплементарной, шаг 120° для триадной, по 150° в обе стороны для раздельно-комплементарной или один оттенок от тёмного к светлому для монохромной. Светлота и насыщенность меняются так, чтобы в наборе были светлые, средние и тёмные цвета. Для каждого цвета показывается коэффициент контрастности WCAG с белым. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Инструмент для цветовых палитрЛокальная обработка

Полностью работает в браузере

Или нажмите пробел. Заблокируйте цвета, которые хотите сохранить.

#64A6F52.5:1 на белом фоне
#382B9D10.5:1 на белом фоне
#772BB77.5:1 на белом фоне
#BE4BBA4.3:1 на белом фоне
#E0367B4.2:1 на белом фоне
:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

Использование палитры

Распространённое соотношение — около 60% одного нейтрального цвета, 30% второго и 10% акцентного, поэтому самый яркий цвет используют умеренно — для кнопок и выделений.

Контраст

4.5:1 — минимальное значение WCAG AA для обычного текста, а 3:1 — для крупного; значение 7:1 соответствует уровню AAA.

Как пользоваться

  1. Выберите гармонию и количество цветов.
  2. Нажимайте «Создать» или пробел, пока результат вам не понравится; фиксируйте цвета, которые хотите сохранить.
  3. Скопируйте палитру в виде кода или скачайте её как PNG.

Конфиденциальность и ограничения

Всё создаётся в вашем браузере.

Похожие инструменты

Извлечение палитрыCSS-градиентЦвета TailwindСоздатель шаблонов RobloxРедактор скинов Minecraft

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

Как сохранить понравившийся цвет?

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

Можно ли использовать цвет моего бренда?

Да: нажмите на образец, задайте ему любой цвет, зафиксируйте его и создайте остальные цвета вокруг него.

Будет ли текст на палитре читаемым?

На каждом образце показан коэффициент контрастности с белым. Согласно WCAG, для обычного текста требуется значение не менее 4.5:1, поэтому на цвете с меньшим показателем нужен тёмный текст.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен