# 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.

> Página canônica: https://elysiatools.com/pt/tools/tailwind-color-palette-sync

- **Categoria:** Development

- **Palavras-chave:** tailwind, config tailwind, paleta, tokens, wcag, contraste, modo escuro

## Visão geral

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.

## Entradas

- **Cores (um HEX por linha, ou "name: HEX")** (textarea): brand: #3b82f6 accent: #10b981 #f59e0b
- **Esquema de nomes** (select)
- **Incluir cores modo escuro** (checkbox)
- **Cores modo escuro (opcional, mesmo formato)** (textarea): brand: #60a5fa accent: #34d399

## Quando usar

- Ao criar ou atualizar o sistema de design de um projeto web utilizando Tailwind CSS e precisar de escalas de cores consistentes.
- Quando for necessário garantir que as cores de fundo e texto do projeto atendam aos critérios de acessibilidade WCAG (AA/AAA).
- Ao configurar paletas de cores sincronizadas para os modos claro e escuro no arquivo de configuração do Tailwind.

## Como funciona

- Insira as suas cores no formato HEX (uma por linha), opcionalmente definindo um nome para cada uma (ex: brand: #3b82f6).
- Escolha o esquema de nomenclatura desejado: escala completa (50–950), nome único ou formato de objeto aninhado.
- Ative a opção de modo escuro e insira as cores correspondentes se desejar gerar uma configuração separada para o tema escuro.
- Copie o código gerado para o bloco theme.extend.colors do seu tailwind.config.ts e visualize os relatórios de contraste WCAG para cada tom.

## Casos de uso

- Geração rápida de escalas cromáticas completas a partir de uma única cor de marca para interfaces Tailwind.
- Auditoria de acessibilidade visual de paletas de cores existentes através dos indicadores de contraste WCAG.
- Criação de tokens de design consistentes para alternância entre modo claro e escuro.

## Perguntas frequentes

### 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.

## Ferramentas relacionadas

- [Gerador de ideias de domínio com IA](https://elysiatools.com/pt/tools/ai-domain-name-idea-generator): Insira palavras-chave da marca e a IA gera até 10 ideias de domínio, filtrando as já registradas via DNS + RDAP. Para empreendedores e desenvolvedores.
- [Auditor de dependências do package.json](https://elysiatools.com/pt/tools/package-json-dependency-auditor): Audita um package.json quanto à higiene de dependências e qualidade das faixas de versão, e opcionalmente inspeciona a árvore transitiva a partir de package-lock.json ou yarn.lock. Sinaliza duplicatas, wildcard ou pre-release, chaves desordenadas, metadados ausentes e dependências runtime/dev mal classificadas.
- [Conversor de espacos de cor](https://elysiatools.com/pt/tools/color-space-converter): Converte uma cor entre HEX, RGB, HSL, CIELAB e Display-P3 com saida CSS e verificacao de gamut.
- [Gerador e Analisador de JWK](https://elysiatools.com/pt/tools/jwk-generator): Gera JSON Web Keys (JWK) para RSA, EC (P-256/P-384/P-521/secp256k1) e OKP (Ed25519/Ed448/X25519/X448), ou analisa um JWK existente para inspecionar parâmetros, impressão e metadados
- [Coach de cycle time e throughput Kanban](https://elysiatools.com/pt/tools/kanban-cycle-time-throughput-coach): Importe carimbos criado→iniciado→resolvido de CSV (estilo Jira ou simples) e receba métricas de fluxo como agile coaches leem: percentis de lead/cycle time, idade do WIP, throughput por dia/semana/mês, um diagrama de fluxo acumulado e uma checagem da Lei de Little.
- [Gerador de PKCE Code Verifier e Challenge](https://elysiatools.com/pt/tools/pkce-code-verifier-generator): Gera, valida e verifica pares code_verifier / code_challenge PKCE (RFC 7636) de OAuth2 / OIDC. Três modos: (1) gerar um par novo a partir de bytes aleatórios criptográficos (256/384/512/768 bits), (2) auditar um verifier existente frente ao RFC — comprimento (43–128), charset \[A-Za-z0-9-._~\] e ≥256 bits de entropia, e (3) verificar um par recalculando BASE64URL(SHA256(verifier)). Opcionalmente constrói a URL completa de autorização e o corpo de troca de token. Complementa o nonce-generator genérico (que só emite o par) com auditoria de conformidade RFC e verificação de pares.
- [Verificador de cabeçalhos de segurança](https://elysiatools.com/pt/tools/security-headers-checker): Audita cabeçalhos de resposta HTTP para conformidade de segurança — analisa os cabeçalhos brutos que você cola (sem rede) e os classifica conforme o conjunto de cabeçalhos seguros OWASP com verificações em nível de valor: HSTS max-age, CSP unsafe-inline/eval, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, COOP/COEP/CORP e mais. Retorna uma nota (A+ a F) mais constatações por cabeçalho com recomendações prontas para copiar.
- [Construtor de eixos e instâncias de fontes variáveis e CSS font-variation-settings](https://elysiatools.com/pt/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Envie uma fonte variável (TTF/OTF/WOFF/WOFF2) para inspecionar seus eixos fvar e instâncias nomeadas, pré-visualizar a interpolação ao vivo no navegador e gerar CSS font-variation-settings pronto para colar, as propriedades de alto nível equivalentes e um bloco @font-face variável.

## Exemplos

- [Exemplos de códigos de cor](https://elysiatools.com/pt/samples/color-code): Coleção de códigos de cor em vários formatos (Hex, RGB, HSL, cores com nome) para testes de validação
- [Exemplos Tailwind CSS](https://elysiatools.com/pt/samples/tailwind-css): Exemplos Tailwind CSS - Framework CSS utility-first com design responsivo, componentes e configurações personalizadas
- [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato
- [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato