tigtools

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

Выберите базовый цвет и цветовую гармонию, затем скопируйте палитру в формате, который использует ваш проект.

Работает в браузере Без регистрации

Палитра

  • #3366cc
  • #8c6500

Закреплённые цвета не меняются при смене базового цвета.

Экспортировать как

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

  1. Введите базовый цвет или выберите его. Кнопка «Новый случайный цвет» подберёт цвет за вас.
  2. Выберите гармонию. Вариант «Оттенки» создаёт шкалу из 11 цветов — от очень светлого до очень тёмного.
  3. Закрепите нужные цвета, чтобы сохранить их, и продолжайте подбирать другие базовые цвета.
  4. Выберите формат: HEX, пользовательские свойства CSS или JSON. Задайте имя и скопируйте код.

Как это работает

Цветовые гармонии создаются поворотом оттенка на цветовом круге: комплементарная добавляет противоположный оттенок (180°), аналоговая — соседние оттенки на 30° и 60° в обе стороны, триадная использует три оттенка с интервалом 120°, тетрадная — четыре оттенка с интервалом 90°, а раздельно-комплементарная — два оттенка по соседству с комплементарным (150° и 210°).

Поворот выполняется в OKLCH, а не в HSL. В OKLCH сохраняется воспринимаемая светлота, поэтому жёлтый и синий в одной палитре выглядят одинаково яркими, а жёлтый не режет глаз. Если после поворота цвет выходит за пределы диапазона, доступного на экранах sRGB, его насыщенность уменьшается, пока он не попадёт в диапазон. Светлота и оттенок при этом сохраняются.

Шкала оттенков строится с фиксированными шагами светлоты OKLCH от 50 до 950 — по аналогии с системой наименований Tailwind CSS. Ближе к белому и чёрному насыщенность снижается, чтобы самые светлые оттенки не выглядели неоновыми. Цветовые гармонии — лишь отправная точка: перед использованием проверьте контрастность текста и фона.

Примеры

Фирменный цвет с акцентом

Для базового цвета #3366cc гармония «Комплементарная» добавляет #8c6500 — тёплый охристый оттенок с такой же светлотой OKLCH. Сочетание синего с оранжево-жёлтым часто используют для акцентов рядом с фирменным синим.

Токены дизайна для библиотеки компонентов

Выберите «Оттенки», задайте имя «primary» и экспортируйте переменные CSS. Вы получите переменные от --primary-50 до --primary-950, готовые для фонов (50–100), границ (200–300) и текста (700–900).

Сохранение цвета во время подбора палитры

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

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

Почему мои цвета отличаются от цветов на цветовом круге HSL?

Инструмент поворачивает оттенок в OKLCH — перцептивном цветовом пространстве. Углы оттенка в нём не полностью совпадают с HSL, поэтому «противоположный» цвет может немного отличаться от результата инструмента на основе HSL.

Можно ли использовать JSON в Tailwind CSS?

В JSON сопоставляются имена и значения HEX — структура такая же, как у цветов в конфигурации темы Tailwind. В Tailwind 4 можно также вставить переменные CSS в блок @theme, предварительно переименовав их в --color-…

Доступны ли сгенерированные палитры?

Не автоматически. Цветовая гармония ничего не говорит о контрастности текста и фона. Проверьте каждую нужную пару с помощью инструмента проверки контрастности.

Конфиденциальность

Палитры создаются в браузере. Ваши цвета никуда не отправляются и не сохраняются.