Existe uma boa maneira de estabelecer um esquema de cores verde-amarelo-vermelho?

A teoria básica das cores nos diz que uma paleta de cores de verde, amarelo e vermelho é ridiculamente feia, são cores que se chocam. Se considerarmos o verde como cor proeminente, as cores análogas que o acompanham são vermelho e azul - não há espaço para amarelo nesse esquema de cores.

Então, existe alguma maneira de combinar verde, amarelo e vermelho em um esquema de cores sem ofuscar os usuários?

Como exemplo, eu tenho uma página em um site onde essas cores são usadas para medir o nível necessário de uma habilidade para um projeto em relação ao nível real dessa habilidade. O verde satisfaz ou excede esse nível, o amarelo indica um pequeno déficit de expectativa e o vermelho significa que eles não são bons o suficiente ou carecem totalmente de uma determinada habilidade.

Aqui está o meu exemplo (ignore os campos laranja e cinza ao redor das letras, eles não são relacionados).

Todos nós podemos certamente concordar que isso parece terrível, mas é esse formato que eu preciso aderir, a coisa toda Verde-Vermelho-Amarelo. : /

Sendo um programador principalmente, em oposição a um designer gráfico / da Web, meu entendimento da teoria das cores e da experiência do usuário é limitado.

Para colocar um ponto, a minha pergunta é: Como se pode estabelecer um esquema de cores tradicionalmente conflitante sem prejudicar a experiência do usuário?

(Se minha pergunta for inadequada, eu a removerei, não sabia onde perguntar, parecia a mais apropriada)

Verde, amarelo e vermelho não podem andar juntos? Os etíopes devem ser terrivelmente insultados. Google para imagens verdes, amarelas e vermelhas, e acho que você encontra vários exemplos atraentes (junto com os feios).

O desempenho de qualquer conjunto de cores depende das coordenadas exatas das cores e das posições relativas, formas, tamanhos dos objetos coloridos e do efeito que você deseja ter (por exemplo, calmante versus excitante, divertido versus sério, ousado versus sutil ) Não tenho regras rígidas para você, mas aqui estão algumas coisas para experimentar.

Compromisso de saturação de tamanho

Para evitar um efeito estridente (supondo que você não queira isso), o tamanho do objeto colorido deve ser inversamente proporcional à saturação da cor. Seu exemplo teve saturações bastante altas; portanto, tente saturas de cores mais baixas (por exemplo, pastéis) ou cor algo diferente do plano de fundo. Por exemplo, você pode colorir o texto e deixar o plano de fundo neutro ou colorir uma forma ou símbolo pequeno ao lado do texto. Este último proporcionaria a chance de usar a forma para codificar redundantemente a correspondência de habilidades para fins de acessibilidade e impressão em preto e branco (marca de seleção verde em Satisfied, ponto de exclamação amarelo em Shortfall e símbolo vermelho "não entre" em Not Good Enough) .

Espaçamento

A aparência das cores depende da proximidade entre elas. As cores que se chocam quando adjacentes parecem bem com uma pequena separação. Tente colocar uma borda neutra em torno de cada célula para separar mais as cores (como você tem nos cabeçalhos), a menos que haja algum significado para as células da mesma cor se misturarem para serem percebidas como um único objeto. Tente diferentes espessuras. Tente separar cada célula com bordas brancas , dando uma aparência de lado a lado.

padronizar

A qualidade das cores também muda de acordo com o padrão das cores. Verifique se você está avaliando modelos com proporções e posições típicas das cores. Por exemplo, se na maioria das vezes tudo é verde, e é mais importante para os usuários assistirem a "destaques" de amarelos e vermelhos, escolha um verde que produza um bom plano de fundo (por exemplo, baixa saturação, luz) e amarelo e o vermelho parece estar “em cima” (por exemplo, maior saturação, escuro). Considere que a estética do padrão também pode se comunicar e motivar o usuário. Se o usuário tiver um conjunto de habilidades particularmente inadequado ou desequilibrado, talvez você queira um padrão feio. O padrão mais atraente deve corresponder ao estado mais vantajoso para o usuário.

Usabilidade

Sua pergunta diz respeito à estética, mas a escolha do código de cores também tem implicações importantes na usabilidade. Suas seleções de cores devem ser:

• Visualmente distintos um do outro, especialmente se usado em condições visuais degradadas (por exemplo, em um celular à luz do sol).

• Forneça um bom contraste com o plano de fundo (se for o primeiro plano) ou com o primeiro plano (se for o plano de fundo). Por exemplo, o texto em preto no vermelho não é tão bom. Geralmente, o primeiro plano e o plano de fundo precisam de diferentes níveis de brilho.

• Verifique se as cores estão alinhadas com o que elas codificam. Por exemplo, coisas que o usuário deve atender para precisar contrastar mais com o plano de fundo e outras cores.

• Forneça acessibilidade e capacidade de impressão, onde cada cor também possui um nível diferente de escuridão, com a escuridão escalada para as fileiras (vermelho mais que amarelo mais que verde). Deixe seu verde um pouco azulado e / ou o vermelho um pouco laranja, para que os usuários daltônicos verde-avermelhados (o tipo mais comum de daltonismo) ainda possam ver diferenças de cor.

