Por que nossos olhos precisam de esquemas de paleta de cores complementares ... e onde você pode fazê-los

Esquemas de paleta de cores complementares

Você sabia que existe ciência biológica por trás de como duas ou mais cores se complementam? Não sou oftalmologista nem optometrista, mas tentarei traduzir a ciência aqui para pessoas simples como eu. Vamos começar com as cores em geral.

Cores são frequências

Uma maçã é vermelha ... certo? Bem, na verdade não. A frequência com que a luz é refletida e refratada da superfície de uma maçã a torna detectável, convertida por nossos olhos como sinais, enviados ao nosso cérebro, onde a identificamos como “vermelha”. Ugh ... isso dói minha cabeça só de pensar nisso. Mas é verdade ... cor é simplesmente uma frequência de luz. Esta é uma visão do espectro eletromagnético e das frequências de cada cor:

Cor e o espectro eletromagnético

É exatamente por isso que a luz branca apontada para um prisma produz um arco-íris. O que realmente está ocorrendo é que o cristal está mudando a frequência do comprimento de onda conforme a luz é refratada:

Prisma
O prisma de cristal dispersa a luz branca em várias cores.

Seus olhos são detectores de frequência

Seu olho é, na verdade, apenas um detector de frequência para a gama de frequências de cores no espectro eletromagnético. Sua capacidade de detectar cores ocorre por meio de diferentes tipos de cones na parede do olho, que são conectados aos nervos ópticos. Cada faixa de frequência é detectada por alguns desses cones e, em seguida, traduzida em um sinal para o nervo óptico, enviado ao cérebro, onde é identificado.

Você já percebeu que pode ficar olhando por muito tempo para algo de alto contraste, desviar o olhar e continuar a ver uma imagem residual que não corresponde às cores originais que você estava olhando? Digamos que seja um quadrado azul em uma parede branca:

Depois de um tempo, as células do olho que processam a luz azul ficarão cansadas, tornando o sinal que enviam ao cérebro um pouco mais fraco. Uma vez que essa parte do espectro visual é ligeiramente suprimida, quando você olha para uma parede branca depois de olhar para o quadrado azul, você verá uma leve pós-imagem laranja. O que você está vendo é o espectro branco de luz da parede, menos um pouquinho de azul, que seu cérebro processa como laranja.

Teoria da Cor 101: Fazendo Cores Complementares Trabalharem para Você

Se esse cansaço não acontecesse, nossos olhos e cérebros não teriam que trabalhar tanto para interpretar os vários comprimentos de onda (por exemplo, cores) que estão vendo.

Ruído visual versus harmonia

Vamos fazer uma analogia de som versus cor. Se você ouviu diferentes frequências e volumes que não eram complementares entre si, você pensaria nisso como barulho. Não é diferente da cor, em que o brilho, o contraste e a cor detectados podem ser visualmente barulhento ou complementar. Em qualquer meio visual, queremos trabalhar em direção à harmonia.

É por isso que você não vê um figurante no fundo de um filme vestindo uma camisa vermelha brilhante. E é por isso que os decoradores de interiores trabalham duro para encontrar cores complementares nas paredes, móveis, arte e outras características do ambiente que estão projetando. A cor é fundamental para criar o clima que o visitante obtém quando entra nele, com base na facilidade de seu cérebro interpretar as cores.

As tuas paleta de cores é o equivalente a montar uma banda em bela harmonia. E assim como as vozes e os instrumentos reunidos se alinham em volume e frequência ... o mesmo ocorre com as cores complementares de sua paleta de cores. O design da paleta de cores é realmente uma forma de arte para os profissionais que ajustaram sua detecção de cores, mas é absolutamente uma ciência computacional porque as frequências complementares podem ser calculadas.

Mais sobre harmonias em breve ... vamos voltar à teoria das cores.

Cores RGB

Pixels dentro do espectro digital são combinações de vermelho, verde e azul. Vermelho = 0, verde = 0 e azul = 0 é exibido como branco e vermelho = 255, verde = 255 e azul = 255 é visto como preto. Tudo no meio é uma cor diferente composta dos três. O básico de calcular uma cor complementar é muito simples ... apenas subtraia os valores RGB de 255 para o novo valor RGB. Aqui está um exemplo:

A diferença nesta frequência de luz entre o laranja e o azul é suficientemente distante para ser contrastante, mas não tão longe que seja difícil para nossos olhos interpretarem. As frequências de cores são complementares e agradam aos nossos receptores!

Calcular uma cor é fácil ... calcular 3 ou mais cores complementares requer que você calcule quantidades equivalentes entre cada uma das opções. É por isso geradores de esquema de paleta de cores vem a calhar! Com muito poucos cálculos necessários, essas ferramentas podem fornecer várias cores que se complementam.

The Color Wheel

A compreensão da relação entre as cores é melhor visualizada usando uma roda de cores. As cores são organizadas em um círculo com base não em sua frequência relativa. A distância radial é a saturação da cor e a posição azimutal no círculo como o matiz da cor.

The Color Wheel

Fato engraçado: Sir Isaac Newton desenvolveu a Roda de Cores pela primeira vez em 1665, uma base para seus experimentos com prismas. Seus experimentos levaram à teoria de que vermelho, amarelo e azul eram as cores primárias das quais todas as outras cores são derivadas. Nota lateral ... ele até aplicou “notas” musicais a cada cor.

