Noções Básicas Sobre Esquemas de Cores Coloridas e da Web
Existem quatro esquemas de cores básicos que você pode usar para um site. Cada página deste artigo mostra uma imagem do esquema de cores e como você pode gerar um esquema semelhante no Photoshop.
- monocromáticoUsando cores do mesmo matiz. Eles podem ter tons ou tonalidades diferentes, dependendo de quanto branco ou preto é adicionado.
- análogoIsso usa cores próximas umas das outras na roda de cores.
- complementarIsso geralmente é visto como "oposto" porque as duas cores em um esquema de cores complementares são opostas uma à outra na roda de cores.
- triádicoEssas cores são espaçadas uniformemente na roda de cores.
Todos os esquemas de cores usarão esse amarelo como cor básica.
02 de 10Esquema de cores monocromáticas da Web
Este esquema de cores usa o amarelo mostarda da minha cor base e adiciona um pouco de branco e preto para colorir e sombrear o esquema de acordo.
- canto superior esquerdo - a cor base # ffe500
- canto superior direito - adicionou um preenchimento de 50% branco para obter # fff280
- canto inferior esquerdo - adicionou um preenchimento de 75% branco para obter # fff8bf
- abaixe à direita - adicionou um preenchimento de 50% de preto para obter # 7f7200
Esquemas de cores monocromáticas são geralmente os mais fáceis para os olhos de todos os esquemas de cores. As mudanças suaves na tonalidade e na sombra fazem com que as cores fluam umas para as outras melhor. Use esse esquema de cores para tornar seu site mais fluido e coletado.
03 de 10Mais Esquemas de Cores Monocromáticas da Web
Adicionado um quadrado de 20% de preto para obter mais cores no esquema. Adicionar preto ou branco às cores pode criar uma nova cor na paleta sem atrapalhar o tom da página.
04 de 10Esquema de cores da Web análogo
Esse esquema de cores usa a cor base amarela e adiciona e subtrai 30 graus à matiz na paleta de cores do Photoshop.
- canto superior esquerdo - a cor base # ffe500
- canto superior direito - +30 graus para obter # 99ff00
- inferior esquerdo - -30 graus para obter # ff6600
- inferior direito - 100% branco #ffffff
Cores análogas podem funcionar muito bem juntas, mas às vezes elas podem entrar em conflito. Certifique-se de testar esses esquemas com mais pessoas do que você, sua família e amigos. Quando trabalham, criam um site mais colorido que o esquema monocromático, mas quase tão fluido.
05 de 10Mais Esquema de Cores da Web Analogico
Adicionado um quadrado de 20% de preto para obter mais cores no esquema.
06 de 10Esquema de cores complementares da Web
Esquemas de cores complementares, ao contrário de outros esquemas de cores, normalmente possuem apenas duas cores. A cor base e é oposta na roda de cores. O Photoshop facilita a obtenção da cor complementar - basta selecionar a área da cor que você deseja adicionar e pressionar Ctrl-I. O Photoshop irá invertê-lo para você. Certifique-se de fazer isso em uma camada duplicada, para que você não perca sua cor base.
- esquerda - a cor base # ffe500
- certo - o complemento # 001aff
Esquemas de cores complementares são geralmente mais impressionantes do que outros esquemas de cores, portanto, use-os com cuidado. Eles são mais usados em peças que precisam se destacar.
07 de 10Esquema de Cores Complementar na Web
Para obter essa versão, adicionei 50% de branco à metade inferior das cores e 30% de preto ao quadrado central. Como você pode ver, ele oferece mais algumas opções, mas ainda é um esquema de cores complementar.
08 de 10Esquema de cores da Web Triadic
Os esquemas de cores tríadicas são compostos de 3 cores mais ou menos igualmente espaçadas ao redor da roda de cores. Como uma roda de cores é de 360 graus, usei novamente a caixa de matiz no seletor de cores para adicionar e subtrair 120 graus da cor de base.
- canto superior esquerdo - a cor base # ffe500
- canto superior direito - +120 graus para obter # e500ff
- inferior esquerdo - -120 graus para obter # 00ffe6
- inferior direito - 100% branco #ffffff
Esquemas de cores tríadicas geralmente produzem páginas da Web muito vibrantes. Mas, como esquemas de cores complementares, eles podem afetar as pessoas de maneira diferente. Certifique-se de testar.
Você também pode criar esquemas de cores tetradic ou de 4 cores, onde as cores são igualmente espaçadas ao redor da roda de cores.
09 de 10Mais Esquema de Cores Triadic Web
Como com os outros exemplos, adicionei um quadrado preto de 30% às cores para obter as sombras adicionais.
10 de 10Esquemas de cores da Web discordantes
A beleza está nos olhos de quem vê, mas é lamentável que nem todas as cores andem juntas. Cores discordantes são cores que estão mais distantes do que cerca de 30 graus na roda de cores e não são complementares ou parte de uma tríade.
Esquemas de cores discordantes podem ser muito chocantes e devem ser usados apenas para gerar atenção. Lembre-se de que, como essas cores geralmente se chocam, a atenção que você recebe pode não ser exatamente o que você está procurando.
