Básico sobre combinação de cores no design de sites

Publicados: 2018-03-29

O ensaio investiga os princípios básicos para combinar cores em web design: quais cores usar no contexto, como as cores funcionam juntas e a melhor forma de usá-las.

Combinar cores em um web design é como construir um edifício, começando com uma base sólida, construindo a estrutura e terminando com uma bela pintura. Vamos começar com os princípios básicos.

1. Estabeleça as bases: escolha uma cor de fundo

A escolha da cor de fundo do site é muito importante, é a base para qualquer combinação de cores e tem uma grande influência no design geral. A cor de fundo representa o seu design, decidindo a primeira impressão do usuário sobre o site. Certifique-se de que a cor de fundo reflita o propósito e o significado do site que você deseja exibir.

Preto

O preto geralmente faz pensar em escuridão, mal ou demônio, mas também representa a elegância, o poder e a força. O preto é uma ótima cor de fundo, pois contrasta com quase todas as cores, incluindo cores brilhantes. No entanto, tome cuidado ao usar muito preto, o que torna a leitura mais difícil e pode causar dor nos olhos se for visto por um longo tempo.

Branco

O branco representa limpeza, pureza, perfeição e cria uma sensação de mais espaço. Ele também contrasta com a maioria das cores, como o preto, mas não é opressor, o que torna a visão mais fácil. O branco é uma ótima cor para ser a cor de fundo para sites relacionados à religião, pois representa a retidão, pureza ou para sites sobre arte e fotografia. Se você quiser um design limpo e claro, use bastante branco.

vermelho

O vermelho é uma cor muito forte, como um fogo selvagem que chama a atenção, por isso é uma cor excelente quando se trata de chamar e persuadir. A cor também está relacionada à energia, em que o vermelho é a cor mais energética, atraindo a atenção dos usuários que clicam no anúncio ou cadastram o produto.

laranja

O laranja geralmente faz as pessoas parecerem felizes. É uma cor tropical associada a alegria, charme, energia. Laranja é uma cor muito amigável e convidativa, muitas vezes bastante eficaz com frases de chamariz. Laranja também é uma das cores com as maiores proporções de exibição, portanto, as partes laranja vão atrair os olhos e destacar elementos importantes do design.

Amarelo

O amarelo é brilhante, leve e alegre. O amarelo muitas vezes dá às pessoas uma sensação de calor, diversão, é também um ótimo contraste de cores com as cores mais escuras como preto, cinza. O amarelo é uma cor ótima para destacar os elementos importantes e atrair a atenção do usuário. No entanto, muitos amarelos causam uma sensação de instabilidade, portanto, se você fosse fazer um site para criar uma sensação de segurança, deve evitar o uso de amarelo.

Verde

Verde é a cor da natureza, frequentemente associada a desenvolvimento, paz, estabilidade. O fundo verde é ótimo quando você quer expressar paz, pois tem as cores mais calmantes. Porque o verde se opõe ao vermelho, criando uma sensação de segurança, confiabilidade, adequada para instituições financeiras e bancos.

Azul

O azul traz estabilidade e profundidade, simboliza confiança, sinceridade, esperança, compreensão e confiança. O azul é geralmente preferido pelos homens. Porém, não é uma boa cor para chamar a atenção, pois não se destaca nas cores contrastantes. Outro ponto interessante é que o azul reduz o apetite, por isso não o use em sites de comida.

2. Construção estrutural: combinação de cores

As combinações de cores são geralmente baseadas no ciclo de cores , existem muitas páginas da web ou software para oferecer suporte à criação. As combinações de cores mais comumente usadas são:

  • Monocromático
  • Complementar
  • Triádico
  • Tetrádico
  • Análogo

Monocromático

Essa combinação usa saturação da mesma cor , o que parece muito chato? Na verdade, não. Esta combinação é bastante simples, o que cria um sentido de cortesia e elegância. No entanto, pode parecer um pouco enfadonho devido à falta de contraste. Se você se sentir entediante demais, experimente o Analogous (que será explicado a seguir), que pode aumentar o contraste e ainda criar uma sensação de simplicidade.

Complementar

Essa combinação é usada quando você deseja criar um contraste forte . As cores de contraste são duas cores opostas no ciclo de cores. Essa combinação é usada quando você deseja criar um contraste forte. As cores de contraste são duas cores opostas no ciclo de cores. Por exemplo, a cor do seu plano de fundo é azul, a cor que contrasta com ele é o vermelho. Por exemplo, a cor do seu plano de fundo é azul, a cor que contrasta com ele é o vermelho. Cores contrastantes são difíceis de ver se usadas demais, especialmente para escrever, mas extremamente úteis para realçar algo. Cores uniformes ou logotipos em esportes geralmente tendem a usar cores contrastantes, que também são comuns na publicidade.

Triádico

Esta é uma combinação de três cores situada nos vértices de um triângulo equilátero no ciclo de cores. Essa abordagem mantém o contraste, mas é mais harmoniosa do que a combinação de cores contrastantes. No entanto, você deve escolher apenas uma cor principal e usar mais. Se você deseja a vibração do contraste de cores, mas ainda deseja manter a uniformidade das cores monocromáticas, esta combinação é para você.

Tetrádico

Esta é uma combinação de quatro cores em que existem dois pares de cores contrastantes , desta forma brilhantes e equilibradas, podendo criar muitas variações. No entanto, é difícil equilibrar a cor quente, a cor fria, então use apenas uma cor como principal.

Análogo

Cores semelhantes são cores que ficam próximas umas das outras no ciclo. Normalmente, eles se encaixam perfeitamente, criando uma sensação de suavidade, conforto. Essa combinação é freqüentemente encontrada na natureza, criando uma sensação agradável para os olhos. Contudo. Essa combinação não cria um alto contraste, ela apenas contrasta melhor do que monocromática. A melhor maneira de usar essa abordagem é usar uma cor dominante, a segunda cor para reforçar, a terceira cor usada com branco, preto e cinza para enfeitar.

3. Tons, sombras e tons

Esses três conceitos são freqüentemente mal compreendidos, embora sejam fáceis de distinguir.

  • Tons: clareie o tom adicionando branco.
  • Sombra: mais escuro com a adição de preto
  • Tons: Mais ou menos cinza para criar uma sensação de cores frias ou quentes.