Gerador de paletas de cores
Escolha uma cor base e gere na hora harmonias da teoria das cores – complementares, análogas, tríade, tétrade, complementar dividido e monocromáticas – como amostras ao vivo que você pode copiar em HEX, RGB, HSL, variáveis CSS ou uma configuração do Tailwind.
Complementares
A cor base e sua oposta no círculo (matiz + 180°) – a combinação de maior contraste.
Análogas
A cor base ladeada por suas duas vizinhas no círculo (matiz ± 30°) – um esquema calmo e coeso.
Tríade
Três cores espaçadas uniformemente a 120° (matiz, +120°, +240°) – vibrantes, porém equilibradas.
Tétrade (retângulo)
Quatro cores formando um retângulo no círculo (matiz, +90°, +180°, +270°) – dois pares complementares.
Complementar dividido
A cor base mais as duas cores de cada lado de sua complementar (matiz +150° e +210°) – um contraste forte, mais fácil de equilibrar.
Monocromáticas
Um único matiz representado como uma rampa de luminosidade do claro ao escuro – uma escala harmoniosa sem esforço.
Exportar paleta
Copie a harmonia selecionada como propriedades personalizadas do CSS prontas para colar ou como uma configuração de cores do Tailwind.
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}Sobre o gerador de paletas de cores
Um gerador de paletas de cores transforma uma única cor base em um conjunto de cores que funcionam juntas, usando a geometria do círculo cromático. As harmonias da teoria das cores são simplesmente relações definidas entre matizes: cores situadas opostas umas às outras, lado a lado, ou distribuídas uniformemente ao redor do círculo. Esta ferramenta pega sua cor base, lê seu matiz, saturação e luminosidade (HSL) e gira o matiz em quantidades fixas para construir seis esquemas clássicos – complementares (matiz + 180°), análogas (matiz ± 30°), tríade (120° de distância), tétrade ou retângulo (90° de distância), complementar dividido (de cada lado da complementar) e monocromáticas (um matiz, luminosidade variada). Cada paleta é mostrada como amostras ao vivo para que você veja as relações em vez de apenas ler números, e cada cor vem com seus valores HEX, RGB e HSL prontos para copiar. Quando tiver um esquema de que gosta, exporte-o como propriedades personalizadas do CSS ou uma configuração de cores do Tailwind e leve-o direto para um projeto. Foi feito para designers, desenvolvedores, ilustradores e qualquer pessoa que escolha cores para um site, uma marca, um gráfico, uma apresentação ou um interior – um jeito rápido de partir de uma cor que você ama para uma paleta inteira e equilibrada.
Como usar este gerador
- 1 Escolha uma cor base com o seletor de amostra, ou digite qualquer valor hex (por exemplo #3498DB ou #39F) no campo.
- 2 Percorra as seis seções de harmonia – complementares, análogas, tríade, tétrade, complementar dividido e monocromáticas –, cada uma mostrada como amostras de cor ao vivo.
- 3 Copie qualquer cor individual em HEX com o botão de cada amostra; cada amostra também exibe os valores RGB e HSL correspondentes.
- 4 Escolha uma paleta e um formato na caixa de exportação para copiar propriedades personalizadas do CSS ou uma configuração de cores do Tailwind e, em seguida, cole no seu projeto.
Como funcionam as harmonias de cores (o círculo cromático)
Cada harmonia é uma rotação do matiz da cor base ao redor do círculo cromático de 360°, mantendo a saturação e a luminosidade iguais. Trabalhar em HSL (matiz, saturação, luminosidade) facilita isso: apenas o matiz muda. Complementares – matiz + 180°. As duas cores ficam diretamente opostas, gerando o contraste mais forte. Análogas – matiz − 30°, matiz, matiz + 30°. Cores vizinhas que se misturam suavemente e parecem harmoniosas. Tríade – matiz, matiz + 120°, matiz + 240°. Três cores nos vértices de um triângulo equilátero: vívidas, mas equilibradas. Tétrade (retângulo) – matiz, matiz + 90°, matiz + 180°, matiz + 270°. Dois pares complementares para um esquema rico de quatro cores. Complementar dividido – matiz, matiz + 150°, matiz + 210°. A cor base com os dois matizes que ladeiam sua complementar – quase o contraste da complementar, mas mais suave. Monocromáticas – um único matiz em vários níveis de luminosidade, de tons claros a sombras escuras. Por exemplo, a cor base #3498DB tem um matiz de cerca de 204°. Sua complementar é 204° + 180° = 24° (um laranja), seus parceiros de tríade estão em 324° e 84°, e seus complementares divididos em 354° e 54°. O cálculo é feito em HSL e reconvertido para HEX em cada amostra.
Perguntas frequentes
O que é uma cor complementar?
Uma cor complementar é a cor diretamente oposta a outra no círculo cromático – uma rotação de matiz de 180°. Azul e laranja, vermelho e verde, e amarelo e roxo são pares complementares. Colocadas lado a lado, criam o maior contraste possível, o que faz cada cor parecer mais intensa; por isso os pares complementares são populares para chamadas para ação, destaques e tudo o que precisa se sobressair. Este gerador encontra uma complementar pegando o matiz da sua cor base e somando 180°.
Como se faz uma paleta de cores?
Comece com uma cor base de que você goste e use as relações da teoria das cores para derivar o resto em vez de adivinhar. Escolha uma harmonia que combine com o clima: esquemas análogos ou monocromáticos parecem calmos e unificados, enquanto complementares, tríade e complementar dividido acrescentam contraste e energia. Mantenha a saturação e a luminosidade consistentes para que as cores pareçam um conjunto, e limite-se a um punhado de cores mais neutros. Esta ferramenta automatiza esse processo – digite uma cor base e ela gera seis paletas prontas para copiar em HEX, RGB, HSL, variáveis CSS ou uma configuração do Tailwind.
O que é um esquema de cores em tríade?
Um esquema de cores em tríade usa três cores distribuídas uniformemente ao redor do círculo cromático, a 120° de distância – por exemplo vermelho, azul e amarelo. As paletas em tríade são vibrantes e cheias de contraste sem deixar de parecer equilibradas, porque os três matizes estão igualmente distantes uns dos outros. Uma abordagem comum é deixar uma cor dominar e usar as outras duas como destaques. Neste gerador, a paleta em tríade é sua cor base mais os matizes a +120° e +240°.
O que é um esquema de cores análogo?
Um esquema de cores análogo usa cores que ficam lado a lado no círculo, normalmente dentro de cerca de 30° do matiz base – como azul, azul-esverdeado e verde. Como os matizes estão tão próximos, as paletas análogas parecem suaves, naturais e harmoniosas, e é por isso que aparecem tanto na natureza (pores do sol, folhagens, o oceano). Elas têm menos contraste que os esquemas complementares, então ajuda escolher uma cor dominante. Esta ferramenta constrói uma paleta análoga a partir dos matizes a −30°, da cor base e a +30°.
Ferramentas de design e cor relacionadas
O gerador de paletas combina naturalmente com o conversor de cor para traduzir qualquer amostra entre HEX, RGB, HSL, HSV e CMYK, o verificador de contraste para garantir que suas cores sejam legíveis e acessíveis segundo a WCAG, o gerador de gradientes CSS para mesclar cores da paleta em fundos suaves, e a calculadora de proporção de tela para o resto do seu fluxo de trabalho de design.