Ir para o conteúdo principal
Bethemesh
Imagens e gráficos

Gerador de paleta de cores

Escolha uma cor de base e uma harmonia: a paleta aparece em amostras HEX e HSL para copiar, com as variáveis CSS.

  • Área de transferência

Integrar este widget

Personalize o resultado, verifique a pré-visualização e copie o código.

Pré-visualização

Tipo de código de integração

Código a copiar

Responsivo e redimensionado automaticamente pela Bethemesh.

Cor de base

Código HEX, rgb() ou hsl(); a transparência é ignorada.

Paleta

    Variáveis CSS

    Esta ferramenta foi útil?

    Como funciona esta ferramenta?

    Uma paleta harmoniosa assenta em cores colocadas em ângulos precisos do círculo cromático: opostas para um contraste forte, vizinhas para um ambiente suave, distribuídas em triângulo para um conjunto equilibrado. Este gerador parte de uma cor de base, a sua ou a de uma marca, e calcula seis harmonias clássicas prontas a copiar em HEX, em HSL ou como variáveis CSS.

    Introduza a cor de base em HEX, rgb() ou hsl(), ou escolha-a no seletor. É convertida em tom, saturação e luminosidade (HSL); uma eventual transparência é ignorada.

    Nas harmonias de tom, a saturação e a luminosidade mantêm-se as da base e só o tom roda: Complementar acrescenta a cor a 180°, Análoga as vizinhas a −30° e +30°, Triádica as cores a 120° e 240°, Complementar dividida as de 150° e 210°, Tetrádica (quadrado) as de 90°, 180° e 270°. Monocromática mantém tom e saturação e cria cinco luminosidades, de −30 a +30 pontos, limitadas entre 5 e 95 %.

    Cada amostra mostra o código HEX e o valor HSL, com texto preto ou branco escolhido pela luminância para continuar legível. Um clique copia o código HEX; o bloco Variáveis CSS contém toda a paleta como --color-1, --color-2…

    Como usar esta ferramenta

    1. Escolha a cor de base

      Escreva um código como #3366FF ou use o seletor de cor.

    2. Selecione a harmonia

      Complementar, análoga, triádica, complementar dividida, tetrádica ou monocromática: a paleta atualiza-se de imediato.

    3. Copie as cores

      Clique numa amostra para copiar o código HEX ou copie o bloco de variáveis CSS.

    Cálculo das harmonias

    A cor de base é convertida em HSL; as harmonias deslocam o tom num ângulo fixo ou deslocam a luminosidade.

    Rotação do tom

    H_k = (H + δ_k) mod 360

    δ vale 180° (complementar), ±30° (análoga), 120° e 240° (triádica), 150° e 210° (complementar dividida), 90°, 180° e 270° (tetrádica).

    Luminosidades monocromáticas

    L_k = mín(95, máx(5, L + λ_k))

    λ vale −30, −15, 0, +15 e +30 pontos percentuais.

    H, L
    tom (em graus) e luminosidade (em %) da cor de base
    δ_k
    deslocamento de tom da k-ésima cor
    λ_k
    deslocamento de luminosidade da k-ésima cor monocromática

    Casos de uso

    Alargar uma cor de marca

    Encontre um acento complementar ou tons vizinhos à volta do azul de um logótipo.

    Criar tons de interface

    Gere cinco luminosidades do mesmo tom para fundos, contornos e estados ao passar o rato.

    Colorir um gráfico

    Obtenha três ou quatro cores bem distintas para as séries de um gráfico ou de um mapa.

    Exemplos

    Harmonia complementar e triádica de um azul

    225 + 180 = 405, ou seja 45°: um amarelo dourado. Na triádica, 225 + 120 = 345° (rosa framboesa) e 225 + 240 = 465, ou seja 105° (verde). Saturação e luminosidade ficam em 100 % e 60 %.

    Entrada

    Cor de base #3366FF (hsl(225, 100%, 60%)), harmonia Complementar e depois Triádica

    Resultado

    Complementar: #3366FF e #FFCC33; triádica: #3366FF, #FF3366 e #66FF33

    Paleta monocromática do mesmo azul

    A luminosidade de 60 % passa a 30, 45, 60, 75 e 90 %: dois tons escuros para texto ou botões e dois claros para fundos.

    Entrada

    Cor de base #3366FF, harmonia Monocromática

    Resultado

    #002699, #0039E6, #3366FF, #809FFF, #CCD9FF

    Dicas e boas práticas

    • Uma paleta complementar muito saturada vibra bastante: reserve a segunda cor para acentos (botões, ligações) e não para grandes áreas.
    • Parta de uma cor pouco saturada para obter uma paleta mais sóbria: todas as harmonias de tom herdam a sua saturação.
    • Verifique o contraste do texto sobre cada cor antes de a usar em conteúdos e teste a paleta com o simulador de daltonismo.
    • As harmonias são calculadas no círculo HSL: duas cores com a mesma luminosidade HSL podem parecer mais ou menos claras à vista (um amarelo parece mais luminoso do que um azul).

    Fontes e referências

    Perguntas frequentes

    Quantas cores tem cada paleta?

    Duas na complementar, três na análoga, triádica e complementar dividida, quatro na tetrádica e cinco na monocromática. A cor de base está sempre incluída.

    Que harmonia devo escolher?

    Complementar para um contraste forte, análoga para um ambiente homogéneo, triádica ou tetrádica para várias cores distintas, monocromática para uma interface sóbria.

    Porque é que todas as cores têm a mesma saturação?

    As harmonias de tom só rodam o tom; a saturação e a luminosidade vêm da cor de base, o que mantém o conjunto coerente.

    Os códigos copiados são exatos?

    Sim. Cada cor é calculada em HSL e convertida em HEX com canais arredondados a inteiros, num formato aceite por todos os navegadores.

    Como uso as variáveis CSS?

    Cole o bloco :root na sua folha de estilos e use var(--color-1), var(--color-2)… nas suas regras.

    A minha cor é guardada ou enviada?

    Não. A paleta é calculada no seu navegador e nada fica guardado depois de fechar a página.

    Ferramentas relacionadas

    Continue com estas ferramentas

    Ferramentas semelhantes ou complementares a esta.

    Ferramentas semelhantes

    Conversor de cores

    Converta uma cor entre HEX, RGB e HSL com os respetivos valores equivalentes.

    Imagens e gráficosUtilizar esta ferramenta

    Extrator de cores de imagem

    Extraia uma paleta dominante de uma imagem sem a enviar para um servidor.

    Imagens e gráficosUtilizar esta ferramenta

    Simulador de daltonismo

    Visualize uma imagem como pode ser percecionada com diferentes tipos de daltonismo.

    Imagens e gráficosUtilizar esta ferramenta

    Leia também

    TutorialBoas práticasIniciante

    Otimizar imagens para a Web sem perder qualidade

    Redimensionamento, compressão, WebP, AVIF e boas práticas: um método completo para tornar as imagens de um site mais leves sem degradar desnecessariamente o resultado.

    30 de agosto de 20264 min