Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. Design Theory

Entendendo as Qualidades e Características da Cor

by
Read Time:14 minsLanguages:
This post is part of a series called Design School for Developers.
Defining and Recognizing Colors
Selecting Your Own Color Scheme

Portuguese (Português) translation by Ingrid Fornazari (you can also view the original English article)

Continuando a partir do nosso artigo anterior sobre definindo e reconhecendo cores, vamos explorar as qualidades e características das cores.


Vermelho

Parte da família de cores quentes, a cor primária vermelho é uma cor forte e emocionalmente intensa.

colour-redcolour-redcolour-red

Aumenta naturalmente a taxa metabólica nas pessoas, e também é mostrada como aumentando as taxas de respiração e pressão  sanguínea quando as pessoas são expostas a ela. É muito usada em sistemas de tráfego (pense nos sinais de trânsito, e semáforos) o vermelho é uma cor altamente visível que tem muito impacto.

Algumas associações a cor vermelha incluem:

  • energia
  • positividade
  • ação
  • guerra
  • perigo
  • força
  • coragem, e
  • todas as coisas intensas e apaixonadas
  • amor, sexo, paixão, desejo

O que é mais interessante sobre o vermelho é como ele duas associações quase que diretamente opostas: Amor e Guerra. Apesar do vermelho ser conhecido como uma cor de alto impacto que frequentemente representa perigo, também é associada com muitas imagens memoráveis de guerra. Entretanto, o vermelho não é tão pesado para o amor e assuntos do coração, com vários tons de vermelho (das mais fortes, escuras cores as variações mais claras como o rosa) estando fortemente associada ao Dia dos Namorados na cultura ocidental.

Em outras culturas o vermelho tem significados completamente diferentes. Na China, o vermelho está associado com prosperidade e felicidade e também é simbolo de boa sorte. Na Índia, o vermelho representa a pureza e é a cor usada com frequência em muitos casamentos. Todavia, na Africa do Sul o vermelho é a cor usada mais em luto.

Quando usar o vermelho é sempre normalmente sensato usá-lo mais como uma cor de realce do que como um ponto focal para todo o site. Enquanto em algumas situações ela funciona bem como ponto focal, na maioria das vezes usar muito vermelho em um design pode causar uma sensação de irritação, agitação e até raiva. Por outro lado, usar muito pouco vermelho também cria uma sensação de cautela e manipulação.

Devido a esses dois extremos, pode ser um pouco difícil usar vermelho para construir o equilíbrio certo. Contudo, usar vermelho como uma cor de realce, particularmente nas características que você quer destacar ou fazer uma observação particular, tal como botões ou outros elementos que levam o usuário a tomar uma decisão, pode ser bem eficaz.


Laranja

Outra cor pertencente a família quente, laranja é frequentemente visto como uma cor brilhante, otimista e edificante.

colour-orangecolour-orangecolour-orange

Ambos jovem e impulsiva, laranja frequentemente age como um estimulante mental e é visto como bem balanceado.

Algumas associações a cor laranja incluem:

  • entusiasmo
  • felicidade
  • reações emocionais
  • espontaneidade
  • aventura, tomada de risco
  • Outono e colheita
  • criatividade
  • cítricos
  • comida saudável

O Laranja é com frequência associado a terceira estação do ciclo anual: Outono. Devido a mudança de cores nessa estação, o laranja oferece uma transição quente das cores brilhantes do verão para as cores mais duras e frias do Inverno. O Laranja é também associado com o Halloween, que acontece no auge do Outono em 31 de Outubro.

Assim como as associações com a natureza, o laranja é visto como a cor que evoca o entusiasmo e a espontaneidade nas pessoas. A cor que encoraja a aventura e tomada de risco, o laranja (devido as suas associações cítricas) também age como um estimulante do apetite, então pode ser útil em websites onde a comida ou o apetite do usuário são relevantes.

E pensando sobre o que nós dissemos antes sobre as várias associações do laranja com o outono e as transições entre as estações, porque não traduzir isso em seus designs, usando o laranja como a cor que oferece transição entre duas áreas diferentes do seu design?

Quando usamos o laranja, é definitivamente útil pensar no seu mercado alvo e público. Quando pessoas jovens são seu público alvo, laranja parece ser uma cor popular. Do mesmo modo, o laranja pode ser usado para manter as pessoas falando ou pensando.


Amarelo

A última das cores quentes principais, o amarelo é uma cor brilhante e criativa.

colour-yellowcolour-yellowcolour-yellow

Conhecido por sua habilidade em promover um pensamento claro e tomadas de decisões rápidas, o amarelo é provavelmente mais associado com felicidade, energia positiva e brilho do sol.

