Quick presets:
Complementary
5 colors · Click any swatch to copy HEX
Base
rgb(13, 162, 231)
hsl(199°, 89%, 48%)
Base Light
rgb(101, 200, 246)
hsl(199°, 89%, 68%)
Base Dark
rgb(8, 95, 135)
hsl(199°, 89%, 28%)
Complement
rgb(231, 82, 13)
hsl(19°, 89%, 48%)
Complement Light
rgb(246, 147, 101)
hsl(19°, 89%, 68%)
Export
:root {
--color-base: #0da2e7;
--color-base-light: #65c8f6;
--color-base-dark: #085f87;
--color-complement: #e7520d;
--color-complement-light: #f69365;
}- 7 regras de harmonia: gere paletas usando escalas de tonalidade complementares, triádicas, análogas, complementares divididas, tetrádicas, monocromáticas e estilo Tailwind a partir de qualquer cor inicial.
- Matemática de cores precisa: todas as conversões usam algoritmos RGB/HSL adequados com cálculo de taxa de contraste WCAG. Veja a luminância relativa e emblemas de aprovação/reprovação para texto em branco e preto em cada amostra.
- Valores HEX, RGB e HSL: Cada amostra exibe seus valores HEX, RGB e HSL. Clique em qualquer amostra para copiar o código HEX para a área de transferência instantaneamente.
- Exporte como CSS, SVG ou TXT: baixe sua paleta como propriedades personalizadas CSS, folha de amostras SVG ou lista HEX de texto simples. Perfeito para sistemas de design, configurações do Tailwind e documentação.
Casos de uso comuns para gerador de paleta de cores
- Design e prototipagem de UI: Gere paletas de cores harmoniosas para modelos de UI de sites e aplicativos. Use as regras complementares e análogas para criar interfaces balanceadas com hierarquia de cores adequada.
- Tailwind CSS e Design Tokens: Use a regra Shades 50 → 900 para gerar escalas completas de tonalidades para cores de marca personalizadas. Exporte variáveis CSS e conecte-as diretamente na configuração do seu sistema de design.
- Criação de sistema de design: crie um sistema de cores consistente para seus tokens de design. Gere paletas tetrádicas e triádicas que funcionam juntas e depois exporte como propriedades personalizadas CSS para a documentação do seu sistema de design.
- Identidade da marca e logotipos: ao construir uma identidade de marca, use as regras complementares ou análogas para encontrar cores que complementem a cor primária da sua marca, mantendo a harmonia visual.
- Apresentação e apresentações de slides: crie esquemas de cores coesos para apresentações. Use a regra monocromática para obter uma variedade de tonalidades e tonalidades que mantêm seus slides profissionais e consistentes.
- Visualizações de dados e gráficos: gere paletas de cores acessíveis para gráficos e infográficos. Cada amostra inclui emblemas de contraste WCAG para que você possa verificar a legibilidade em fundos brancos e pretos.
Perguntas frequentes
O Gerador de paleta de cores suporta sete regras de harmonia: Complementar (cores opostas na roda - alto contraste), Triádica (três cores uniformemente espaçadas - balanceadas), Análoga (cores adjacentes - harmoniosas), Complementar dividida (cor base mais duas próximas -complementos), Tetrádico (quatro cores em um retângulo - complexo), Monocromático (mesmo matiz em diferentes níveis de luminosidade) e Tons 50 → 900 (escala de tonalidade de dez etapas no estilo Tailwind).
Basta clicar em qualquer cartão de amostra para copiar seu código HEX para a área de transferência. Um ícone de marca de seleção aparece brevemente para confirmar a cópia. Cada amostra também exibe valores RGB e HSL para que você possa usá-los em qualquer ferramenta de design ou editor de código. Para exportação em massa, use as opções de download Variáveis CSS, SVG ou TXT na seção Exportar.
Cada amostra mostra dois emblemas – um para texto branco (⬜) e outro para texto preto (⬛). Os emblemas verdes indicam que a cor atende aos requisitos de contraste das WCAG; vermelho indica que falhou. Os níveis mostrados são AA Grande (3:1), AA (4,5:1) e AAA (7:1). Isso ajuda você a avaliar rapidamente se uma cor é legível como plano de fundo do texto.
Sim! Selecione a regra de harmonia "Shades 50 → 900" para gerar uma escala de tonalidades de dez etapas (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) - o mesmo padrão usado pelo Tailwind CSS. A cor base passa a ser o tom 500, com variantes mais claras e mais escuras geradas automaticamente. Exporte as variáveis CSS para usar diretamente em seu tailwind.config.js.
Você pode exportar sua paleta em três formatos: variáveis CSS (propriedades personalizadas como: root {...}), folha de amostra SVG (uma grade visual de amostras de cores com rótulos hexadecimais) e texto simples (lista de nomes: pares hexadecimais). Use o botão Copiar CSS ou os botões Baixar para arquivos CSS, SVG ou TXT.
Todas as conversões de cores usam algoritmos padrão para conversão RGB↔HSL com representação adequada de matiz (0-360°), saturação (0-100%) e luminosidade (0-100%). As taxas de contraste são calculadas usando a fórmula de luminância relativa WCAG 2.1, que leva em conta a correção gama não linear dos dispositivos de exibição. Isso garante informações de cores precisas e confiáveis.
Sim, o Color Palette Generator é totalmente gratuito, sem necessidade de inscrição. Não há taxas ocultas, recursos premium e limites de quantas paletas você pode gerar. Como tudo é executado localmente no seu navegador, não há custos de servidor ou limites de API.
Após o carregamento inicial da página, o Gerador de paleta de cores funciona totalmente offline. Todas as funções matemáticas de cores, renderização de amostras e exportação são executadas em seu navegador sem nenhuma solicitação do servidor. Isso o torna uma ferramenta confiável para designers e desenvolvedores que trabalham em ambientes com conectividade limitada ou inexistente à Internet.