Gerador de paleta de cores
Extraia cores de imagens, crie escalas para design systems, exporte para Tailwind CSS e teste contraste, OKLCH e dark mode.
Algoritmo
Nível de Contraste
Quantidade de Tons
Extração por imagem
Envie uma imagem, selecione uma cor dominante e transforme a referência visual em uma escala pronta para UI.
Design systems e tokens
Gere tons consistentes para botões, estados, superfícies, bordas e variáveis CSS reutilizáveis.
Tailwind, OKLCH e dark mode
Exporte formatos úteis para desenvolvimento e teste contraste para interfaces claras e escuras.
Gerador de paleta para design systems, Tailwind CSS e imagens
O que faz o gerador de paleta de cores?
O gerador cria escalas de cores profissionais a partir de uma cor base ou de uma imagem. Ele gera tons consistentes para interfaces, marcas, landing pages, componentes e design systems.
Como usar a escala 50-950?
A escala 50-950 fornece 11 tons onde 50 é o mais claro e 950 é o mais escuro. Tipicamente, o tom 500 ou 600 representa sua cor base. Use tons mais claros (50-400) para fundos e elementos sutis, e tons mais escuros (600-950) para texto, bordas e ênfase.
O que é OKLCH?
OKLCH é um espaço de cores moderno que fornece cores perceptualmente uniformes. Diferente do HSL, o OKLCH garante que cores com o mesmo valor de luminosidade apareçam igualmente brilhantes ao olho humano, tornando-o ideal para gerar paletas de cores acessíveis e visualmente balanceadas.
Como exportar para Tailwind CSS?
Use a opção de exportação "Tailwind CSS" para obter uma configuração pronta para uso. Copie o código gerado para o seu arquivo tailwind.config.js em theme.extend.colors. Para Tailwind CSS v4, use o formato de exportação "@theme" com variáveis CSS.
Como usar Variáveis CSS?
Variáveis CSS (Custom Properties) permitem que você defina cores uma vez e as reutilize em toda a sua folha de estilos. Exporte como "Variáveis CSS" e adicione o código gerado ao seu arquivo CSS global. Então referencie as cores usando var(--primary-500) nos seus estilos.
Como gerar paleta para dark mode?
Para dark mode, escolha uma cor base mais escura ou use o algoritmo "Dark Mode Ready". Este algoritmo gera tons otimizados para fundos escuros, garantindo que os tons mais claros tenham contraste suficiente. Você também pode usar o Preview UI para testar sua paleta em modo escuro.
Qual a diferença entre OKLCH e HSL?
HSL (Hue, Saturation, Lightness) é um espaço de cores mais antigo onde cores com o mesmo valor de luminosidade podem parecer diferentes em brilho. OKLCH é perceptualmente uniforme, garantindo que cores com o mesmo valor de luminosidade apareçam igualmente brilhantes, resultando em paletas mais harmoniosas e acessíveis.
Como garantir acessibilidade nas cores?
Use a aba "Contraste" para verificar se suas combinações de cores atendem aos padrões WCAG AA (4.5:1) ou AAA (7:1). A ferramenta mostra automaticamente quais tons são seguros para texto branco ou preto, e fornece recomendações para garantir que seu design seja acessível para todos os usuários.
Quantos tons devo usar no meu design system?
A escala padrão de 11 tons (50-950) é ideal para a maioria dos design systems, oferecendo flexibilidade suficiente sem sobrecarregar. Para projetos menores, 9 tons podem ser suficientes. Para sistemas complexos com muitas variações, 11 tons fornecem granularidade adequada para todos os casos de uso.
Posso usar essas paletas comercialmente?
Sim! As paletas geradas são 100% livres para uso comercial e pessoal. Você tem total propriedade das cores geradas e pode usá-las em qualquer projeto, incluindo produtos comerciais, sites, aplicativos e materiais de marketing sem restrições.