Семантична палітра для UI

Введіть один брендовий колір, отримайте основний / другорядний / успіх / попередження / небезпеку — експортується як конфігурація 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, прямо у вашу дизайн-систему.

FAQ семантичної палітри

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

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

Після семантичної палітри

Відкрийте редактор дошки та використовуйте її як реальний інтерфейс.

Редактор OKLCH

Налаштуйте L / C / H у перцептивно рівномірному просторі OKLCH з живим попереднім переглядом та виведенням oklch() / HEX / RGB.

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

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

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

Перевірка контрасту за WCAG 2.1 між будь-яким кольором переднього плану та фону.

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

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

// 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", }, }, }, }, };

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

Введіть основний колір

Вставте ваш брендовий HEX; семантичні кольори успадковують його характеристики світлості та хроми.

Ознайомтеся з ролями

Успіх потрапляє в діапазон зеленого відтінку, Попередження — в бурштиновий, Небезпека — в червоний — відтінок є семантичним, характеристика залишається брендовою.

Експорт

Скопіюйте як конфіг Tailwind / CSS-змінні / JSON, прямо у вашу дизайн-систему.

FAQ семантичної палітри

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

Чи фіксовані семантичні відтінки?

Відтінки прив'язані до семантичних діапазонів (успіх=зелений, попередження=бурштиновий, небезпека=червоний), тоді як світлість та насиченість успадковуються від основного кольору бренду — кожен бренд формує власний характер.

Чому три кроки для кожного семантичного кольору?

Основа для стандартного стану, світлий для наведення/відтінків, темний для активного стану/кордонів; колір тексту автоматично вибирається чорним або білим залежно від контрасту.

Чи готовий експортований код до використання в продакшені?

Блок Tailwind вставляється безпосередньо у tailwind.config; блок CSS-змінних працює з будь-яким фреймворком або звичайним CSS.