• Use código de cores para apenas uma variável. Não sei para que você está usando cinza e laranja, mas é provável que cause confusão e dificulte o uso das cores vermelho, verde e amarelo pelos usuários. Sempre que você tiver mais de três cores, é difícil manter as coisas utilizáveis. Encontre outra maneira de codificar qualquer código cinza e laranja (por exemplo, use tamanho ou peso da fonte ou linhas tracejadas nas bordas da célula; consulte Colocando o G na GUI ).

Em um projeto em que trabalhei, as cores que acompanhei foram # E00000, # FF8400 e # C0FFE0 (não um amarelo muito amarelo, mas ainda funcionava).

Eu tenho mais sobre como escolher códigos de cores, incluindo como calcular o contraste de cores e brilho em Quebrando o código de cores .

Tente usar pastéis em vez das cores reais RGY. Com a saturação reduzida, deve ser mais fácil observar as informações.

Hexágono vermelho pastel: # F7977A RGB: 246-150-121

Hexágono verde pastel: # 82CA9D RGB: 130-202-156

Hexágono amarelo pastel: # FFF79A RGB: 255-247-153

Eu vejo três desafios principais com essas três cores.

• Vermelho e verde têm bons níveis de brilho para uso em texto, amarelo não.
• O amarelo possui um bom brilho para a cor de fundo, o verde pode ser iluminado para esse fim, mas o vermelho fica rosa.
• Desaturar verde e vermelho funciona bem, mas o amarelo fica turvo.

Só consigo pensar em algumas opções, supondo que você não goste do efeito pop art de grandes áreas de cores saturadas. Ambos minimizam o impacto da saturação diminuindo as cores.

• Use um gradiente no fundo da célula.
• Aplique as cores como sombras do texto. A sombra exigiria uma quantidade razoável de desfoque para destacar visivelmente o texto.

Há um outro desafio aqui que não tem nada a ver com estética. O vermelho dominará as outras duas cores e resultará em chamar a atenção para as marcas negativas na página. Se esse é o seu objetivo, você é bom. Se você deseja que seu gráfico seja de natureza positiva, terá dificuldades.

"Vermelho", "Amarelo", "Verde" deixam muito espaço para interpretação, para que você tenha uma boa chance de encontrar uma combinação que funcione bem.

Para o seu problema de estética, peguei sua cor "vermelho" e "verde" e coloquei no liquidificador . Então escolhi o pHSL como modelo de cores para a mistura. Isso já melhorou o conjunto de cores.

Em seguida, tentei diferentes "vermelhos" e "verdes" para melhorar ainda mais a impressão. Vermelho um pouco mais escuro, mais saturado / mais forte. Um verde com um pouco mais de amarelo, além de maior saturação.

OK, não é ruim, mas também não está pronto ainda.

Para o seu problema de usabilidade, lembre-se de que existe a hierarquia de luminância (relativa), matiz e saturação para orientar nossa atenção. Como o amarelo tem naturalmente o maior valor de luminância, esses campos atrairiam mais nossa atenção. Então, importei as cores no conversor de cores para ajustar cada cor individualmente. No meu exemplo, dei valores de luminância iguais "amarelo" e "verde". Menor luminância para amarelo ou maior luminosidade para verde parecia esteticamente problemática.

Tentei minha combinação no Photoshop e percebi que as bordas brancas (espaçamento) causavam uma boa impressão. Portanto, eu recomendaria espaçamento em branco para as células e, no máximo, uma fina linha preta para dividir cada linha de entradas.

Ao usar as ferramentas mencionadas acima, você pode encontrar uma combinação de cores que atenda ao seu gosto ou requisitos pessoais ainda melhor (por exemplo, maior saturação para verde) ...

Você deve ter cuidado ao usar cores como plano de fundo, pois isso dificulta a legibilidade e distrai o usuário da mensagem. ou seja, fundo vermelho e fonte preta.

A conversão de uma cor em escala de cinza normalmente ajuda a entender quais cores contrastam melhor. ou seja, quando você converte os vermelhos em escala de cinza, a cor é cinza escuro. Portanto, é uma cor ruim para usar como plano de fundo quando sua fonte é preta. Você precisa escolher uma cor que lhe dê um bom contraste.

No entanto, se você quiser entender rapidamente o que está tentando fazer, sugiro deixar as células em branco (cor clara) e adicione um pequeno símbolo que indica o status (quadrado ou 5% ou a célula preenchida com o cor)

Dessa forma, o usuário pode ler o texto e ver a categoria a que pertence rapidamente.

No entanto, se você deseja combinar cores, sugiro que compre o livro "Índice de cores". Lá você encontrará milhares de combinações que vão bem juntas e você economizará algum tempo.

Se você encontrar os tons certos das cores, com certeza poderá usar vermelho, amarelo e verde juntos.

Eu recomendo procurar em alguns desses sites onde você pode encontrar algumas combinações finas:

http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search

Ou tente criar alguns deles você mesmo:

http://colorschemedesigner.com/

O que eu realmente recomendo é que depois de escolher sua combinação de cores, pergunte a outra pessoa o que ela pensa dela. Às vezes, não temos o suficiente da aparência externa e gostamos das cores juntas, mesmo que elas não sejam boas.

Não se esqueça de pensar no contraste e na visibilidade do texto ao escolher os tons adequados.

Eu recomendaria o uso de amarelo mais claro, já que você o usa como uma cor bastante neutra.

Aqui estão três esquemas, espero que gostem.