Paleta semantycznego interfejsu użytkownika

Podaj jeden kolor marki, a otrzymasz primary / secondary / success / warning / danger — eksportowane jako konfiguracja Tailwind i zmienne CSS.

Podstawowy kolor marki

2F6FED · L 57%

Podstawowy

Wyprowadzone automatycznie, jasność i chromatyczność marki zachowane

#010101Podstawowy

#010101Jasny

#000101Ciemny

Drugorzędny

Wyprowadzone automatycznie, jasność i chromatyczność marki zachowane

#010101Podstawowy

#010101Jasny

#010101Ciemny

Sukces

Wyprowadzone automatycznie, jasność i chromatyczność marki zachowane

#000101Podstawowy

#010101Jasny

#000100Ciemny

Ostrzeżenie

Wyprowadzone automatycznie, jasność i chromatyczność marki zachowane

#010100Podstawowy

#010101Jasny

#010100Ciemny

Niebezpieczeństwo

Wyprowadzone automatycznie, jasność i chromatyczność marki zachowane

#010101Podstawowy

#010101Jasny

#010000Ciemny

Eksport kodu

// 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 zbudować system semantyczny – jeden główny, pięć ról.

Wprowadź kolor marki, otrzymaj pięć zestawów semantycznych potrzebnych w każdym interfejsie, eksportowanych jako kod.

01
Wprowadź główny
Wklej HEX swojej marki; kolory semantyczne dziedziczą jego jasność i charakter chromy.
02
Przeczytaj role
Sukces przypada w zakresie odcienia zielonego, Ostrzeżenie w bursztynowym, Niebezpieczeństwo w czerwonym – odcień jest semantyczny, charakter pozostaje zgodny z marką.
03
Eksportuj
Skopiuj jako konfigurację Tailwind / zmienne CSS / JSON, bezpośrednio do swojego systemu projektowego.

FAQ palety semantycznej

Trzy najczęstsze pytania przy integracji z systemem projektowym.

Czy odcienie semantyczne są stałe?: Odcienie są zakotwiczone w zakresach semantycznych (sukces=zielony, ostrzeżenie=bursztynowy, niebezpieczeństwo=czerwony), podczas gdy jasność i nasycenie dziedziczą po głównym kolorze marki – każda marka generuje swój własny charakter.
Dlaczego trzy kroki na każdy kolor semantyczny?: Podstawowy dla stanu domyślnego, jasny dla najechania/odcieni, ciemny dla aktywnego/ram; kolor tekstu jest automatycznie wybierany jako czarny lub biały na podstawie kontrastu.
Czy wyeksportowany kod jest gotowy do użycia w produkcji?: Blok Tailwind wkleja się bezpośrednio do pliku tailwind.config; blok zmiennych CSS działa z dowolnym frameworkiem lub zwykłym CSS.

Po palecie semantycznej

Otwórz edytor tablicy i użyj jej jako rzeczywistego interfejsu.

Edytor OKLCH

Dostrajaj L / C / H w postrzegowo jednolitej przestrzeni OKLCH z podglądem na żywo i wynikami w formacie oklch() / HEX / RGB.

Generator odcieni

Dowolny kolor na skalę systemu projektowego z 11 krokami, perceptualnie równomierną w OKLCH, kontrast WCAG na każdym kroku, eksport do Tailwind/CSS/SCSS/JSON.

Kontroler kontrastu

Walidacja kontrastu WCAG 2.1 między dowolnym kolorem pierwszoplanowym a tła.

Studio palet AI

Opisz scenę lub nastrój w jednym zdaniu — otrzymaj paletę z pięcioma rolami z uzasadnieniem.

// 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 zbudować system semantyczny – jeden główny, pięć ról.

Wprowadź kolor marki, otrzymaj pięć zestawów semantycznych potrzebnych w każdym interfejsie, eksportowanych jako kod.

Wprowadź główny

Wklej HEX swojej marki; kolory semantyczne dziedziczą jego jasność i charakter chromy.

Przeczytaj role

Sukces przypada w zakresie odcienia zielonego, Ostrzeżenie w bursztynowym, Niebezpieczeństwo w czerwonym – odcień jest semantyczny, charakter pozostaje zgodny z marką.

Eksportuj

Skopiuj jako konfigurację Tailwind / zmienne CSS / JSON, bezpośrednio do swojego systemu projektowego.

FAQ palety semantycznej

Trzy najczęstsze pytania przy integracji z systemem projektowym.

Czy odcienie semantyczne są stałe?

Odcienie są zakotwiczone w zakresach semantycznych (sukces=zielony, ostrzeżenie=bursztynowy, niebezpieczeństwo=czerwony), podczas gdy jasność i nasycenie dziedziczą po głównym kolorze marki – każda marka generuje swój własny charakter.

Dlaczego trzy kroki na każdy kolor semantyczny?

Podstawowy dla stanu domyślnego, jasny dla najechania/odcieni, ciemny dla aktywnego/ram; kolor tekstu jest automatycznie wybierany jako czarny lub biały na podstawie kontrastu.

Czy wyeksportowany kod jest gotowy do użycia w produkcji?

Blok Tailwind wkleja się bezpośrednio do pliku tailwind.config; blok zmiennych CSS działa z dowolnym frameworkiem lub zwykłym CSS.