Algumas associações com a cor amarela incluem:

  • criatividade
  • brilho do sol
  • felicidade
  • energia
  • covardia
  • engano
  • avisos
  • instabilidade
  • clareza
  • atividade

O amarelo, uma das três cores primárias, é visto principalmente como uma cor invocadora da felicidade e pode ser usado dom eficiência para criar designs que evocam sensações de felicidade e clareza.

Uma cor muito energética, o amarelo tem um grau de atividade que pode passar para seus designs. Você pode usar o amarelo para criar entusiasmo e destacar áreas em seu design que precisam que seja feita uma ação.

Em outras culturas o amarelo tem associações e significados totalmente diferentes. No Egito, o Amarelo é amplamente usado como cor de luto, e na Idade Média, amarelo era usado para significar aqueles que haviam morrido. Na Índia, o amarelo é a cor que é frequentemente usada por mercadores. E no Japão, amarelo é o símbolo da coragem e portanto tem associações positivas.

Quando está desenvolvendo com amarelo, você precisa ter cuidado porque usar muito amarelo pode algumas vezes introduzir sentimentos como de ansiedade, devido a ser uma cor tão brilhante, "de movimento rápido" muito amarelo pode levar a uma sensação de desequilíbrio no seu site. Em vez, de tentar introduzir outras cores ao lado do amarelo use o amarelo como um realce na página, para emprestar foco aos aspectos mais importantes do design.

Contudo, devido aos efeitos que o amarelo tem em uma pessoa (voltando a sensação de "movimento rápido" que parece oferecer), você pode algumas vezes usar o amarelo para sua vantagem, por exemplo, o amarelo parece introduzir tomadas de decisões mais rápidas, e portanto ter botões amarelos em designs de e-commerce pode funcionar extremamente bem, contanto que se encaixe no resto do seu design.

Devido a sensação do amarelo ser um pouco instável, não é uma boa ideia usar amarelo num site que você queira invocar a sensação de estabilidade ou segurança. Também parece que historicamente homens percebem o amarelo como sendo uma cor infantil, então não seria uma boa escolha de cor para um site de produtos masculinos, porém seria correto para casa quando usado para uma audiência mais jovem.


Verde

Pertencendo a família de cores frias, o verde é uma cor rejuvenescedora e frequentemente é descrita como um purificador natural, devido as muitas associações com aspectos relaxantes da natureza. 

colour-greencolour-greencolour-green

Algumas associações a cor verde incluem:

  • primavera
  • crescimento
  • renovação & renascimento
  • equilíbrio
  • natureza
  • grama & jardins
  • estabilidade
  • possessividade
  • ciúme
  • inveja
  • fertilidade
  • segurança
  • dinheiro
  • reciclagem

Uma combinação de azul e amarelo, o verde oferece clareza mental e entusiamo do amarelo misturados com a calma e estabilidade mais emocionais do azul. Na natureza, nós vemos o verde a nossa volta o tempo todo, nas folhas, grama, flores, e muito mais. Por causa disso, muitas das associações que temos com a core verde então fortemente relacionadas a natureza e temas similares como renascimento e fertilidade.

O verde é  frequentemente referido como a cor que oferece sensação de estabilidade e equilíbrio. Assim sendo, pode funcionar bem usar o verde em designs que você queira mostrar como um produto ou serviço é confiável ou seguro de usar.

No outro lado da moeda, o verde também tem muitas associações com ciúme, inveja, e possessividade, então você precisa ser cuidadoso acerca de como usar as cores e garantir que use o verde mais para adicionar equilíbrio ao site.

O verde tem um forte vínculo com o mercado de reciclagem, com o verde sendo utilizados na maioria dos logotipos de reciclagem só no UK e Europa.  Por isso, faz sentido usar o verde em designs relacionados a reciclagem ou qualquer produto "verde", serviço ou companhia.

Em outras culturas, o verde geralmente tem boas conotações. Na Irlanda, além de aparecer na bandeira nacional, é uma cor fortemente associada com o Dia de São Patrício. O verde também é a cor do trevo de quatro folhas da sorte, que provavelmente é o símbolo de sorte mais bem conhecido no mundo. O verde é tradicionalmente a cor do Islã e também é mencionado como uma boa luz  muito no Alcorão, com muitos daqueles que estão no Paraíso sendo descritos como usando "trajes verdes".


Azul

A mais fria das cores principais, o azul é frequentemente visto como uma cor muito confiável e tranquila, muito provavelmente devido as mais óbvias associações do azul com o mar e o céu.

