Palette UI Semantica

Inserisci un colore marchio, ottieni primario / secondario / successo / avvertimento / pericolo — esportato come configurazione Tailwind e variabili CSS.

Primario del marchio

2F6FED · L 57%

Primario

Derivati automaticamente, luminosità e cromaticità del marchio mantenute

#010101base

#010101Chiaro

#000101Scuro

Secondario

Derivati automaticamente, luminosità e cromaticità del marchio mantenute

#010101base

#010101Chiaro

#010101Scuro

Successo

Derivati automaticamente, luminosità e cromaticità del marchio mantenute

#000101base

#010101Chiaro

#000100Scuro

Avviso

Derivati automaticamente, luminosità e cromaticità del marchio mantenute

#010100base

#010101Chiaro

#010100Scuro

Pericolo

Derivati automaticamente, luminosità e cromaticità del marchio mantenute

#010101base

#010101Chiaro

#010000Scuro

Esporta codice

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

Come costruire un sistema semantico - un primario, cinque ruoli.

Inserisci un colore del brand, ottieni i cinque set semantici necessari per ogni interfaccia, esportati come codice.

01
Inserisci il primario
Incolla il tuo HEX del brand; i colori semantici ereditano la sua luminosità e il carattere della cromaticità.
02
Leggi i ruoli
Success finisce nella gamma della tonalità verde, Warning nell'ambra, Danger nel rosso - la tonalità è semantica, il carattere rimane coerente con il brand.
03
Esporta
Copia come configurazione Tailwind / variabili CSS / JSON, direttamente nel tuo sistema di design.

FAQ sulla palette semantica

Tre domande frequenti durante l'integrazione in un sistema di design.

Le tonalità semantiche sono fisse?: Le tonalità si ancorano a range semantici (successo=verde, avvertimento=ambra, pericolo=rosso) mentre luminosità e croma ereditano il colore primario del marchio: ogni marchio genera il proprio carattere.
Perché tre passaggi per ogni colore semantico?: Base per lo stato predefinito, chiaro per hover/tinte, scuro per attivo/bordi; il colore del testo viene scelto automaticamente tra nero o bianco in base al contrasto.
Il codice esportato è pronto per la produzione?: Il blocco Tailwind si incolla direttamente in tailwind.config; il blocco delle variabili CSS funziona con qualsiasi framework o CSS semplice.

Dopo la palette semantica

Apri l'editor di tavole e usalo come interfaccia reale.

Editor OKLCH

Regola L / C / H nello spazio OKLCH perceptualmente uniforme con anteprima live e output oklch() / HEX / RGB.

Generatore di Scale

Trasforma qualsiasi colore in una scala di sistema di design a 11 gradini, percettivamente uniforme in OKLCH, con contrasto WCAG per ogni gradino, esportazione in Tailwind/CSS/SCSS/JSON.

Controllore di contrasto

Convalida del contrasto WCAG 2.1 tra qualsiasi colore di primo piano e sfondo.

Studio di palette AI

Descrivi una scena o un umore in una riga — ottieni una palette a cinque ruoli con motivazione.

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

Come costruire un sistema semantico - un primario, cinque ruoli.

Inserisci un colore del brand, ottieni i cinque set semantici necessari per ogni interfaccia, esportati come codice.

Inserisci il primario

Incolla il tuo HEX del brand; i colori semantici ereditano la sua luminosità e il carattere della cromaticità.

Leggi i ruoli

Success finisce nella gamma della tonalità verde, Warning nell'ambra, Danger nel rosso - la tonalità è semantica, il carattere rimane coerente con il brand.

Esporta

Copia come configurazione Tailwind / variabili CSS / JSON, direttamente nel tuo sistema di design.

FAQ sulla palette semantica

Tre domande frequenti durante l'integrazione in un sistema di design.

Le tonalità semantiche sono fisse?

Le tonalità si ancorano a range semantici (successo=verde, avvertimento=ambra, pericolo=rosso) mentre luminosità e croma ereditano il colore primario del marchio: ogni marchio genera il proprio carattere.

Perché tre passaggi per ogni colore semantico?

Base per lo stato predefinito, chiaro per hover/tinte, scuro per attivo/bordi; il colore del testo viene scelto automaticamente tra nero o bianco in base al contrasto.

Il codice esportato è pronto per la produzione?

Il blocco Tailwind si incolla direttamente in tailwind.config; il blocco delle variabili CSS funziona con qualsiasi framework o CSS semplice.