Semantisk UI-palett

Ange en märkesfärg, få primär / sekundär / framgång / varning / fara — exporteras som Tailwind-konfiguration och CSS-variabler.

Varumärkesprimär

2F6FED · L 57%

Primär

Härleds automatiskt, varumärkets ljushet och kromaticitet bibehålls

#010101Bas

#010101Ljus

#000101Mörk

Sekundär

Härleds automatiskt, varumärkets ljushet och kromaticitet bibehålls

#010101Bas

#010101Ljus

#010101Mörk

Framgång

Härleds automatiskt, varumärkets ljushet och kromaticitet bibehålls

#000101Bas

#010101Ljus

#000100Mörk

Varning

Härleds automatiskt, varumärkets ljushet och kromaticitet bibehålls

#010100Bas

#010101Ljus

#010100Mörk

Fara

Härleds automatiskt, varumärkets ljushet och kromaticitet bibehålls

#010101Bas

#010101Ljus

#010000Mörk

Exportera kod

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

Hur man bygger ett semantiskt system – en primär, fem roller.

Ange en varumärkesfärg, få de fem semantiska uppsättningar som varje gränssnitt behöver, exporterade som kod.

01
Ange primär
Klistra in din varumärkes-HEX; semantiska färger ärver dess ljushet och kromaticitetskaraktär.
02
Läs rollerna
Success hamnar i grön nyansintervall, Varning i bärnsten, Fara i rött – nyansen är semantisk, karaktären förblir varumärkesrelaterad.
03
Exportera
Kopiera som Tailwind-konfig / CSS-variabler / JSON, direkt till ditt designsystem.

Vanliga frågor om semantisk palett

Tre vanliga frågor vid integration i ett designsystem.

Är semantiska nyanser fasta?: Nyanser förankras till semantiska intervall (success=grön, warning=bärnstensfärgad, danger=röd) medan ljushet och kromatiskt arv från varumärkets primärfärg – varje varumärke får sin egen karaktär.
Varför tre steg per semantisk färg?: Bas för standardläge, ljus för hover/färgtoner, mörk för aktivt/lister; textfärgen väljs automatiskt svart eller vit baserat på kontrast.
Är den exporterade koden produktionsklar?: Tailwind-blocket klistras direkt in i tailwind.config; CSS-variabelblocket fungerar med alla ramverk eller vanlig CSS.

Efter den semantiska paletten

Öppna tavelledaren och använd den som ett verkligt gränssnitt.

OKLCH-redigerare

Justera L / C / H i det perceptuellt enhetliga OKLCH-utrymmet med liveförhandsvisning och utdata för oklch() / HEX / RGB.

Nyckelgenerering

Omvandla valfri färg till en 11-stegs skala för designsystem, perceptuellt jämn i OKLCH, WCAG-kontrast per steg, exportera till Tailwind/CSS/SCSS/JSON.

Kontrastkontroll

WCAG 2.1 kontrastvalidering mellan valfri förgrunds- och bakgrundsfärg.

AI Palettstudio

Beskriv en scen eller stämning på en rad – få en fem-rolls palett med motivering.

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

Hur man bygger ett semantiskt system – en primär, fem roller.

Ange en varumärkesfärg, få de fem semantiska uppsättningar som varje gränssnitt behöver, exporterade som kod.

Ange primär

Klistra in din varumärkes-HEX; semantiska färger ärver dess ljushet och kromaticitetskaraktär.

Läs rollerna

Success hamnar i grön nyansintervall, Varning i bärnsten, Fara i rött – nyansen är semantisk, karaktären förblir varumärkesrelaterad.

Exportera

Kopiera som Tailwind-konfig / CSS-variabler / JSON, direkt till ditt designsystem.

Vanliga frågor om semantisk palett

Tre vanliga frågor vid integration i ett designsystem.

Är semantiska nyanser fasta?

Nyanser förankras till semantiska intervall (success=grön, warning=bärnstensfärgad, danger=röd) medan ljushet och kromatiskt arv från varumärkets primärfärg – varje varumärke får sin egen karaktär.

Varför tre steg per semantisk färg?

Bas för standardläge, ljus för hover/färgtoner, mörk för aktivt/lister; textfärgen väljs automatiskt svart eller vit baserat på kontrast.

Är den exporterade koden produktionsklar?

Tailwind-blocket klistras direkt in i tailwind.config; CSS-variabelblocket fungerar med alla ramverk eller vanlig CSS.