Escolher um esquema de cores eficaz para o site da sua empresa pode ser uma decisão difícil. No entanto, se você aprender o básico da teoria das cores e experimentar as ferramentas de cores disponíveis na web, poderá escolher paletas e combinações de cores harmoniosas por conta própria. Atualizamos esta postagem para incluir informações adicionais sobre a teoria das cores e como ela se relaciona com sua marca, bem como ferramentas para ajudá-lo a escolher as cores perfeitas para seu site ou outro projeto online.
Enquanto você lê esta postagem, nosso modelo de guia de estilo de marca pode ajudá-lo a desenvolver ou reforçar as cores e o estilo da sua marca. Basta clicar no link e fazer uma cópia do documento para começar a criar seu próprio guia de estilo de marca.
Nesta postagem:
- O que é teoria das cores?
- O que são esquemas de cores?
- Cores quentes versus cores frias
- Nuances e sombras
- Cores saturadas versus insaturadas
- Geradores de esquema de cores on-line
- Como escolher cores para seu site
- A psicologia da cor e do humor
O que é teoria das cores?
Teoria da cor Baseia-se no guia principal de mistura de cores e no efeito visual de uma combinação específica de cores por meio de uma roda de cores. A roda de cores tradicional, chamada roda de cores, era baseada no vermelho, amarelo e azul. Mas ao longo dos anos, a roda cromática evoluiu para a roda cromática, que apresenta uma gama mais ampla de cores e, mais importante, a relação entre cores primárias, secundárias e terciárias.
- Cores primárias São compostos por 3 pigmentos: vermelho, amarelo e azul. Eles não podem ser misturados ou formados por qualquer combinação de qualquer cor. Mas todas as outras cores surgem da mistura dessas cores.
- cores secundárias Eles são verdes, laranja e roxos. Eles são formados pela mistura de cores primárias.
- Cores terciárias Eles são amarelo-alaranjado, vermelho-alaranjado, vermelho-violeta, azul-violeta, azul-verde e amarelo-esverdeado. Eles são formados pela mistura de uma cor primária e uma cor secundária.
O que são esquemas de cores?
Usando uma roda de cores também podemos determinar combinações de cores harmoniosas com 2, 3 ou 4 cores. Essas combinações harmoniosas de cores são chamadas esquema de cores e são compostos por Monocromático, Análogo, Complementar, Complementar Dividido, Triádico e Tetrádico.
- Monocromático Os esquemas de cores são compostos por matizes, tonalidades e matizes de um único tom.
- Análogo Os esquemas de cores são um grupo de 3 cores adjacentes umas às outras na roda de cores.
- Complementar Os esquemas de cores são compostos por 2 cores opostas na roda de cores.
- Dividir Complementar Os esquemas de cores são uma variação do esquema de cores complementares que utiliza 2 cores adjacentes ao seu complemento.
- triádico Os esquemas de cores usam cores uniformemente espaçadas no círculo cromático.
- Tetrádico Os esquemas de cores utilizam 4 cores dispostas em 2 pares complementares.
Cores quentes versus cores frias
Para entender melhor a teoria das cores, você também precisará entender as cores quentes e frias. As cores quentes são os amarelos e vermelhos do espectro de cores que transmitem felicidade e energia. As cores frias são os azuis e verdes do espectro de cores que transmitem calma e paz. A roda de cores em si pode ser facilmente dividida para determinar onde as cores quentes e frias começam e terminam.
Se uma cor é quente ou fria depende de sua matiz, que é um ponto específico na roda de cores. Vermelho, amarelo, verde, azul, etc. São tons únicos. Cada tonalidade possui variações de diferentes tonalidades, tonalidades e tons. Por exemplo, o azul centáurea é uma versão mais clara do azul (um tom), o azul marinho é uma versão mais escura (um tom) e o azul aço é uma versão menos saturada (um tom). Essas cores são todas diferentes, mas todas têm o mesmo tom.
Nuances e sombras
A claridade ou escuridão de um tom refere-se ao seu valor. O valor é outra consideração importante na escolha das cores do seu site. A combinação de valores mais clássica é texto preto sobre fundo branco. Claro, existem muitas outras combinações de valores que podem tornar as cores do seu site atraentes e funcionais.
Contraste de cor adequado
Ao considerar matizes e tonalidades para o esquema de cores do seu site, é importante atingir um nível adequado de contraste. O contraste adequado torna seu site mais agradável e fácil de navegar. Isto é particularmente importante para texto e planos de fundo. Tenha em mente que milhões de usuários daltônicos da web veem uma gama mais limitada de tons, portanto, a falta de valor de saturação ou contraste fará com que certos tons se misturem. Verificador de contraste de cores WebAIM facilita a escolha de cores para o seu site que todos acharão funcionais.
Cores saturadas versus insaturadas
A saturação de uma tonalidade, também conhecida como intensidade ou croma, também é importante. Ao misturar um tom com seu complemento ou com o cinza, ele ficará menos vibrante. Muitas cores com baixa saturação são consideradas cores neutras. Isso pode incluir um bege ou cinza mais escuro e menos saturado, bem como cores pastel com baixa saturação, como cinza azulado ou rosa desbotado.
Geralmente, cores menos saturadas tendem a se destacar menos e a ser mais agradáveis aos olhos. Cores com mais saturação chamarão a atenção, e usar muitas cores brilhantes pode ser opressor. Usar a saturação com cuidado pode ajudá-lo a escolher as cores certas para o seu site.
Agora que você tem um conhecimento básico da teoria das cores, pode começar a experimentar as ferramentas de cores disponíveis online. Elaborei uma lista de algumas ferramentas incríveis para ajudá-lo a aperfeiçoar suas escolhas de esquema de cores.
Geradores de esquema de cores on-line
Geladeiras
Coolors é um gerador de combinação de cores super fácil e rápido. O gerador carrega 5 cores harmoniosas para criar uma nova combinação de cores. Se você não gostar do que criou, basta pressionar a barra de espaço e navegar pelas infinitas possibilidades de cores. Se você estiver reformulando completamente a marca ou escolhendo cores para um novo site ou empresa, este é um ótimo lugar para começar.
Adobe Kuler
Adobe Kuler possui alguns recursos interessantes. Você pode optar por navegar pelos esquemas de cores já criados, classificando os temas ou pesquisando palavras-chave. Você também pode gerar sua própria combinação de cores usando a roda de cores. Isso é ótimo se você tem uma cor em mente e está procurando cores complementares ou outras regras de cores. Você pode começar aqui se tiver uma cor de logotipo em mente, mas não tiver certeza de como combiná-la.
Cores planas da interface do usuário
Como Flat UI é uma das tendências mais populares, este site garantirá que você selecione as cores Flat UI mais populares. Design simples É um estilo de design minimalista que enfatiza a simplicidade e a eficiência. Você terá que ter um pouco mais de cuidado com as cores que combina com esta ferramenta. Consulte os esquemas de cores mencionados acima para obter orientação se não tiver certeza.
Designer de esquema de cores 3
Color Scheme Designer 3 é uma ótima ferramenta de design para criar esquemas de cores que funcionam bem juntos. Essa ferramenta funciona muito bem para gerar cores aleatórias, mas é ainda melhor quando você tem aquela cor específica em mente. Esta ferramenta irá ajudá-lo a criar um esquema de cores harmonioso que combine com qualquer cor! Essa ferramenta também é útil se você tiver uma cor de logotipo em mente, mas ainda não tiver um esquema de cores completo para o seu site.
pictórico
Pictaculous é um gerador de cores que permite extrair uma paleta de cores de qualquer imagem. Esta ferramenta funciona muito bem quando você tem uma imagem em mente, mas não sabe quais cores combinar com ela. Você pode escolher uma cena específica que o inspire, uma foto que você mesmo tirou ou uma foto do seu escritório ou loja para combinar um esquema de cores. Ou você pode fazer uma captura de tela de outro site de sua preferência e ver a cor que ele está usando. Lembre-se que inspirar-se em outro site é apenas um ponto de partida; Você precisará alterar algumas cores para obter seu próprio estilo.
Como escolher cores para seu site
Com um conhecimento básico da teoria das cores, combinações de cores e uma lista de ferramentas de seleção de cores, você estará pronto para escolher as cores do seu site. Mais algumas dicas podem ajudá-lo a escolher cores de site que representem com precisão sua marca e conectem-se com seu público.
Cor e marca
A cor, junto com as fontes, imagens, estilo e outros elementos, constituem a sua marca. Suas cores, como todos esses outros elementos, podem contribuir para sua marca se forem consistentes ou prejudicá-la se não forem. Ao escolher as cores para o seu site, você pode começar com as cores que usa em seu logotipo, uma imagem específica ou logotipo de um concorrente que você gosta ou uma atmosfera que deseja criar. Para fazer isso, é útil compreender as associações que temos com as cores.
A psicologia da cor e do humor
Se você já tem um logotipo, ou tem um em mente, já tem pelo menos uma de suas cores selecionada. um pouco mais metade das principais marcas Use apenas uma cor em seu logotipo. Mais de dois terços dos logotipos de grandes marcas usam azul ou preto. Começando pela cor do seu logotipo, escolha três a cinco cores adicionais usando as ferramentas mencionadas acima. Isso lhe dará um esquema de cores coeso.
Cor e humor
Embora ele A psicologia da cor e do humor é complexa.— e existem diferenças mais dramáticas nos significados das cores em diferentes culturas — existem algumas tendências e associações popularmente compreendidas com as cores. As cores que você escolher para o seu site devem corresponder ao clima que você deseja transmitir.
Azul
O azul é mais comumente associado a segurança, estabilidade, confiança e experiência. Este também é o tom mais popular usado em logotipos, e Seu uso é amplo. Considere os logotipos de empresas como AT&T, IBM, HP, Blue Cross Blue Shield, Chase Bank, GM, Facebook, Twitter, Cisco, GE, Walmart, Lowes e muito mais. Outras associações com o azul podem incluir uniformes da polícia, chuva, oceano e céu.
Vermelho
O vermelho também tem muitas associações diversas. Este tom marcante está associado à paixão, desejo, força, violência e excitação. PARA Uma grande variedade de marcas usa vermelho.do YouTube à CNN, Netflix, Heinz, Kraft, Target, Marvel, Coca Cola, CVS e muito mais. Acredita-se que o vermelho e o amarelo estimulam o apetite. inspirando sentimentos conjuntos de desejo e satisfação, razão pela qual é comumente utilizado em marcas de alimentos. Outras associações com o vermelho incluem rosas, sangue, fogo, caminhões de bombeiros, frutas vermelhas, sinais de parada e corações.
Amarelo e dourado
O amarelo é frequentemente associado a alegria, otimismo, cordialidade e satisfação. Conforme mencionado acima, é comum ver o amarelo e o vermelho usados juntos em marcas de alimentos. Amarelo e ouro também são muito semelhantes e o ouro pode ser associado a riqueza e prestígio. Algumas marcas que usam amarelo incluem Nikon, National Geographic, Best Buy, UPS e Chevrolet. Outras associações amarelas comuns são o sol, os girassóis, as estrelas e os sinais de alerta.
Laranja
O uso do laranja é muito semelhante ao amarelo e ao vermelho. Geralmente está associado à emoção, otimismo e criatividade. Alguns dos logotipos laranja mais reconhecidos incluem os da Amazon, Mozilla, Fanta, Nickelodeon e Harley Davidson. Estas marcas são bastante diversas, pelo que é compreensível que o uso da laranja também seja diversificado. Outras associações de laranja incluem flores, borboletas, cones de trânsito, tigres, outono, cenouras e laranjas.
Verde
O verde é comumente associado à consciência ambiental, saúde, riqueza e crescimento. Muitas marcas que procuram retratar uma postura ambiental forte, ou reformular a marca após uma questão ambiental, usarão o verde. Essa prática até ganhou o nome de “lavagem verde.” Compare o uso ou a finalidade do verde em logotipos como BP, Starbucks e Cargill com outros como Sierra Club, Animal Planet, Rainforest Alliance e outros como XBOX, Fidelity Bank ou produtos Android. Algumas das associações verdes mais comuns incluem dinheiro, grama e plantas, o símbolo de reciclagem, hortelã e limão.
Roxo
O roxo tende a ser associado à criatividade, diversão, imaginação e indulgência. No entanto, não é uma cor de logotipo comum e é usada em uma ampla variedade de marcas, desde doces Wonka e Cadbury até o serviço de streaming de vídeo Twitch, Curves fitness, sorvete Purple Cow, serviços de entrega de comida e muito mais. FedEx e muito mais. Outras associações com o roxo incluem uvas e vinho, lilases e violetas e tecidos roxos reais.
Em preto e branco
Preto e branco estão se tornando cores de logotipo cada vez mais populares. Algumas marcas que antes usavam uma cor forte optaram por um logotipo preto simples. Isso pode ocorrer porque os logotipos em preto e branco podem ser adaptados a muitas situações. Ou concentram-se numa forma específica em vez de numa combinação de cores. Preto e branco tendem a inspirar sentimentos de equilíbrio, confiança, calma e confiabilidade. Considere o New York Times, Apple, Nike e Wikipedia. El blanco y el negro tienen muchas asociaciones, incluido el papel de periódico, los naipes, el símbolo del yin y el yang, los teclados de piano, las notas musicales, los pingüinos, los pandas, las cebras, las luces y las sombras, e mais.
Agora que você sabe o que significam essas cores básicas, como elas se encaixam e as ferramentas que pode usar para encontrar combinações de cores consistentes, você pode escolher as melhores cores para o seu site. Não tenha pressa e considere suas cores com cuidado. Dessa forma, você se sentirá confiante em sua marca à medida que avança.
