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 gira o matiz no círculo cromático HSL e mostra cada cor como amostra com o valor HEX, RGB e HSL para copiar.
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.
| 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.
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.
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:
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 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 1RM (repetição máxima)Estime seu 1RM a partir da carga e das repetições com as fórmulas de Epley e Brzycki, com tabela de %1RM de 1 a 10 repetições. Em kg ou lb.
- Calcule quanta água você precisa por diaQuanta água beber por dia? Ingestão de bebidas e de água total por idade, sexo, gravidez e amamentação, com os valores de referência da EFSA e da DGE alemã.
- Calculadora de calorias gastas no exercícioCalcule as calorias gastas em 30 esportes e atividades a partir do MET, do peso e da duração, segundo o Compendium 2024, com correção pessoal opcional.