Por que esse gradiente de cores é muito mais atraente do que outros?


24

Ando brincando com alguns gradientes em um site que estou desenvolvendo e estou realmente interessado na psicologia ou outro significado por trás de certas cores parecerem mais atraentes do que outras.

Aqui está o site agora:

Logon no site original Hub principal do site original

Os gradientes ali parecem bastante naturais para o design. Mas se eu começar a misturar e combinar, acabo com isso:

Tentativa diferente de gradiente Tentativa diferente de gradiente Tentativa diferente de gradiente

Não consigo encontrar outro gradiente decente que pareça "natural". Estou me perguntando o que a psicologia está por trás de como percebemos essas misturas de cores ... existe algum tipo de regra para encontrar cores que combinam bem gradualmente? Eu imagino que depende do tipo de sensação que você deseja. Agradeço toda e qualquer contribuição!


2
Esta é uma questão puramente subjetiva, baseada em opiniões. Só porque você sente que alguns gradientes são melhores, isso não significa que mais ninguém o fará.
Scott

6
Eu concordo com scott e vou tão longe a ponto de responder "Por que eles parecem bons?" com "Quem disse que eles parecem bem?". Mas isso é subjetivo. Meu comentário objetivo é: garanto que você está avaliando as cores no contexto de toda a tela que inclui a borda verde clara da janela. Somente essa cor o prejudicará contra certas opções de cores na janela de exibição.
21814 horatio

Muito bons pontos na capa do navegador e na cor azul. Eu votaria se tivesse o representante! Começarei a analisá-las no modo de tela cheia para evitar esse viés.
Hayden McAfee

Algo que eu notei hoje. Todos esses gradientes são possíveis com diferentes variações de pares LAB ao girar ao longo de A. Para aqueles com photoshop, entre no seletor de cores, marque a caixa de rádio aà direita e brinque com o controle deslizante vertical na paleta. A maioria (todas?) Das combinações mencionadas aqui pode ser encontrada nos diferentes valores do Aeixo. Não tenho certeza se isso tem algum suporte científico, mas foi apenas uma observação.
Qix

Respostas:


34

A principal diferença entre o exemplo inicial e seus experimentos é que o original não cobre uma mudança tão drástica no tom.

Roda de cores saturadas

Passar de amarelo-dourado a magenta / rosa é cerca de 1/6 de volta na roda de cores. Por outro lado, suas experiências (vermelho-laranja a azul-violeta, azul-violeta a amarelo-verde e ciano a azul-violeta) são mais de 1/4 de volta.

Muita mudança não é percebida como uma única mudança em uma cor, mas como uma progressão através de várias cores. Como o gradiente está bastante condensado nos cabeçalhos, isso muda bastante e pode explicar por que não parece "natural" para você.

Se você quiser ter uma cor diferente para os blocos de cores principais de "destino", escolha uma cor vizinha para o início do gradiente. Por exemplo, para azul-violeta como ponto final, escolha um azul profundo ou uma magenta como ponto de partida. Para verde-amarelo como ponto final, comece com verde-claro ou vermelho.

Obviamente, eles ainda fornecerão diferentes "humores", dependendo do humor das cores envolvidas - o azul-violeta é uma cor muito mais fria e mais calma do que o rosa no original. Mas pelo menos os gradientes devem parecer um pouco mais suaves.


Calculei o deslocamento de matiz para as duas cores originais e obtive um valor de 96 (de 360 ​​possíveis valores de matiz). Então, cerca de um quarto de volta na roda de cores. Comecei a encontrar outros valores de cores com a mesma diferença e ainda assim os valores pareciam estranhos, embora mais naturais. Perdoe minha falta de familiaridade com cores e coisas assim, mas você pode pensar em alguma razão específica para isso? Talvez sejam apenas cores de um humor diferente. i.imgur.com/utU1Oex.png
Hayden McAfee

Nesse caso, sinto que não se trata tanto do gradiente, mas da cor final; o verde brilhante é bastante chocante. Compare-o com a versão no teste do @ cockypup, que é um verde muito mais suave (menos saturado / claro). É muito mais difícil quantificar o humor das cores, mas em geral as cores menos saturadas ou secundárias são um pouco mais calmas que os vermelhos e verdes brilhantes. Fica muito subjetivo, mas existem muitos recursos por aí, muitos com exemplos de boas combinações de cores.
AmeliaBR

