Pressione a barra de espaço para gerar paletas de cores harmoniosas, trave as cores de que gostar e depois copie códigos HEX ou exporte variáveis CSS, Tailwind e JSON. Tudo é feito no seu navegador e nada é enviado.
Gerador de paleta de cores
Pressione a barra de espaço para gerar paletas de cores harmoniosas, trave as cores de que gostar e depois copie códigos HEX ou exporte variáveis CSS, Tailwind e JSON. Tudo é feito no seu navegador e nada é enviado.
As paletas são geradas e verificadas no seu navegador e nada é enviado. Um link de compartilhamento leva apenas os códigos das cores na parte depois do #, e as suas escolhas de modo, estilo e tamanho ficam lembradas só neste dispositivo.
O Gerador de paleta de cores monta um conjunto de cores que combinam entre si. Pressione a barra de espaço ou o botão Generate e aparece uma nova paleta de duas a dez cores, que vai de escolhas totalmente aleatórias, espalhadas o mais longe possível umas das outras, a harmonias clássicas em torno de uma cor base: análoga, complementar, complementar dividida, tríade, tétrade, monocromática, tons escuros e tons claros. Trave qualquer cor de que gostar e as outras continuam mudando ao redor dela, volte pelas suas últimas trinta paletas com o desfazer e arraste as amostras para uma nova ordem. Cada cor mostra os valores HEX, RGB e HSL, a cor nomeada mais próxima e o contraste WCAG exato contra texto branco e preto. Quando a paleta estiver pronta, copie-a como códigos HEX, variáveis CSS, SCSS, um trecho de Tailwind ou JSON, ou compartilhe um link que leva apenas os códigos das cores.
Recursos
Nove modos de geração: aleatório, análogo, complementar, complementar dividido, tríade, tétrade, monocromático, tons escuros e tons claros
Paletas aleatórias em um estilo à escolha (qualquer um, vibrante, pastel, suave, escuro ou claro), com as cores sempre bem separadas entre si
Um campo de cor base que monta cada harmonia em torno da cor da sua marca ou de um tom favorito
Botões de trava que mantêm as cores escolhidas no lugar enquanto o resto é gerado de novo, para você refinar uma paleta passo a passo
De duas a dez cores, reordenação por arrastar ou por botões de seta, e desfazer e refazer nas últimas 30 paletas
Valores HEX, RGB e HSL, a cor nomeada mais próxima e o contraste WCAG exato do texto branco e do preto em cada amostra
Um verificador de contraste que avalia qualquer par de texto e fundo da sua paleta em relação a AA e AAA
Exportação como lista de HEX, variáveis CSS, SCSS, um trecho de Tailwind ou JSON, além de um link de compartilhamento que leva só os códigos das cores
Como usar Gerador de paleta de cores
Escolha um modo e, para Random, um estilo; acrescente uma cor base se quiser que a paleta seja construída em torno de uma
Pressione a barra de espaço ou Generate até aparecer uma cor de que goste e depois trave-a para que ela fique enquanto as outras mudam
Clique em uma amostra para copiar o código HEX, abra os detalhes dela para ver RGB, HSL e contraste e arraste as amostras para a ordem que quiser
Confira o contraste do texto em qualquer par, depois abra Export e copie a paleta como variáveis CSS, SCSS, Tailwind ou JSON
Exemplo
Entrada
Mode: Analogous · base color #2a9d8f · 5 colors
Saída
#3d4dc3 #2b668a #2a9d8f #69d391 #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three
Cores análogas ficam lado a lado no círculo cromático, com até 30 graus de distância. As razões de contraste usam a fórmula WCAG, então cada amostra informa que cor de texto usar sobre ela.
Erros comuns e solução de problemas
Pressionar a barra de espaço não gera uma paleta nova. — A barra de espaço só gera quando nenhum botão, link ou campo de texto está com o foco do teclado, porque esses elementos reservam a barra para si. Pressione Tab até nada ficar destacado, ou clique no botão Generate.
O botão Generate está acinzentado. — Todas as cores estão travadas, então não há nada para mudar. Destrave pelo menos uma cor com o botão de trava dela ou com a tecla L.
Um link de paleta compartilhada abre uma paleta vazia ou diferente. — As cores ficam na parte do endereço depois do sinal #. Se um app de chat cortou o link, copie o endereço inteiro de novo; um hash que não seja de dois a dez códigos HEX válidos de seis dígitos é ignorado.
O trecho de Tailwind não altera as minhas cores existentes. — Ele acrescenta um grupo de paleta em theme.extend.colors. Cole-o no objeto colors da sua configuração e use classes como bg-palette-1 ou text-palette-3.
Perguntas frequentes
Como funcionam os modos de harmonia do Gerador de paleta de cores?
Cada modo escolhe matizes a distâncias fixas no círculo cromático a partir de um matiz base: cores análogas ficam a até 30 graus de distância, a complementar usa o matiz oposto, a complementar dividida os dois matizes ao lado dele, a tríade espaça três matizes a 120 graus e a tétrade quatro matizes a 90 graus. Monocromática, tons escuros e tons claros mantêm um só matiz e mudam a luminosidade e a saturação dele, e Random espalha as cores o mais longe que consegue.
Como gero uma paleta de cores em torno da cor da minha marca?
Digite ou escolha a cor da sua marca como cor base e depois escolha um modo de harmonia. A base é colocada na paleta e mantida fixa, e as outras cores são construídas em torno dela toda vez que você pressiona a barra de espaço. Alterne entre análoga, complementar e tríade para ver o quanto você quer que a paleta se afaste da cor da marca.
Como mantenho algumas cores e mudo o resto no Gerador de paleta de cores?
Trave as cores de que gosta com o botão de trava de uma amostra ou com a tecla L. Uma cor travada fica na sua posição enquanto uma nova paleta é gerada em torno dela, e o desfazer volta à paleta anterior se a nova for pior. Travar todas as cores desativa o Generate.
Como o Gerador de paleta de cores verifica o contraste do texto?
Ele usa a fórmula WCAG, que compara a luminância relativa de duas cores. O texto normal precisa de uma razão de pelo menos 4,5 para 1 para AA e 7 para 1 para AAA; o texto grande precisa de 3 para 1 e 4,5 para 1. Cada amostra mostra a razão para texto branco e preto, e o verificador de contraste avalia qualquer par de texto e fundo da paleta.
Como exporto uma paleta para variáveis CSS ou Tailwind?
Abra o painel Export e escolha um formato. CSS variables gera um bloco :root com --color-1 a --color-5, SCSS gera variáveis $color, Tailwind gera um grupo de paleta para colar em theme.extend.colors, e JSON e a lista HEX geram arrays simples. Cada um tem um botão de copiar.
Posso compartilhar uma paleta que fiz no Gerador de paleta de cores?
Sim. O endereço do seu navegador sempre guarda as cores atuais depois de um sinal #, por exemplo #264653-2a9d8f-e9c46a, e Copy link o copia. Quem o abrir vê a mesma paleta. A parte depois do # nunca é enviada a um servidor, e só as suas escolhas de modo, estilo e tamanho ficam lembradas neste dispositivo.