Arme-me com Harmonia ...

círculo de cores de newton

Tipos de Harmonia de Cores

As relações entre e como cada conjunto de cores complementares são calculadas são conhecidas como harmonias. Aqui está um ótimo vídeo de visão geral:

Diferentes características estão associadas a cada tipo:

  • Análogo - grupos de cores que estão lado a lado na roda de cores. 
  • Monocromático - grupos derivados de um único matiz de base e estendidos usando seus tons, tons e matizes.
  • Tríade - grupos de cores que são uniformemente espaçados em torno do cor roda
  • Complementar - grupos de cores opostas na roda de cores.
  • Dividir Complementar - uma variação de complementar onde que usa duas cores adjacentes ao complemento.
  • Retângulo (tetrádico) - usa quatro cores organizadas em dois pares complementares
  • Quadrado - semelhante ao retângulo, mas com todas as quatro cores espaçadas uniformemente em torno do círculo de cores
  • Compound - cor e as duas cores adjacentes à sua cor complementar
  • Shades - ajuste da tonalidade (aumento da luminosidade) ou tonalidade (escuridão) da cor primária.

Estes não são temas subjetivos, são cálculos matemáticos reais com bons nomes aplicados que nos ajudam a entender melhor os cálculos.

Geradores de esquema de paleta de cores

Usando um gerador de esquema de paleta de cores, você pode obter belas combinações de cores complementares como esta:

Costumo usar geradores de esquema de paleta de cores quando estou trabalhando em sites de clientes. Como não sou um especialista em cores, essas ferramentas me ajudam a selecionar melhor coisas como planos de fundo, bordas, planos de fundo de rodapé, cores de botões primários e secundários. O resultado é um site muito mais agradável aos olhos! É uma estratégia sutil e incrivelmente poderosa para aplicar ao design de qualquer coisa - de um anúncio a um site inteiro.

Aqui estão alguns excelentes geradores de esquema de paleta de cores online:

  • adobe - uma ferramenta fantástica com até 5 cores onde você pode testar diferentes tipos, fazer ajustes e até mesmo salvar seu tema em qualquer produto Adobe.
  • Cores da Marca - a maior coleção de códigos de cores de marcas oficiais.
  • canva - carregue uma foto e eles a usarão como base para sua paleta!
  • Colllor - gerar uma paleta de cores consistente para a web com apenas alguns cliques. 
  • Designer de Cores - Basta escolher uma cor ou usar as cores pré-selecionadas e o aplicativo faz o resto. 
  • Caça de cores - plataforma gratuita e aberta para inspiração de cores com milhares de paletas de cores da moda escolhidas a dedo
  • Colorkuler - gere uma paleta de cores para o Instagram para torná-lo mais esteticamente agradável.
  • Colormind - um gerador de esquema de cores que usa aprendizado profundo. Ele pode aprender estilos de cores de fotografias, filmes e arte popular.
  • Espaço colorido - basta inserir de uma a três cores e gerar alguns esquemas!
  • Código de cores - uma experiência muito legal em toda a tela para criar sua paleta de cores com vários estilos de harmonia à esquerda.
  • CORES - uma comunidade criativa onde pessoas de todo o mundo criam e compartilham cores, paletas e padrões, discutem as últimas tendências e exploram artigos coloridos.
  • coolers - crie a paleta perfeita ou inspire-se com milhares de belos esquemas de cores.
  • Seletor de cores de dados - Use o seletor de paleta para criar uma série de cores que são visualmente equidistante
  • Khroma - usa IA para aprender de quais cores você gosta e cria paletas para você descobrir, pesquisar e salvar.
  • projeto de material - crie, compartilhe e aplique esquemas de cores para sua IU. Ele ainda vem com uma exportação para o seu aplicativo!
  • Cores Muzli - adicione um nome ou código de cor e produza uma bela paleta.
  • Paletton - escolha uma cor básica e inspire-se.
  • varanda - inspire-se com toneladas de paletas de cores incríveis. 

Cor e acessibilidade

Lembre-se de que, ao decidir criar seu próximo esquema de paleta, há uma quantidade significativa de pessoas com deficiências visuais e de cor que precisam interagir com suas experiências.

  • Contraste - Cada cor independente tem um luminância. As cores de sobreposições e objetos adjacentes devem ter uma taxa de luminância relativa de 4.5: 1 para que as pessoas com deficiência visual possam distingui-los. Eu não teria o trabalho de tentar calcular as proporções sozinho, você pode testar suas proporções de duas cores com Ilusório, Relação de Contraste, ou Seguro para cores.
  • Iconografia - Destacar um campo em vermelho não ajuda quem tem deficiência de cor. Certifique-se de aplicar algum tipo de mensagem ou ícone para que eles saibam que há um problema também.
  • Foco - Muitas pessoas navegam com teclados ou leitores de tela. Certifique-se de que sua interface de usuário seja adequadamente projetada com todas as marcações de acessibilidade para que eles possam tirar proveito de seu site. Para pessoas com deficiência visual, o uso de espaço em branco e a capacidade de aumentar ou diminuir o tamanho das fontes onde isso não destrói o layout é fundamental.

Você é um especialista em visão? Especialista em cores? Especialista em acessibilidade? Sinta-se à vontade para me fornecer qualquer orientação para melhorar este artigo!

Divulgação: estou usando links de afiliados neste artigo.

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.