Paletrês

3 cores · 3 comparações

Paletrês

Gere 3 cores e descubra, na hora, se elas combinam e se dá para ler um texto de uma cor em cima da outra.

  1. 1 Escolha
  2. 2 Confira
  3. 3 Teste
  4. 4 Exporte

Sua paleta ainda está vazia

Clique em Gerar paleta. O Paletrês sorteia 3 cores que combinam e que dão para ler. Depois você ajusta cada cor, troca por uma paleta pronta e testa tudo.

Para entender

Aprenda em poucos minutos

Cada explicação traz o link da fonte oficial, para você conferir e se aprofundar.

Por que 3 comparações?

Com 3 cores (A, B e C) existem 3 pares: AB, AC e BC. Cada par pode ser "texto sobre fundo" nas duas direções, A sobre B e B sobre A, mas a WCAG dá o mesmo número nos dois sentidos. Por isso são 3 comparações, e não 6.

Mesmo assim, o card mostra as duas prévias: texto escuro no fundo claro não parece igual a texto claro no fundo escuro.

Fonte oficial: W3C, técnica G18 (como calcular o contraste)

Harmonias clássicas

  • Análogo: vizinhas no círculo. Calmo.
  • Complementar: opostas (180°). Destaque forte.
  • Complementar dividido: as vizinhas da oposta.
  • Tríade: 3 cores a 120°. Alegre.
  • Quadrado: 4 cores a 90° (aqui usamos 3).
  • Composto: uma vizinha e uma oposta.
  • Tons e monocromático: uma cor só, mais clara ou mais escura.

Fontes oficiais (Adobe): Adobe Color · combinações da roda cromática

Proporção áurea

O número de ouro, φ ≈ 1,618, aparece em girassóis, conchas e na arte. O ângulo áureo (≈ 137,5°) divide o círculo nessa proporção: é como as sementes do girassol se espalham.

Na harmonia "Proporção áurea" do Paletrês, cada cor gira 137,5° no círculo e fica 1,618 vez mais escura que a anterior.

Fontes (Wolfram MathWorld): número de ouro · ângulo áureo

Sequência de Fibonacci

1, 1, 2, 3, 5, 8, 13, 21… Cada número é a soma dos dois anteriores. Ao dividir um termo pelo seguinte (13 ÷ 21), obtemos um número próximo de 0,618, o inverso do número de ouro.

Na harmonia "Fibonacci" do Paletrês:

  1. Sorteamos 3 termos seguidos, por exemplo 8, 13 e 21.
  2. O ângulo entre as cores é 360° × 13 ÷ 21, cerca de 222,9°.
  3. O brilho segue 21/21, 13/21 e 8/21: 100%, 62% e 38%.

Fontes: OEIS A000045 · Wolfram MathWorld

Cores em imagens com IA generativa

Quando você pede uma imagem a uma IA generativa, a cor é uma das escolhas que mais mudam a mensagem. A mesma cena em tons quentes, como laranja e dourado, costuma passar aconchego. Em azuis frios, calma ou distância. Com cores vivas e muito contraste, energia.

A psicologia das cores estuda esse efeito: a cor carrega significado e pode influenciar emoções e comportamentos, sempre dependendo do contexto e da cultura.

Dica: descreva a paleta no prompt, com o nome ou o HEX das cores. Ex.: "paleta em azul-petróleo, creme e laranja, luz suave de fim de tarde". Assim as imagens ficam com a mesma identidade do seu site.

Fontes: Psicologia das Cores (Elliot e Maier, Annual Review of Psychology) · Adobe Firefly, como descrever cores no prompt

Color grading no cinema

No cinema, color grading é a etapa da pós-produção em que o colorista ajusta as cores de cada cena para contar a história. Tons frios e azulados costumam passar tensão ou solidão. Tons quentes e dourados, nostalgia e aconchego.

Antes do digital, isso era feito no laboratório: o color timer escolhia a luz de cópia de cada plano do filme. Hoje é feito em programas como o DaVinci Resolve. A ASC (a associação americana dos diretores de fotografia) criou padrões como o ASC CDL, para as cores não mudarem de um programa para outro.

No Paletrês usamos uma técnica simples, o mapa de gradiente: as sombras da foto recebem a cor mais escura, os meios-tons a cor do meio e as luzes a cor mais clara.

Fontes: ASC, Motion Imaging Technology Council · Blackmagic Design, DaVinci Resolve · Adobe, mapa de gradiente no Photoshop

Sobre

De onde veio o Paletrês

A ideia surgiu de um incômodo meu. Toda vez que eu ia conferir o contraste pela WCAG, as ferramentas só deixavam comparar duas cores. E eu quase sempre trabalho com três cores numa paleta. Então eu fazia a conta três vezes e anotava tudo.

Também resolvi juntar num lugar só tudo de legal que eu via em outros sites para designers: harmonias do círculo cromático, tints e shades, simulador de daltonismo, mockups e color grading. O Paletrês é um "Megazord" de recursos para analisar paletas de cores e tornar a vida de designers e de quem não é designer mais fácil.

Mário Lúcio, idealizador do Paletrês

Inspirado em: Color Shark · Adobe Color · Make Tints and Shades · Color Hunt

Se você gostou dessa página e quer entender mais sobre letramento em IA generativa, acesse prazocerto.me agora mesmo!

Acessar prazocerto.me