Sémantická paleta pro UI

Zadejte jednu značkovou barvu a získejte primární / sekundární / úspěch / varování / nebezpečí – export jako konfigurace Tailwind a CSS proměnné.

Primární barva značky

2F6FED · L 57%

Primární

Odvozeno automaticky, zachovává světlost a chromu značky

#010101Základní

#010101Světlá

#000101Tmavá

Sekundární

Odvozeno automaticky, zachovává světlost a chromu značky

#010101Základní

#010101Světlá

#010101Tmavá

Úspěch

Odvozeno automaticky, zachovává světlost a chromu značky

#000101Základní

#010101Světlá

#000100Tmavá

Varování

Odvozeno automaticky, zachovává světlost a chromu značky

#010100Základní

#010101Světlá

#010100Tmavá

Nebezpečí

Odvozeno automaticky, zachovává světlost a chromu značky

#010101Základní

#010101Světlá

#010000Tmavá

Export kódu

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

Jak vytvořit sémantický systém – jedna primární, pět rolí.

Zadejte značkovou barvu, získejte pět sémantických sad, které každé rozhraní potřebuje, exportované jako kód.

01
Zadejte primární barvu
Vložte svou značkovou HEX; sémantické barvy zdědí její světlost a charakter chromy.
02
Přečtěte si role
Úspěch spadá do zeleného rozsahu odstínů, Varování do jantarového, Nebezpečí do červeného – odstín je sémantický, charakter zůstává značkový.
03
Exportovat
Zkopírujte jako Tailwind config / CSS proměnné / JSON, přímo do vašeho designového systému.

Často kladené otázky o sémantické paletě

Tři časté otázky při zapojování do designového systému.

Jsou sémantické odstíny fixní?: Odstíny jsou ukotveny k sémantickým rozsahům (úspěch=zelená, varování=jantarová, nebezpečí=červená), zatímco světlost a sytost přebírají primární barvu značky – každá značka vytváří svou vlastní charakteristiku.
Proč tři kroky pro každou sémantickou barvu?: Základ pro výchozí stav, světlá pro přejetí/tóny, tmavá pro aktivní/stěny; barva textu je automaticky vybrána černá nebo bílá podle kontrastu.
Je exportovaný kód připravený pro produkci?: Blok Tailwind lze vložit přímo do tailwind.config; blok CSS proměnných funguje s jakýmkoli frameworkem nebo prostým CSS.

Po sémantické paletě

Otevřete editor desek a vyzkoušejte si to jako skutečné rozhraní.

Editor OKLCH

Upravte L / C / H v percepčně uniformním prostoru OKLCH s živým náhledem a výstupem oklch() / HEX / RGB.

Generátor škál

Jakákoli barva na 11stupňovou škálu pro designový systém, vnímavě rovnoměrná v OKLCH, kontrast WCAG na stupeň, export do Tailwind/CSS/SCSS/JSON.

Kontrola kontrastu

Ověření kontrastu podle WCAG 2.1 mezi libovolnou barvou popředí a pozadí.

AI studio palet

Popište scénu nebo náladu jedním řádkem – získejte paletu s pěti rolemi a zdůvodněním.

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

Jak vytvořit sémantický systém – jedna primární, pět rolí.

Zadejte značkovou barvu, získejte pět sémantických sad, které každé rozhraní potřebuje, exportované jako kód.

Zadejte primární barvu

Vložte svou značkovou HEX; sémantické barvy zdědí její světlost a charakter chromy.

Přečtěte si role

Úspěch spadá do zeleného rozsahu odstínů, Varování do jantarového, Nebezpečí do červeného – odstín je sémantický, charakter zůstává značkový.

Exportovat

Zkopírujte jako Tailwind config / CSS proměnné / JSON, přímo do vašeho designového systému.

Často kladené otázky o sémantické paletě

Tři časté otázky při zapojování do designového systému.

Jsou sémantické odstíny fixní?

Odstíny jsou ukotveny k sémantickým rozsahům (úspěch=zelená, varování=jantarová, nebezpečí=červená), zatímco světlost a sytost přebírají primární barvu značky – každá značka vytváří svou vlastní charakteristiku.

Proč tři kroky pro každou sémantickou barvu?

Základ pro výchozí stav, světlá pro přejetí/tóny, tmavá pro aktivní/stěny; barva textu je automaticky vybrána černá nebo bílá podle kontrastu.

Je exportovaný kód připravený pro produkci?

Blok Tailwind lze vložit přímo do tailwind.config; blok CSS proměnných funguje s jakýmkoli frameworkem nebo prostým CSS.