colour-bluecolour-bluecolour-blue

Uma cor conservadora, é frequentemente bem utilizada em designs que representam limpeza e um ar de responsabilidade.

Algumas associações a cor azul incluem:

  • o mar
  • o céu
  • confiança
  • honestidade
  • lealdade
  • sinceridade
  • paz
  • tranquilidade
  • inteligência

A última das cores primárias (junto com vermelho e amarelo), o azul é uma cor redutora de estresse que é frequentemente usada em designs masculino e para audiências corporativas. O azul é a cor que invoca a sensação de confiança, honestidade e segurança e assim sendo, se presta em particular a designs de produtos, serviços e companhia que evocam esses sentimentos em seus públicos.

Com muitas das suas associações com ambos, céu e mar, o azul também funciona bem em designs que queiram promover essas coisas. Por exemplo se um produto se relaciona muito forte com o mar (um produto de surfe por exemplo) então o azul pode se usado para trazer essas sensações familiares relacionadas ao mar e ajudar o público a se relacionar mais com o produto ou site. O mesmo pode ser dito de qualquer cor que se relacione com coisas verdadeiras, reais, tais como qualquer coisa na natureza, como grama e flores.

O azul também é conhecido como supressor do apetite, então não seria a cor adequada para usar em designs que envolvam comida de algum modo. Você também precisa estar ciente de que usar muito azul pode ser sufocante e pode parecer antiquado, dependendo dos tons que usar.

Algumas das melhores vezes para se usar o azul em seus designs será em sites que estejam focados em públicos masculinos e também para negócios corporativos. Isso não quer dizer que você não possa usar azul em outros estilos de design, não tenha medo de experimentar e se divirta usando cores onde você não esperava utilizá-las.

Como com as associações em geral, há muitas conotações diferentes que vem com a cor azul em diferentes culturas também. Na cultura Ocidental, há a tradição "algo azul" associado frequência a casamentos, onde é oferecido a noiva algo azul (assim como o outro tradicional "algo velho" e "algo novo") como sinal de boa sorte em sua nova vida de casada. Porém no Irã, o azul é a cor utilizada no luto.


Violeta/Roxo

A última da família de cores frias, roxo é visto como uma cor misteriosa, normalmente representando ambição, realeza e poder.

colour-violetcolour-violetcolour-violet

Algumas associações com a cor roxa incluem:

  • realeza
  • imaginação
  • poder
  • luxúria
  • riqueza
  • extravagância
  • ambição
  • sabedoria
  • magia
  • mistério

Uma boa combinação de ambos vermelho e azul, o roxo é intrigante, e tem ambos, o efeito calmante e tranquilo do azul e a energia que o vermelho oferece. O roxo é frequentemente visto como uma cor de luxo e funciona bem em designs que precisam mostrar um pouco mais um lado extravagante.

Ao contrário dos azuis e verdes, o roxo é raramente uma cor que se vê na natureza. Por exemplo, flores roxas como os lírios e orquídeas e lavandas são difíceis de ver mas são muito frágeis e delicadas, por isso muito preciosas e tratadas com grande respeito.

Roxo é parte da cultura popular em muitas culturas por várias razões diferentes. Na Tailândia, roxo é a cor do luto para viúvas, entretanto no Egito, é mais conhecida como a cor favorita de Cleópatra que que foi o último faraó do Antigo Egito. Em muitas culturas, o roxo é a cor tradicional usada pela realeza ou pessoas com autoridade. E nos EUA, há o "Coração Roxo", uma condecoração militar significativa concedida em nome do Presidente aqueles que foram mortos em batalha.

Quando utilizar o roxo, você precisa ter cuidado de não usar demais, enquanto em certas quantidades pode definitivamente promover uma sensação de mais majestoso, extravagante ou luxuoso no seu design, muito roxo pode também irritar e tem sido ouvido que agrava a depressão em algumas pessoas.

Descobriu-se que a maioria das crianças prefere a cor roxa às outras cores, então é uma cor realmente eficaz para ser usada em seus designs que tem uma audiência bem jovem.

Usar roxo em seus designs pode servir para incrementar a imaginação ou criatividade e tons mais claros de roxo também funciona muito bem em designs femininos.


Esquemas de Cores

Esquemas de cores são um arranjo de cores que uma vez colocados juntos, podem ser usados em qualquer forma de design, incluindo seus designs para web. É um trabalho difícil inventar um bom esquema de cores e é fácil notar quando as cores sentem ou parecem "fora" ou não muito certas. Entretanto, quando você faz um esforço para criar um bom e eficiente esquema de cores, e você o coloca em bom uso, ele vai faze a diferença entre um bom design e um que é medíocre.

