HedgieTools

Генератор палитр

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

Ваш основной цвет

Введите значение или выберите цвет: остальная палитра строится вокруг него.

Вторичный и третичный
Формат значений

Введите значение HEX, например #2563EB, или нажмите на квадрат, чтобы выбрать цвет.

Ваша палитра

Нажмите на значение или оттенок (от 50 до 950), чтобы скопировать его. Карандаш заменяет предложенный цвет вашим: он не меняется при смене основного цвета.

  • —

    Основной

    ваш цвет
  • —

    Вторичный

    комплементарный
  • —

    Третичный

    почти комплементарный
  • —

    Инфо

    синий
  • —

    Успех

    зеленый
  • —

    Внимание

    оранжевый
  • —

    Опасно

    красный
  • —

    Нейтральный

    тонированный серый

Светлые и темные токены

Рабочие цвета вашего интерфейса, готовые для светлой и темной темы. Каждый ссылается на оттенок палитры. Нажмите, чтобы скопировать.

  • --backgroundФон страницы
  • --surfaceКарточки и панели
  • --surface-mutedВторостепенные области
  • --borderРамки и разделители
  • --textОсновной текст
  • --text-mutedВторостепенный текст
  • --primaryКнопки и ссылки
  • --primary-hoverПри наведении
  • --on-primaryТекст на основном цвете
  • --focus-ringКонтур фокуса
  • --secondaryВторичный акцент
  • --tertiaryТретичный акцент
  • --infoИнформация
  • --info-softФон информационного сообщения
  • --successУспех
  • --success-softФон сообщения об успехе
  • --warningВнимание
  • --warning-softФон предупреждения
  • --dangerОпасность, ошибка
  • --danger-softФон ошибки

Сочетающиеся цвета

Классические гармонии вокруг вашего основного цвета — для иллюстраций, графиков или акцентов.

  • Комплементарная

    противоположный цвет

  • Раздельно-комплементарная

    мягче, чем противоположный

  • Аналоговая

    соседние цвета

  • Триада

    три уравновешенных цвета

  • Тетрада

    четыре цвета по квадрату

  • Монохромная

    один тон, разная насыщенность

Предпросмотр и контраст

Палитра на нескольких элементах интерфейса и читаемость каждой пары цветов по правилам WCAG.

Тема предпросмотра
Заголовок страницыВторостепенный, менее важный текст под заголовком.
Карточка со ссылкой и кнопками.
ОсновнойВторичныйТретичный
Инфо · Доступно обновление.
Успех · Изменения сохранены.
Внимание · Ваша подписка скоро закончится.
Ошибка · Платеж не прошел.
  • Текст на фоне
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Второстепенный текст на фоне
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Ссылка на фоне
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Основная кнопка
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Вторичная кнопка
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Третичный текст на фоне
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Информационное сообщение
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Сообщение об успехе
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Предупреждение
    Соотношение—Обычный текст—Крупный текст—AAA—
  • Сообщение об опасности
    Соотношение—Обычный текст—Крупный текст—AAA—

Экспорт

Получите палитру в формате, выбранном выше (HEX).

Введите основной цвет, чтобы получить код.

CSS-переменные палитры (--color-primary-500…). Токены ссылаются на эти переменные; темная тема включается атрибутом data-theme="dark" на элементе html.

О генераторе палитры

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

Полная палитра из одного цвета

Инструмент выводит из основного цвета вторичный и третичный, цвета состояний (информация, успех, предупреждение, опасность) в том же стиле и слегка тонированные серые для фона и текста.

Готовые оттенки

Каждый цвет представлен в одиннадцати оттенках — от самого светлого (50) до самого темного (950) — для фона, рамок, состояний при наведении и текста. Если предложенный цвет вам не подходит, замените его своим: оттенки подстроятся.

Светлые и темные токены

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

Проверка контраста

Каждая пара текста и фона оценивается по правилам WCAG: 4,5:1 для обычного текста, 3:1 для крупного и 7:1 для уровня AAA.

Экспорт в CSS, Tailwind, JSON

Скопируйте любое значение в HEX, RGB, HSL или OKLCH или скачайте файл CSS-переменных, тему Tailwind v4, конфигурацию Tailwind v3, JSON или простой список. Всё происходит в вашем браузере: ничего не отправляется и не сохраняется.

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