Gerador de paleta de cores
Informe a cor base em HEX, RGB ou HSL ou escolha no seletor de cores e depois selecione a harmonia. O gerador de paleta de cores gira o matiz no círculo cromático HSL e mostra cada cor como amostra com o valor HEX, RGB e HSL para copiar.
Fonte: CSS Color 4, § 7, W3C – CSS Color Module Level 4: HSL colors. Atualizado em: .
Como o cálculo é feito
Como as harmonias de cores são geradas
O gerador converte a cor base para o modelo HSL (matiz H em graus, saturação S e luminosidade L em porcentagem, conforme o CSS Color Module Level 4). Em cada harmonia, só o matiz é girado; saturação e luminosidade continuam iguais. Depois, cada cor é convertida de volta para sRGB e arredondada para valores inteiros de 0 a 255.
Como criar uma paleta de cores
- Digite uma cor base em HEX, RGB ou HSL ou escolha no seletor.
- Escolha uma harmonia: complementar, análoga, triádica ou monocromática.
- Copie as cores com os valores HEX, RGB e HSL.
Exemplo: girando o azul hsl(217, 91%, 60%) em 180° no círculo cromático, obtém-se a complementar hsl(37, 91%, 60%), um laranja quente próximo de #F6AF3C.
| Harmonia | Rotação do matiz | Cores |
|---|---|---|
| Complementar | 0°, 180° | 2 |
| Análoga | −30°, 0°, +30° | 3 |
| Triádica | 0°, 120°, 240° | 3 |
| Complementar dividida | 0°, 150°, 210° | 3 |
| Tetrádica (retângulo) | 0°, 60°, 180°, 240° | 4 |
| Quadrado | 0°, 90°, 180°, 270° | 4 |
| Monocromática | sem rotação; luminosidade em 5 níveis | 5 |
Exemplo: o vermelho puro #FF0000 tem H = 0°, S = 100%, L = 50%. Girando 180°, chega-se a H = 180°, que é o ciano #00FFFF, a cor complementar. Na harmonia triádica entram também 120° (verde #00FF00) e 240° (azul #0000FF).
Paleta monocromática
Na opção “Monocromática”, o matiz não muda. A luminosidade é alterada em dois passos iguais em direção ao preto e em dois passos em direção ao branco. Com a cor padrão #3B82F6 (L ≈ 60%), os níveis ficam em cerca de 20%, 40%, 60%, 73% e 87%.
Texto legível sobre as amostras
O texto de cada amostra é preto ou branco, conforme o que der o maior contraste pela fórmula de luminância relativa das WCAG. Assim, o texto sempre atinge pelo menos 4,58:1. Para saber se duas cores da sua paleta funcionam como cor de texto e de fundo, use o verificador de contraste.
Limites
O HSL é um modelo geométrico simples, não perceptualmente uniforme: com o mesmo L, o amarelo parece bem mais claro que o azul. Por isso, as harmonias calculadas são um ponto de partida; o ajuste fino você pode fazer a olho. Tons de cinza não têm matiz, então girá-los resulta na mesma cor.
Mais ferramentas de cor: o conversor de cores, o verificador de contraste e o conta-gotas para pegar uma cor de uma foto.
Perguntas frequentes
Qual é a cor complementar do azul?
No círculo cromático HSL, ela fica a 180° de distância. Para o azul #0000FF (H = 240°), é o amarelo #FFFF00 (H = 60°); para #3B82F6 (H ≈ 217°), um laranja em torno de #F6AF3B.
Quais formatos de entrada o gerador aceita?
HEX com 3, 4, 6 ou 8 dígitos (com ou sem #), rgb() e rgba(), hsl() e hsla(), hsv()/hsb(), hwb() e também três números como “59, 130, 246” (lidos como RGB). As sintaxes com vírgula e com espaço do CSS Color 4 funcionam.
Como levo as cores para o CSS ou para um programa de design?
Cada amostra tem um botão para copiar o valor HEX. “Copiar como variáveis CSS” coloca na área de transferência um bloco :root com --farbe-1, --farbe-2 … Os valores RGB e HSL aparecem na tabela logo abaixo.
Por que algumas harmonias parecem desequilibradas?
O HSL mede a luminosidade só matematicamente. Com o mesmo valor de L, amarelo e ciano parecem muito mais claros que azul ou violeta. Se precisar, ajuste a luminosidade de cores individuais ou escolha uma cor base menos saturada.
Quais cores combinam entre si?
Combinam as cores em distâncias fixas no círculo cromático: complementares (180°) para contraste forte, análogas (tons vizinhos) para paletas calmas e triádicas (120°) para combinações coloridas equilibradas.
Fontes e base legal
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Conversor de cores: HEX, RGB, HSL, HSV, CMYKConverta cores: HEX para RGB, RGB para HEX, HSL, HSV, HWB e CMYK. Digite em qualquer formato ou use o seletor de cores e copie o resultado, tudo no navegador.
- Verificador de contraste de cores pelas WCAG 2.2Verifique o contraste entre cor do texto e do fundo: razão de contraste pelas WCAG 2.2, avaliação AA/AAA para texto normal e grande e elementos de interface.
- Pegar cor de imagem (conta-gotas)Descubra o código de cor de uma imagem: abra a foto, clique no ponto e copie HEX, RGB e HSL, além das cores principais. Sem upload, tudo fica no navegador.
- Calculadora de IMC segundo a OMSCalculadora de IMC: índice de massa corporal com altura e peso, classificação da OMS em escala de cores, faixa de peso normal para a sua altura e BMI Prime.
- Calculadora de caloriasCalculadora de calorias: informe idade, sexo, altura, peso, atividade e meta semanal e veja quantas calorias comer por dia para emagrecer ou ganhar peso.
- Gerador de cor aleatóriaGere uma cor aleatória ou uma paleta: aleatória, pastel, vibrante, escura, tons de uma cor ou harmonia. Com HEX, RGB, HSL e cor de texto legível.
- Calculadora de anilhas para barraCalculadora de anilhas para barra: informe o peso desejado e o da barra e veja quais anilhas vão em cada lado, em kg ou lb, com séries de aquecimento. Grátis.
- Calculadora triathlonCalculadora triathlon: informe o pace da natação, a velocidade no ciclismo, o pace da corrida e as transições e veja o tempo final e as parciais de cada etapa.
- Calculadora percentil bebê: peso, comprimento e perímetro cefálicoCalculadora percentil bebê pela OMS: informe sexo, idade, peso, comprimento e perímetro cefálico e veja o percentil, o escore z e a faixa normal até 5 anos.