Семантическая палитра для интерфейса

Введите один фирменный цвет, получите основной / дополнительный / успешный / предупреждающий / опасный — экспортируется как конфигурация Tailwind и CSS-переменные.

Основной брендовый цвет

2F6FED · L 57%

Основной

Автоматически выведены, светлота и хрома бренда сохранены

#010101Основной

#010101Светлый

#000101Тёмный

Вторичный

Автоматически выведены, светлота и хрома бренда сохранены

#010101Основной

#010101Светлый

#010101Тёмный

Успех

Автоматически выведены, светлота и хрома бренда сохранены

#000101Основной

#010101Светлый

#000100Тёмный

Предупреждение

Автоматически выведены, светлота и хрома бренда сохранены

#010100Основной

#010101Светлый

#010100Тёмный

Опасность

Автоматически выведены, светлота и хрома бренда сохранены

#010101Основной

#010101Светлый

#010000Тёмный

Экспорт кода

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      primary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#000101",
        foreground: "#ffffff",
      },
      secondary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010101",
        foreground: "#ffffff",
      },
      success: {
        DEFAULT: "#000101",
        light: "#010101",
        dark: "#000100",
        foreground: "#ffffff",
      },
      warning: {
        DEFAULT: "#010100",
        light: "#010101",
        dark: "#010100",
        foreground: "#ffffff",
      },
      danger: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010000",
        foreground: "#ffffff",
      },
      },
    },
  },
};

Как построить семантическую систему — один основной, пять ролей.

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

01
Введите основной цвет
Вставьте ваш брендовый HEX; семантические цвета наследуют его характеристики яркости и хромы.
02
Ознакомьтесь с ролями
Успех попадает в диапазон зеленых оттенков, Предупреждение — в янтарные, Опасность — в красные — оттенок семантический, характеристики остаются брендовыми.
03
Экспорт
Скопируйте как конфиг Tailwind / CSS-переменные / JSON для использования в вашей дизайн-системе.

Часто задаваемые вопросы по семантической палитре

Три частых вопроса при интеграции в дизайн-систему.

Являются ли семантические оттенки фиксированными?: Оттенки привязаны к семантическим диапазонам (успех=зеленый, предупреждение=янтарный, опасность=красный), а светлота и хрома наследуют основной цвет бренда — каждый бренд получает свой уникальный характер.
Почему три шага для каждого семантического цвета?: Базовый для стандартного состояния, светлый для наведения/оттенков, темный для активного состояния/границ; цвет текста автоматически подбирается черным или белым по контрасту.
Готов ли экспортированный код к использованию в продакшене?: Блок Tailwind можно вставить напрямую в tailwind.config; блок CSS-переменных работает с любым фреймворком или обычным CSS.

После создания семантической палитры

Откройте редактор доски и протестируйте как реальный интерфейс.

Редактор OKLCH

Настройте L / C / H в перцептивно однородном пространстве OKLCH с предварительным просмотром в реальном времени и выводом oklch() / HEX / RGB.

Генератор оттенков

Преобразует любой цвет в шкалу дизайн-системы из 11 шагов, перцептивно равномерную в OKLCH, с контролем контрастности по WCAG на каждом шаге, экспорт в Tailwind/CSS/SCSS/JSON.

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

Проверка контраста по WCAG 2.1 между любым цветом переднего плана и фона.

AI-студия палитр

Опишите сцену или настроение одной строкой — получите палитру из пяти цветов с обоснованием.