Visualizador de paletas de cores
Veja uma paleta ou cor da marca aplicada a um site completo, com fontes reais, verificação de contraste ao vivo e modos claro e escuro.
Como visualizar cores em uma interface real
- Comece com uma paleta, por exemplo abrindo-a pelo gerador, ou mude para Da cor da marca e escolha uma cor.
- Escolha um modelo de prévia: landing page, painel, app para celular ou artigo, e alterne entre os modos claro e escuro.
- Clique em um papel, como fundo ou primária, para dar a ele outra cor da paleta, ou clique em Embaralhar papéis para testar outra combinação. Escolha um par de fontes ou embaralhe as fontes.
- Confira a lista de contraste ao vivo e aplique Corrigir a qualquer par que não passe, depois copie os papéis como variáveis CSS, Tailwind v4 ou tokens do shadcn/ui, ou copie o link para compartilhar a prévia.
O que você pode fazer
Quatro modelos de prévia
Veja suas cores em uma landing page, um painel, uma tela de app para celular e um layout de artigo.
Atribuição de papéis
Decida qual cor da paleta é o fundo, o texto, a ação principal e os outros papéis da interface, e desfaça qualquer mudança.
Fontes reais
Combine fontes de título e de texto a partir de uma lista integrada e veja-as na prévia, com uma escala tipográfica.
Contraste verificado ao vivo
Os principais pares de texto e fundo são verificados enquanto você edita, com correção em um clique para os pares que não passam.
Modos claro e escuro
Alterne a prévia inteira entre claro e escuro para ver as duas versões das suas cores.
Exporte e compartilhe
Copie os papéis como variáveis CSS, Tailwind v4 ou tokens do shadcn/ui, ou copie um link que abre a mesma prévia.
Perguntas frequentes
Como visualizar uma paleta de cores em um site?
Abra o visualizador com a sua paleta, escolha um modelo como uma landing page ou um painel e veja as cores aplicadas a um layout completo. Alterne entre os modos claro e escuro e mude qual cor faz qual papel.
Por que visualizar uma paleta em um layout real?
Amostras escondem problemas. Em uma página você vê como uma cor se comporta como botão, link, texto ou fundo de um card, e se o texto sobre ela continua legível.
Posso usar a cor da minha marca em vez de uma paleta?
Sim. Escolha Da cor da marca, digite um código hex, e o visualizador deriva os papéis da interface a partir dessa única cor.
O visualizador verifica a acessibilidade?
Sim. Ele lista o contraste dos principais pares de texto e fundo, marca os que não passam e oferece um botão Corrigir que ajusta a cor daquele par.
Como exportar as cores?
Use a seção Compartilhar e exportar para copiar os papéis como variáveis CSS, um tema Tailwind v4 ou tokens do shadcn/ui, ou copie o link da prévia.