Há alguns esquemas de cores principais, incluindo: monocromáticos, análogos, complementares, complementares decompostas, triádico e tetrádico.

Nota: Você já deve ter escutado os próximos termos utilizados um pouco quando se discute os esquemas de cores. Aqui está uma pequeno glossário útil para ajudá-lo se precisar: 

  • Matiz: um "matiz" é a cor em si mesma, o verde, azul, vermelho, roxo, etc.
  • Tom: um "Tom" é quando o *branco* é adicionado a um matiz, deixando-o mais claro
  • Sombra: uma "sombra" é quando você adiciona *preto* a um matiz deixando-o mais escuro.
  • Tonalidade: uma tonalidade é criada quando *cinza* é adicionado ao matiz.

Monocromático

Esquemas de cores monocromáticos usam apenas um matiz (por exemplo o azul) e então usam vários tons ou sombras daquela cor original.

colour-wheel-monochromaticcolour-wheel-monochromaticcolour-wheel-monochromatic

É o esquema de cores mais fácil de criar porque envolve apenas um matiz, então você sabe que as poucas cores de base que você escolher vão trabalhar em harmonia uma com as outras.

Análogos

Esquemas de Cores Análogas são criados escolhendo valores que estão próximos uns dos outros na roda de cores. Por exemplo, azul-verde, verde e amarelo esverdeado.

colour-wheel-analogouscolour-wheel-analogouscolour-wheel-analogous

A maneira mais fácil de usar um esquema de cores análogas é escolher uma das cores como principal, cor dominante e então usar as outras duas mais esparsamente, como cores de realce para a primeira.

Complementares

Esquema de cores complementares são aqueles criados escolhendo-se duas cores que são opostas na roda de cores, por exemplo, verde ou roxo e amarelo. Por causa dessas cores serem opostos exatos, elas oferecem um contraste extremamente alto e tem um alto impacto.

colour-wheel-complementarycolour-wheel-complementarycolour-wheel-complementary

Esquemas de cores complementares são mais difíceis de retirar por essa razão e funcionam melhor quando você tem elementos do seu design que quer destacar, ao invés de usar em doses maiores através do design inteiro.

Complementares Decompostas

Esquema de cores complementares decompostas(ou complementares divididas) são criados escolhendo uma cor e então pegando as duas cores que estão de cada lado do que seria a primeira das cores complementares.

colour-wheel-split-complementarycolour-wheel-split-complementarycolour-wheel-split-complementary

Por exemplo, se sua cor principal é roxo, então suas outras duas cores estarão de cada lado da cor complementar do roxo, o amarelo, então são verde amarelado e amarelo alaranjado. 

Como esse esquema de cor é bem próximo do esquema de cor complementar, ainda vai ter um pouco de impacto quando for usado, embora pareça um pouco mais equilibrado e calmo do que os totalmente complementares. De novo, quando usar um esquema de cor complementar decomposta é mais fácil usar uma das cores com o foco principal, com as duas outras cores sendo usadas como realce.

Triádica

Os esquemas de cores triádicas utilizam três cores que estão igualmente espaçadas ao redor da roda de cores, por exemplo, roxo, laranja e verde.

colour-wheel-triadiccolour-wheel-triadiccolour-wheel-triadic

Usar o esquema de cores triádica significa que você normalmente vai acabar com um esquema de cores brilhantes e vibrantes, apesar que isso pode ser suavizado um pouco usando variações de sombras e tons das cores. Como o esquema de cores anterior, esquemas de cores triádicas funcionam melhor quando deixamos uma cor ter mais foco e as outras duas servirem como cores de realce.

Tetrádica

Esquema de cores tetrádicas funciona formando pares com dois conjuntos de esquema de cores complementares. Funciona quase como se criássemos um retângulo ao redor da roda de cores. Um exemplo de esquema de cores tetrádicas é vermelho, verde, azul e laranja.

colour-wheel-tetradiccolour-wheel-tetradiccolour-wheel-tetradic

O que é ótimo a cerca do esquema de cores tetrádicas é que ele oferece uma grande variedade quando se trata de escolher cores para usar, e pode oferecer a você mais ideias quando está desenvolvendo um site. Novamente, conforme todos os outros esquemas de cores o esquema de cores tetrádicas funciona melhor com uma cor sendo o foco e o restante sendo usado como cores de realce.


Conclusão

Isso conclui nosso olhar sobre as características das cores. Na próxima parte da Escola de Design para Desenvolvedores, nós vamos examinar maneiras práticas de escolher um esquema de cores.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.