10 ferramentas e dicas para escolher as cores do seu design

Encontrar a combinação de cores perfeita para um projeto de design pode ser uma tarefa difícil, especialmente quando você está tentando criar um design único em conjunto com os desejos do seu cliente. Neste artigo você vai encontrar dicas e excelentes ferramentas que vão te ajudar a criar um esquema de cores perfeito para o seu projeto.

Este artigo é uma tradução de DesignShack e possui novas referências adicionadas pelo Clube do Design. Visite o artigo original clicando aqui.

A importância na escolha das cores

Escolher um esquema de cores para um site ou qualquer tipo de projeto de design nunca deve ser uma tarefa randômica. Você deve prestar muita atenção para escolher as cores certas que se enquadrem na indústria, cultura, na marca e nas ideias do negócio ou pessoa que elas representam.

Seja lá o que fizer, você não quer acabar com um site igual a este:

Você acredita que este é o site de um banco de dados de telefones de emergência contra suicídio? Claramente, qualquer um que visite este site provavelmente ficará ainda mais depressivo apenas de olhar para ele.

Mesmo que seus projetos não sejam tão terríveis, você precisará de uma perspectiva externa para realmente ver os erros que comete ao escolher as cores para seus trabalhos.

Por exemplo, você sabia que as cores tem um forte efeito nas emoções humanas?

A psicologia das cores

A psicologia das cores é uma teoria que explica como certas cores influenciam nossas emoções ou instiga as pessoas a tomarem uma atitude.

De acordo com pesquisas, pessoas tomam decisões subconscientes sobre produtos durante os primeiros 90 segundos que os veem. E 90% das decisões são baseadas apenas na cor.

Já se perguntou por que em lojas as placas com o escrito “PROMOÇÃO” estão sempre na cor vermelha? Isto é por quê a cor vermelha é uma das poucas que despertam uma atenção instantânea nas pessoas.

E porque organizações relacionadas ao meio ambiente e negócios imobiliários usam verde em suas marcas? Isso certamente não está relacionado com a cor da grama ou das árvores. A cor verde representa crescimento, riqueza, paz e saúde.

Ter uma compreensão da psicologia das cores desempenhará um papel importante no sucesso do seu projeto. Aprender a usá-la é dominar uma ferramenta importantíssima na hora de escolher seus esquemas de cores.

Dicas para escolher o esquema de cores perfeito

Há muitas outras coisas que você precisa ter em mente quando for escolher a combinação decores adequadas par o seu projeto. Como escolher um esquema de cores que dure muitos anos, em vez de se basear em tendências atuais.

Aqui estão algumas coisas que você deve ter em mente quando escolher o seu esquema de cores:

Faça seus projetos amigáveis para daltônicos

A maioria dos designers se esquecem dos daltônicos quando estão usando cores em um projeto e ignoram o quanto isso afeta o conceito de uma empresa.

Quando Mark Zuckerberg projetou o Facebook ele usou o azul como cor primária para a interface de usuário por que esta era a cor mais rica que seus olhos conseguiam enxergar. Mark é daltônico.

Não exclua a minoria por causa da maioria. Crie projetos que sejam acessíveis para todos.

Pense sobre o seu público

Não é porque um site popular usa uma grande combinação de cores que você usará isto no seu projeto. Você precisa considerar a sua audiência.

Se o objetivo do seu trabalho é uma audiência internacional, você precisa tentar capturar cores que se enquadrem em diferentes culturas e etnias. Por exemplo, enquanto nos países ocidentais a cor preta representa luxo e ousadia, na cultura indiana a mesma cor representa o mal, a negatividade e a falta de energia.

Encontre cores que representam sua marca

Finalmente, o objetivo principal do seu projeto deve ser entregar ao público a sua marca e a sua mensagem. Então escolha suas cores de maneira a ajudar a alcançar este objetivo, usando cores da marca combinada com a psicologia das cores.

Como havia prometido no começo deste post, a seguir estão algumas das melhores ferramentas que você pode usar na hora de escolher um esquema de cores para seus trabalhos.

1. Adobe Color CC

Esta é uma ferramenta utilizada por vários profissionais. O Color vem com opções e recursos de alta qualidade que você pode usar para gerar um esquema de cores avançado. Além disso, pertence à Creative Cloud e pode ser usado diretamente em painéis disponíveis no Illustrator, InDesign e Photoshop.

No entanto, também envolve muitas personalizações avançadas e regras de cores, como monocromático, compostos e tríades, o que o torna mais adequado para designers avançados.

2. Coolors

Coolors é um gerador rápido de paletas de cores que você pode usar para criar instantaneamente grandes esquemas de cores para seus projetos.

Você pode usar a ferramenta para criar belíssimas combinações de cores facilmente sem precisar de nenhum tipo de experiência. Você também pode explorar os esquemas de cores criados por outros designers e copiá-los para seus projetos.

3. Colormind

O Colormind leva os geradores de paletas de cores para outro nível, permitindo explorar as cores de uma paleta além do básico.