4
Aqui está outra coisa a considerar: contraste. O amarelo é a cor mais brilhante, com seu máximo contraste em relação ao preto. No seu 1º exemplo, o amarelo é apenas o topo do seu gradiente. Não se destaca. "Parece" quase como um destaque no topo. Ajuda a mover o olho de baixo para cima do gradiente. No seu terceiro exemplo, o amarelo é a cor principal do gradiente. O corpo do gradiente sobressai. A parte superior do gradiente, que culturalmente é lida como o valor máximo, parece menos importante que o corpo. O olho luta entre cima e para baixo. Isso pode fazer com que pareça menos natural.
cockypup

29

Como você está perguntando "por que eles são percebidos de maneira diferente", aqui está outra coisa (muito nerd) a considerar: a luminescência percebida de uma cor RGB. Isso é difícil de aplicar, portanto, responda minha resposta quase da mesma maneira que trivialidades :)

O valor de luminescência de uma cor indica como você o "acende". Se a cor fosse uma lâmpada, uma cor com baixa luminescência seria percebida como fraca (lâmpada de 40W), enquanto uma cor com alta luminescência seria percebida como muito brilhante (lâmpada de 100W).

De fato, as cores RGB são exibidas usando pequenas "lâmpadas". As telas são compostas de pequenas "lâmpadas", três para cada pixel: R (ed), G (reen) e B (lue). Os valores específicos de R, G ad B de uma cor indicam o quão brilhante cada pequena lâmpada deve acender para criar a ilusão dessa cor. Por exemplo, a cor laranja RGB (255, 100, 0) é criada girando a lâmpada vermelha até sua potência máxima (255), tornando a lâmpada verde semi-escura (100) e desligando a lâmpada azul (0).

Aqui está uma ilustração mostrando algumas cores e como "brilhante" cada um dos componentes RGB deve ser criado para criar a ilusão da cor. Os pontinhos abaixo de cada cor indicam quão escuro ou brilhante o componente é produzido.

insira a descrição da imagem aqui

Como você pode ver na ilustração, para criar branco, por exemplo, você gira os três componentes ao máximo (255). Essa combinação das três pequenas "lâmpadas" é percebida pelo olho como branca (explicando por que seria uma grande digressão). Para criar preto, você desativa todos eles. Isso é fácil: sem luz, sem cor.

A luminescência de cada cor é calculada adicionando "quão brilhante" cada um dos 3 componentes é. O branco seria a cor com maior luminescência, já que os três componentes são voltados para o seu valor máximo. Preto, seria o mais baixo. O amarelo teria uma luminescência mais alta que o verde, pois para tornar o amarelo você precisa de 2 componentes no máximo, mas para tornar o verde, você só precisa de um. Então, mais ou menos você poderia dizer que

L = R + G + B

É um pouco mais complicado. Observando a ilustração, você perceberá que o componente verde parece mais brilhante. Na verdade, é percebida pelo olho como a mais brilhante. O azul, por outro lado, é percebido como muito escuro. A fórmula exata para calcular a luminescência leva isso em consideração.

L = 0,2126 R + 0,7152 G + 0,0722 B

Aqui está a ilustração novamente, com a luminescência calculada para cada cor.

insira a descrição da imagem aqui

Você notará que, como seus olhos poderiam ter lhe dito, o amarelo é mais luminoso que o laranja, mas o laranja é mais ou menos tão luminoso quanto o magenta.

Agora, peguei as cores de duas de suas paletas originais e calculei sua luminescência.

insira a descrição da imagem aqui

No primeiro caso, o que você gosta, notará que a luminescência da primeira cor, na parte inferior, é mais baixa (125) do que a da segunda cor, na parte superior (200). O gradiente, então, é percebido como um aumento na luminosidade, como se estivesse acendendo.

No segundo caso, não há muita diferença; portanto, o gradiente é percebido apenas como uma mudança de matiz.

No terceiro caso, a cor inferior tem uma luminescência mais alta que a superior, de modo que o gradiente é percebido como uma diminuição da luminosidade, como se estivesse escurecendo.

