O que é uma harmonia de cores?

Uma harmonia de cores é um conjunto de cores escolhidas pela posição no círculo cromático, uma forma clássica de obter combinações que parecem equilibradas juntas. Cores complementares ficam opostas, análogas são vizinhas, triádicas ficam distribuídas igualmente a um terço do círculo, e os esquemas complementar dividido, tetrádico e quadrado são variações desses. Um esquema monocromático mantém o mesmo matiz e muda apenas a luminosidade. Este gerador gira o matiz da sua cor base para montar cada harmonia e permite copiar a paleta em HEX, RGB ou HSL.

Exemplos

Usando uma paleta em código, e girando um matiz para montar uma você mesmo:

CSS

:root {
  --color-primary: #2563eb;
  --color-accent: #ebad25;  /* complementary */
}

Sass

$primary: #2563eb;
$complement: adjust-hue($primary, 180deg);
$triad: adjust-hue($primary, 120deg);

JavaScript

// rotate the hue of an hsl() color
const rotate = ({ h, s, l }, deg) => ({ h: (h + deg + 360) % 360, s, l });
rotate({ h: 221, s: 83, l: 53 }, 180); // { h: 41, ... }

Python

import colorsys

h, l, s = colorsys.rgb_to_hls(37 / 255, 99 / 255, 235 / 255)
complement = colorsys.hls_to_rgb((h + 0.5) % 1, l, s)

Casos de uso

Escolher uma cor de destaque

Parta da sua cor de marca principal e use a complementar ou a complementar dividida para calls to action e destaques.

Gráficos com várias séries

Paletas triádicas, tetrádicas e quadradas dão cores bem distintas para as séries de um gráfico que ainda parecem fazer parte do mesmo conjunto.

Interfaces calmas e coesas

Paletas análogas e monocromáticas mantêm o layout tranquilo e unificado, ótimo para dashboards e páginas com muita leitura.

Explorar um ponto de partida

Teste todas as harmonias com a mesma cor base para comparar estilos rapidamente antes de definir uma paleta na sua ferramenta de design.

Perguntas frequentes

Qual círculo cromático é usado?

O círculo RGB sobre o qual o HSL é construído, o mesmo usado pelo CSS e pelas ferramentas de design para tela. Círculos de pintura baseados em vermelho, amarelo e azul (RYB) posicionam as complementares de outra forma, por exemplo azul oposto a laranja em vez de amarelo.

Qual a diferença entre tetrádica e quadrada?

As duas usam quatro cores formadas por dois pares complementares. A quadrada as distribui igualmente, a 90 graus. A tetrádica, ou retângulo, usa pares separados por 60 graus, o que costuma dar um par dominante e é mais fácil de equilibrar.

Essas cores serão acessíveis juntas?

Não necessariamente. Uma harmonia trata de matiz, não de contraste, e duas cores harmônicas podem ter luminosidade muito parecida. Verifique qualquer par de texto e fundo com o Verificador de Contraste antes de usar.

Como as cores monocromáticas são escolhidas?

O matiz e a saturação se mantêm e a luminosidade se move proporcionalmente em direção ao preto e ao branco: duas versões mais escuras e duas mais claras em torno da cor base, assim os passos continuam visíveis mesmo com bases muito claras ou muito escuras.

Meus dados são enviados a algum servidor?

Não. Cada paleta é calculada no seu navegador com JavaScript puro. Nada do que você informa é transmitido ou armazenado.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Gradiente CSS Seletor de Cor de Imagem Simulador de Daltonismo