Como a escala de cores (50–950) é gerada?

A escala é calculada interpolando a luminosidade no espaço de cores HSL, usando a cor inserida como âncora no nível 500.

O que significam as etiquetas WCAG (AAA, AA, Fail)?

Elas indicam se o contraste do tom contra fundos brancos ou pretos é seguro para leitura, seguindo as diretrizes de acessibilidade.

Posso gerar cores sem definir um nome personalizado?

Sim, cores inseridas apenas como valores HEX receberão nomes automáticos como color1, color2, etc.

Qual é a diferença entre o esquema 'Escala' e o 'Aninhamento'?

A escala gera chaves planas, enquanto o aninhamento agrupa os tons em um objeto estruturado, ideal para a sintaxe padrão do Tailwind.

Como funciona a integração com o modo escuro?

Ao ativar essa opção, você pode fornecer uma segunda lista de cores HEX que gera um bloco de configuração específico para o tema escuro.

Elysia Tools

Navegação

Development

Sincronizador de paleta Tailwind

Insira HEX, escolha o esquema de nomes (escala 50–950 / nome único / aninhamento) e gere o fragmento theme.extend.colors do tailwind.config.ts com níveis WCAG AA/AAA. Dark mode opcional.

Detalhes

O que esta ferramenta ajuda você a fazer

Transforma uma lista de HEX em um bloco theme.extend.colors — com checagens WCAG.

Entrada. Um HEX por linha. Prefixo opcional: brand: #3b82f6. Sem nome → color1.

Esquemas. Escala (50–950, 11 níveis), nome único ou aninhamento. A escala interpola em HSL para branco/preto.

WCAG. Cada tom rotulado AAA (≥7), AA (≥4.5), AA-Large (≥3) ou Fail.

Modo escuro. Opcional, segunda lista HEX → config separada.

Matemática. Interpolação de luminosidade HSL; entrada ancora o nível 500.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Execuções de exemplo preparadas

Clique em um exemplo para preencher o formulário automaticamente. Arquivos ainda precisam ser enviados.

2 exemplos

Paleta de marca com escala completa

Duas cores de marca em escalas de 11 níveis com WCAG, formato aninhado.

{
  "type": "html"
}

Tokens de valor único + modo escuro

Três cores como tokens únicos, com conjunto modo escuro.

{
  "type": "html"
}

Entradas

Preencha os campos necessários e execute a ferramenta.

4 opções

ConteúdoCole ou digite os valores principais.2

Cores (um HEX por linha, ou "name: HEX")textareaObrigatórioCores modo escuro (opcional, mesmo formato)textareaOpcional

ConfiguraçõesAjuste formatos, intervalos, números e modos.1

Esquema de nomesselectOpcional

AlternânciasAtive ou desative comportamentos opcionais.1

Incluir cores modo escurocheckboxOpcionalAtivo quando marcado

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Sincronizador de paleta Tailwind

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Paleta de Marca com Escala Completa

2. Tokens Únicos com Suporte a Modo Escuro

Perguntas frequentes

Exemplos de códigos de cor

Tailwind CSS Samples

Exemplos de Processamento de Imagem Web Python

Exemplos de Processamento de Imagem Android Java

Gerador de ideias de domínio com IA

Auditor de dependências do package.json

Conversor de espacos de cor

Gerador e Analisador de JWK

Ferramentas de codificacao e conversao de audio

Ferramentas de conversao de formatos de imagem e exportacao animada

Ferramentas de intercambio JSON e traducao de formatos

Ferramentas de conversao de espacos de cor para web e impressao