Isso explicaria por que, mesmo quando você seleciona duas tonalidades que são colocadas relativamente à mesma distância uma da outra na roda de cores que as que você gosta, o resultado seria percebido de maneira diferente.


Resposta fantástica! Obrigado pela explicação clara; Parece que minha resposta é realmente a combinação dessas respostas.
Hayden McAfee

Esta é uma resposta incrível. Tenho certeza que isso combinado com a resposta de Hayden pode resultar em alguns resultados impressionantes.
Qix

2
Observe que isso é um pouco complicado pela gama de exibição. Para obter um valor de luminescência preciso para uma cor RGB de exibição, primeiro aplique a correção gama para converter os valores R / G / B em um espaço de cor linear antes de calculá-los usando sua fórmula. Para uma gama de exibição típica de 2,2, a fórmula correta é, portanto, L = (0,2126 R ^ 2,2 + 0,7152 G ^ 2,2 + 0,0722 B ^ 2,2) ^ (1 / 2,2).
Ilmari Karonen

4

Em http://www.colormatters.com/color-and-design/basic-color-theory

1 - Um esquema de cores baseado em cores análogas

Cores análogas são quaisquer três cores que estão lado a lado em uma roda de cores de 12 partes, como verde-amarelo, amarelo e amarelo-laranja. Geralmente uma das três cores predomina.

2 - Um esquema de cores baseado em cores complementares

Cores complementares são quaisquer duas cores diretamente opostas uma à outra, como vermelho e verde e vermelho-púrpura e amarelo-verde. Na ilustração acima, existem várias variações de verde-amarelo nas folhas e várias variações de vermelho-púrpura na orquídea. Essas cores opostas criam contraste máximo e estabilidade máxima.

3 - Um esquema de cores baseado na natureza

A natureza oferece um ponto de partida perfeito para a harmonia das cores. Na ilustração acima, vermelho, amarelo e verde criam um design harmonioso, independentemente de essa combinação se encaixar em uma fórmula técnica para harmonia de cores.


1) Verde escuro a amarelo claro. Como uma imagem colorida em escala de cinza. 2) Vermelho v / s Verde Primavera / Ciano. Laranja v / s Azure. Indigo / Violet vs Yellow. Um dos dois deve estar menos saturado que o outro, para um contraste extra. 3) Observe como o vermelho é mais escuro e mais saturado do que a combinação verde-amarelo, que também é um gradiente de verde escuro a amarelo-limão claro.
Locoluis 27/09/18

3

Apenas adicionando à resposta da AmeliaBR (deve ser um comentário, mas eu quero postar uma imagem). Uma maneira de tentar "mudar" sua tonalidade, mas mantendo a mesma distância relativa entre as cores inicial e final, pode ser usando a ferramenta de tonalidade do Photoshop.

Pegue a primeira imagem (aquela com o gradiente que você gosta) e abra-a no Photoshop. Em seguida, abra a ferramenta Matiz / Saturação ( Image->Adjustment->Hue Saturationou Ctr+U) e brinque com o primeiro controle deslizante (Matiz). Isso mudará a tonalidade de toda a imagem, mas manterá a mesma relação entre todas as tonalidades existentes (em particular a matiz inicial e final de seus gradientes). Como a parte traseira da sua interface é preta (ou cinza neutro), a mudança de matiz não a afetará.

Se você encontrar uma combinação que você gosta, aceite as alterações de Matiz / Saturação (clique OK) e, usando a ferramenta Conta-gotas (pressione I), escolha as cores inicial e final do gradiente.

Neste exemplo, mudei a tonalidade -155 e o gradiente agora passa do (sempre na moda) Aquamarine Green para Blue, que é um gradiente legal e calmante com ecos náuticos.

insira a descrição da imagem aqui

Lembre-se, a percepção de cores tem um componente muito pessoal. O que você pode achar "natural" para outra pessoa pode ser percebido como uma aberração.


Entendo, é uma boa maneira de abordar isso. Talvez eu deva ter algumas aulas de teoria das cores para ter uma idéia melhor de como certas cores são percebidas em geral!
Hayden McAfee
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.