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

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:

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

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.