Depois de gerar o seu esquema de cores, seja de forma randômica ou manual, a ferramenta permite que você aprenda mais sobre cada cor na paleta enquanto sugere quais delas usar em sombras, destaques ou planos de fundo. Também permite que você veja como as cores se parecem em certos componentes de UI, como botões e guias.

4. Material Color Tool

Esta é uma ferramente pensada especialmente para encontrar esquemas de cores para projetos de interfaces de usuário. Mas você pode usá-la para criar uma paleta de cores Material para seus aplicativos web ou sites.

Este gerador de esquemas de cores possui um modo de visualização inteligente que permite ver como as cores que você escolheu se parecem no projeto atual. Isso te ajuda a economizar tempo aplicando e visualizando as cores em seus próprios trabalhos.

5. Color Safe

Color Safe é uma ferramenta interessante que te ajuda a criar esquemas de cores com cores compatíveis com as diretrizes do WCAG – Web Content Accessibility Guidelines (recomendações de acessibilidade para conteúdo da Web, ou seja, são diretrizes que explicam como tornar o conteúdo Web acessível a todas as pessoas, mais informações aqui).

Pode ser uma importante ferramenta para designers que procuram seguir regras que mantenham o contraste do primeiro plano e plano de fundo na proporção 4.5:1 (Nível AA). O gerador ira ajudá-lo a encontrar as cores perfeitas que cumprem estas diretrizes.

6. Paletton

O Paletton é um gerador de paleta de cores avançado que vem com um conjunto de capacidades de personalização mais ideais para designers experientes que gostam de experimentar cores.

A ferramenta pode ser customizada e visualizada por cores monocromáticas, adjacentes, triades e mais. Depois de escolher um esquema de cores, você também pode executar uma simulação para ver como as cores se parecerão no daltonismo e sob diferentes condições de tela.

7. Colordot

Uma ferramenta de geração de esquemas de cores simples e fácil de usar perfeita para designers que querem gerar esquemas instantâneos baseados em seus instintos.

Para começar, tudo o que você tem a fazer é simplesmente mover seu mouse ao redor da tela enquanto procura uma cor que goste. Para selecionar a cor desejada, basta clicar e ela será reservada ao lado. Mover o mouse para cima deixa as cores mais escuras e saturadas, mover o mouse para baixo deixa as cores mais claras e menos saturadas.

Você pode continuar clicando e selecionando quantas cores precisar.

8. Colourcode

O Colourcode é outra ferramenta simples e rápida na seleção de esquemas de cores. Ela funciona de maneira similar ao Colordot.

Entretanto, o Colourcode permite customizar a localização de cores combinando monocromáticas, análogas, triades, quadrados e outros estilos de cores.

Depois de selecionar seu esquema de cores, você pode baixar a paleta como .scss, .Less, ou mesmo como PNG.

9. Palettr

Esta é uma ferramenta diferente das outras. Em vez de escolher suas cores manualmente, esta ferramenta gera esquemas de cores baseados em um tema ou um lugar, como Nova York, Roma, Inverno ou Verão.

10. Material Design Palette

Se você está planejando criar um site ou aplicativo baseado no Material Design esta ferramenta será muito útil.

Você escolhe duas cores como primária e secundária e a ferramenta lhe dará uma visualização ao vivo de como as cores se parecerão em um projeto real. Então, você pode baixar a paleta de cores em CSS, SVG, SASS, LESS, PNG e muito mais.

Este artigo é uma tradução de DesignShack e possui novas referências adicionadas pelo Clube do Design. Visite o artigo original clicando aqui.

Concluindo

Seguindo estas dicas e usando essas ferramentas, não deixe de prestar muita atenção à identidade da marca do seu cliente. É importante que você crie um projeto para representar a marca e a empresa acima de tudo.

Além disso, tente explorar projetos de outros profissionais e sites influentes. Veja como eles usam cores e aprendem com elas. Não menos importante: continue experimentando.

Compartilhe este artigo:

Guia de Estudos para Aprender Design por Conta Própria

Baixe o nosso guia e receba dicas e as novidades do Clube do Design no seu email:

Deixe uma resposta

Mais artigos pra você ler:
10 dicas para criar ícones impressionantes

10 dicas para criar ícones impressionantes

Hoje, vou falar um pouco sobre o design de ícones a partir de uma perspectiva mais geral. Vou compartilhar com vocês…
Criatividade – Como pensar fora da caixa?

Criatividade – Como pensar fora da caixa?

A criatividade com certeza é a matéria prima de todo bom projeto de design, é ela que estamos buscando constantemente…
Novidades para 2019 do Clube do Design

Novidades para 2019 do Clube do Design

O Clube do Design trás novidades que reforçam o nosso interesse em te ajudar a descobrir a sua profissão criativa.…
Como calcular tamanho de impressão, resolução de imagem e resolução de saída

Como calcular tamanho de impressão, resolução de imagem e resolução de saída

Quantos pixels deve ter uma imagem que vai ser impressa com 10cm a 300dpi de resolução? Tenho uma imagem de…
Fechar Menu