Isaac Newton<\/a>, no s\u00e9culo XVII, come\u00e7ou com uma roda de cores baseada em como a luz refletia um espectro de cores. A teoria das cores e a roda de cores continuaram a evoluir, nos ensinando mais sobre a ci\u00eancia por tr\u00e1s do porqu\u00ea de certas cores se complementarem.<\/p>\n Com o tempo, a psicologia das cores tamb\u00e9m influenciou o design. Uma combina\u00e7\u00e3o de elementos culturais, hist\u00f3ricos e emocionais pode determinar como os humanos se sentem quando veem cores diferentes.\u00a0Vamos conhecer os conceitos b\u00e1sicos:<\/p>\n <\/p>\n As cores prim\u00e1rias formam a base para todos os outros tons. Os humanos percebem tr\u00eas cores b\u00e1sicas: magenta, ciano e amarelo. Todas as outras cores que vemos consistem em uma combina\u00e7\u00e3o dessas tr\u00eas cores em quantidades variadas, brilhos, matizes e tons.<\/p>\n Aqui temos uma pol\u00eamica: tradicionalmente, consider\u00e1vamos vermelho, azul e amarelo como as cores prim\u00e1rias, mas pesquisas mostraram que magenta, ciano e amarelo descrevem melhor nossa experi\u00eancia com cores.<\/p>\n A imagem acima mostra as cores Ciano, Magenta, Amarelo e Preto (CMYK, em ingl\u00eas) e \u00e9 utilizada para produ\u00e7\u00e3o de materiais impressos. Sua proposta \u00e9 reproduzir, da maneira mais fiel poss\u00edvel, a maioria das cores do espectro vis\u00edvel e \u00e9 por isso que \u00e9 o esquema oficial do universo gr\u00e1fico.<\/p>\n <\/p>\n Na web, usamos valores RGB (Red, Green, Blue) e hexadecimais para representar cores.<\/p>\n O sistema de cores RGB define todas as cores como uma combina\u00e7\u00e3o de tr\u00eas valores diferentes: um determinado tom de vermelho, outro de verde e outro de azul. Ent\u00e3o:<\/p>\n <\/p>\n O sistema de cores hexadecimais converte cada valor em uma representa\u00e7\u00e3o hexadecimal (base 16), assim:<\/p>\n <\/p>\n Cada dois caracteres representa um valor de cor, portanto, para o azul do Facebook, o tom vermelho \u00e9 3b, o verde \u00e9 59 e o 9b \u00e9 azul.<\/p>\n <\/p>\n As cores t\u00eam temperatura e podem ser classificadas em quentes ou frias.<\/p>\n As cores quentes cont\u00eam maiores quantidades de vermelhos e amarelos. Elas podem invocar uma sensa\u00e7\u00e3o de calor e paix\u00e3o em um trabalho, como tamb\u00e9m podem passar agressividade e ousadia \u200b\u200b\u2013 \u00e9 por isso que o vermelho \u00e9 frequentemente usado em mensagens de erro.<\/p>\n As cores frias cont\u00eam maiores quantidades de azul, representando climas frios, gelo, inverno, \u00e1gua, noite, morte e tristeza. Elas podem carregar conota\u00e7\u00f5es de solid\u00e3o, frieza e medo. No lado mais positivo, as cores frias s\u00e3o menos agressivas e podem ser calmantes \u2013 pense em um c\u00e9u azul ou \u00e1guas azuis tranquilas em uma praia.<\/p>\n <\/p>\n Varia\u00e7\u00f5es de luz e sombra permitem que voc\u00ea crie esquemas de cores monocrom\u00e1ticos adicionando n\u00edveis de branco e preto a uma cor base.<\/p>\n Por exemplo, se sua cor base for #8dbdd8 (um azul claro) como visto na imagem abaixo, voc\u00ea pode criar um esquema monocrom\u00e1tico escolhendo dois tons mais claros (\u00e0 direita) e dois tons mais escuros (\u00e0 esquerda).<\/p>\n <\/p>\n A satura\u00e7\u00e3o descreve a intensidade de uma cor. Aumentar a satura\u00e7\u00e3o torna a cor mais rica e escura, enquanto a redu\u00e7\u00e3o da satura\u00e7\u00e3o faz com que pare\u00e7a desbotada e mais clara. Quando dizemos \u201cvermelho claro\u201d ou \u201cvermelho escuro\u201d, estamos descrevendo mudan\u00e7as na satura\u00e7\u00e3o.<\/p>\n <\/p>\n Cada fatia da roda representa uma fam\u00edlia de cores que podem ser alcan\u00e7adas com diferentes misturas de cores. Existem algumas f\u00f3rmulas que s\u00e3o consideradas mais \u201cseguras\u201d, pois criam um efeito mais harm\u00f4nico sem precisar de muito conhecimento. Veja abaixo:<\/p>\n <\/p>\n Um esquema de cores monocrom\u00e1tico consiste em v\u00e1rios tons, matizes e satura\u00e7\u00f5es de uma \u00fanica cor base. Eles s\u00e3o muito coesos, mas correm o risco de se tornarem mon\u00f3tonos.<\/p>\n <\/p>\n Esquemas de cores complementares s\u00e3o baseados em duas cores de lados opostos da roda de cores. Como os dois tons ser\u00e3o muito diferentes, esse esquema pode ser bem impactante e percept\u00edvel.<\/p>\n <\/p>\n Esquemas de cores an\u00e1logos apresentam cores que ficam pr\u00f3ximas na roda de cores. Devido \u00e0s semelhan\u00e7as tonais, esses esquemas podem criar uma sensa\u00e7\u00e3o muito coesa e unificada, sem a monotonia de um esquema monocrom\u00e1tico.<\/p>\n <\/p>\n Para fazer um esquema de cores tri\u00e1dico, desenhe um tri\u00e2ngulo equil\u00e1tero na roda de cores e selecione as tr\u00eas cores nos pontos do tri\u00e2ngulo. Essa tr\u00edade cria um esquema diversificado, por\u00e9m equilibrado.<\/p>\n <\/p>\n H\u00e1 muitas ferramentas de sele\u00e7\u00e3o de cores e geradores de paletas que podem dar bastante inspira\u00e7\u00e3o. Ferramentas como Colordot<\/a> permitem que voc\u00ea comece com uma cor principal ou algumas op\u00e7\u00f5es de cores e depois crie um esquema para voc\u00ea. Por outro lado, ferramentas como Coolors<\/a> criam paletas com base no tipo de esquema de cores que voc\u00ea deseja. Eu costumo usar o Color Adobe<\/a>.<\/p>\n O bom uso das cores pode evocar emo\u00e7\u00f5es e estabelecer a identidade da marca. Pense em marcas que voc\u00ea poderia reconhecer apenas pela cor como Coca-Cola, Starbucks, Facebook e Mcdonalds ou naquelas que usam composi\u00e7\u00f5es como Microsoft, Google e Shell. Tudo vai depender do tipo de mensagem que voc\u00ea deseja passar.<\/p>\n …..<\/p>\nCores prim\u00e1rias (padr\u00e3o CMYK)<\/h3>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-primarias-cmyk.jpg\")
<\/p>\nRGB e hexadecimal<\/h3>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-rgb.jpg\")
<\/p>\n\n
\n
Quente e frio<\/h3>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-quentes-e-frias.jpg\")
<\/p>\nLuz e sombra<\/h3>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-luz-e-sombra.png\")
<\/p>\nSatura\u00e7\u00e3o<\/h3>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-saturacao.png\")
<\/p>\nA roda de cores<\/h3>\n
1. Monocrom\u00e1tico<\/h4>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-monocromaticas.jpg\")
<\/p>\n2. Complementar<\/h4>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-complementares.jpg\")
<\/p>\n3. An\u00e1logo<\/h4>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-analogas.jpg\")
<\/p>\n4. Tri\u00e1dico<\/h4>\n
![\"\"](\"https:\/\/agtdev3.com.br\/ale\/wp-content\/uploads\/2022\/05\/teoria-das-cores-triade.jpg\")
<\/p>\nCria\u00e7\u00e3o e inspira\u00e7\u00e3o de paleta de cores<\/h3>\n