Paleta Semântica para UI

Insira uma cor de marca, obtenha primária / secundária / sucesso / aviso / perigo — exportada como configuração Tailwind e variáveis CSS.

Primária da marca

2F6FED · L 57%

Primária

Derivadas automaticamente, luminosidade e croma da marca mantidos

#010101Base

#010101Claro

#000101Escuro

Secundária

Derivadas automaticamente, luminosidade e croma da marca mantidos

#010101Base

#010101Claro

#010101Escuro

Sucesso

Derivadas automaticamente, luminosidade e croma da marca mantidos

#000101Base

#010101Claro

#000100Escuro

Aviso

Derivadas automaticamente, luminosidade e croma da marca mantidos

#010100Base

#010101Claro

#010100Escuro

Perigo

Derivadas automaticamente, luminosidade e croma da marca mantidos

#010101Base

#010101Claro

#010000Escuro

Exportar código

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

Como construir um sistema semântico — uma primária, cinco funções.

Insira uma cor de marca, obtenha os cinco conjuntos semânticos que toda interface precisa, exportados como código.

01
Insira a primária
Cole seu HEX de marca; as cores semânticas herdam sua luminosidade e característica de croma.
02
Leia as funções
Sucesso fica na faixa de matiz verde, Aviso em âmbar, Perigo em vermelho — o matiz é semântico, a característica permanece na marca.
03
Exportar
Copie como configuração Tailwind / variáveis CSS / JSON, diretamente para seu sistema de design.

Perguntas frequentes sobre paleta semântica

Três perguntas frequentes ao integrar a paleta em um sistema de design.

Os matizes semânticos são fixos?: Os matizes são ancorados a intervalos semânticos (sucesso=verde, aviso=ambar, perigo=vermelho), enquanto a luminosidade e a cromaticidade herdam a cor primária da marca — cada marca gera sua própria identidade.
Por que três etapas por cor semântica?: Base para o estado padrão, clara para hover/tintas, escura para ativo/bordas; a cor do texto é escolhida automaticamente entre preto ou branco por contraste.
O código exportado está pronto para produção?: O bloco Tailwind pode ser colado diretamente no tailwind.config; o bloco de variáveis CSS funciona com qualquer framework ou CSS puro.

Após a paleta semântica

Abra o editor de paletas e teste como uma interface real.

Editor OKLCH

Ajuste L / C / H no espaço OKLCH perceptualmente uniforme com visualização ao vivo e saída oklch() / HEX / RGB.

Gerador de Escalas

Transforme qualquer cor em uma escala de sistema de design de 11 passos, perceptualmente uniforme em OKLCH, com contraste WCAG por passo, exportação para Tailwind/CSS/SCSS/JSON.

Verificador de Contraste

Validação de contraste WCAG 2.1 entre qualquer cor de primeiro plano e plano de fundo.

Estúdio de Paletas com IA

Descreva uma cena ou humor em uma linha — obtenha uma paleta de cinco tons com justificativa.

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

Como construir um sistema semântico — uma primária, cinco funções.

Insira uma cor de marca, obtenha os cinco conjuntos semânticos que toda interface precisa, exportados como código.

Insira a primária

Cole seu HEX de marca; as cores semânticas herdam sua luminosidade e característica de croma.

Leia as funções

Sucesso fica na faixa de matiz verde, Aviso em âmbar, Perigo em vermelho — o matiz é semântico, a característica permanece na marca.

Exportar

Copie como configuração Tailwind / variáveis CSS / JSON, diretamente para seu sistema de design.

Perguntas frequentes sobre paleta semântica

Três perguntas frequentes ao integrar a paleta em um sistema de design.

Os matizes semânticos são fixos?

Os matizes são ancorados a intervalos semânticos (sucesso=verde, aviso=ambar, perigo=vermelho), enquanto a luminosidade e a cromaticidade herdam a cor primária da marca — cada marca gera sua própria identidade.

Por que três etapas por cor semântica?

Base para o estado padrão, clara para hover/tintas, escura para ativo/bordas; a cor do texto é escolhida automaticamente entre preto ou branco por contraste.

O código exportado está pronto para produção?

O bloco Tailwind pode ser colado diretamente no tailwind.config; o bloco de variáveis CSS funciona com qualquer framework ou CSS puro.