Avançando com CSS3 – Entendendo as Cores

Em mais um post sobre CSS3, hoje vamos nos prender especificamente nas cores em CSS3, mas vamos nos prender mesmo… O objetivo de hoje é fazer com que tenhamos (e eu também estou incluso) pleno conhecimento das características e diferenças que há em cada “modo” nas cores. Vamos lá:

No CSS2 a cor mais usada é no formato hexadecimal (#000000), logo depois, neste rank vem a definição da cor de acordo com o seu nome (black), chamada de color-name – não entrarei em mais detalhes. De fato estes dois modos (principalmente o primeiro), são mais que suficiente para se trabalhar com cores em CSS. Sendo assim, antes de entrar nas cores em CSS3, vamos dissecar o formato hexadecimal, que é onde encontraremos nossa “inspiração” para entender as cores em CSS3.

Psicologia Das Cores

http://pokas.blogs.sapo.pt/arquivo/cores%20k%20se%20misturam.JPG

Hoje vou falar sobre as cores, uma parte fundamental na criação de websites.

-Mas por quê? Você pode me perguntar. Porque eu preciso saber disso?
Pois bem, infelizmente nos cursos de webdesigner não são abordados temas de como quanto cobrar (em breve falarei sobre isto), sobre a psicologia e a função das cores em um site, entre outros… e nos temos que aprender na marra ou errando, e é isso que vou fazer, poupar lhes desses erros cometidos somente por falta de conhecimento.

-Mas Mateus, eu ainda não entendi.
Vou lhe dar um exemplo, o cliente quer um site preto, como você irá convencê-lo de que esta não é a melhor forma? De que o branco por exemplo, será a melhor opção? Por isto é importante saber sobre este tema que é pouco abordado na web. Há aqueles que falam, “O cliente sempre tem a razão, se ele quer assim, assim será…“, ai está um dos grandes erros de alguns webdesigners. Somos formados, fazemos cursos é justamente para isso, você é o designer você obrigatoriamente tem que saber “por onde ir”, como fazer com que o visitante goste do que ele veja, digamos assim você é um desenhista profissional (design) e vai desenha uma pessoa, se você passar este trabalho para uma criança que mal sabe desenhar (o cliente) a diferença será vista de longe. Mais teoricamente podemos dizer:

O designer deve ter bastante criatividade, método, disciplina e conhecimento técnico e cultural. Quanto mais se estuda o meio de atuação da área onde ele pretende atuar e se exercita a observação e o olhar crítico, mais recursos se têm para gerar uma solução.

Sendo assim é muito importante o conhecimento para questões como a citada acima. Bom chega de papo furado e vamos ao que interessa:

Psicologia das Cores

A escolha das cores é fundamental para uma boa harmonia dos elementos de um site. Ela pode enfatizar textos, imagens e caracterizar especialmente os elementos da página.

A cor exerce influência decisiva nos olhos dos seres humanos, afeta a atividade muscular, mental e nervosa. A combinação das cores afeta o psicológico e pode tornar um ponto importante no interesse do público em seu site ou no site do cliente.

A combinação certa pode causar efeitos como de excitação, urgência, contentamento, calma, vulgaridade, melancolia, segurança etc., e ainda destacar algum elemento em relação a outro.

Na Web a seleção de uma cor é um pouco complicada, pois é impossível garantir que uma determinada cor irá se apresentar no monitor do usuário como ela realmente é, ou seja, como a que o designer colocou.

Isto acontece devido ao fato de cada monitor ter uma especificação diferente, uns podem trabalhar com mais vermelho, ser mais brilhante, ter mais contraste e etc., e ainda cada um pode estar configurado com uma determinada resolução como 640×480 pixels, 800×600 pixels e assim por diante.

A combinação desses fatores é que irá determinar a fidelidade e a reprodução de cores e a qualidade das imagens.

Abaixo você poderá visualizar algumas sensações “psicológicas” conhecidas:

As cores e os efeitos psicológicos

Sensações visuais + significado:

– Branco – pureza
– Preto – negativo
– Cinza – tristeza
– Vermelho – calor, dinamismo
– Rosa – graça, ternura
– Azul – pureza, fé

Sensações Acromáticas

Branco: inocência, paz, divindade, calma, harmonia, para os orientais pode significar morte, batismo, casamento, cisne, lírio, neve, ordem, simplicidade, limpeza, bem, pureza.

Preto: sujeira, sombra, carvão, fumaça, miséria, pessimismo, melancolia, nobreza, seriedade. É expressivo e angustiante ao mesmo tempo. Alegre quando combinado com outras cores.

Cinza: pó, chuva, neblina, tédio, tristeza, velhice, passado, seriedade. Posição intermediária entre luz e sombra.

Sensações Cromáticas

Vermelho: guerra, sol, fogo, atenção, mulher, conquista, coragem, furor, vigor, glória, ira, emoção, paixão, ação, agressividade, perigo, dinamismo, baixeza, energia, revolta, calor, violência.

Laranja: prazer, êxtase, dureza, euforia, outono, aurora, festa, luminosidade, tentação, senso de humor. Flamejar do fogo.

Amarelo: egoísmo, ciúmes, inveja, prazer, conforto, alerta, esperança, flores grandes, verão, limão, calor da luz solar, iluminação, alerta, euforia.

Verde: umidade, frescor, bosque, mar, verão, adolescência, bem-estar, paz, saúde (medicina), esperança, liberdade, paz repousante. Pode desencadear paixões.

Azul: frio, mar, céu, horizonte, feminilidade, espaço, intelectualidade, paz, serenidade, fidelidade, confiança, harmonia, afeto, amizade, amor, viagem, verdade, advertência.

Roxo: fantasia, mistério, egoísmo, espiritualidade, noite, aurora, sonho, igreja, justiça, misticismo, delicadeza, calma.

Marrom: cordialidade, comportamento nobre, pensar, melancolia, terra, lama, outono, doença, desconforto, pesar, vigor.

Púrpura: violência, furto, miséria, engano, calma, dignidade, estima.

Violeta: calma, dignidade, estima, valor, miséria, roubo, afetividade, miséria, calma, violência, agressão, poder sonífero.

Vermelho-alaranjado: sexualidade, agressão, competição, operacionalidade, desejo, excetabilidade, dominação.

A escolha da cor sofre influência da moda, das tendências e da decisão do designer.

Harmonia e Contraste

Espaços em branco podem ser definidos como áreas que não contenham textos, imagens ou qualquer outro elemento gráfico. Saber balancear o conteúdo e o espaço em branco em um site é a chave para manter a harmonia dos elementos dentro da página e prender a atenção do usuário.

A conseqüência da má utilização desse recurso é não ter um bom equilíbrio, assim os olhos ficam confusos pois não existirá uma progressão visual para o internauta seguir e conseqüentemente ele perderá o interesse pela página.

O que pode ser feito para que isto não aconteça é seguir as recomendações de alguns “gurus” em design:

“Não coloque o máximo de informações dentro de uma página”.

“Os espaços vazios reforçam a unidade de grupos, harmonizam as áreas, aumentam o contraste e facilitam a visualização e leitura”.

Em geral as cores claras e quentes elevam e expandem, por isso, no passado era comum casas com o teto pintado de azul e paredes amarelas, a sensação que passava era de mais espaço. Por exemplo, nunca se deve pintar um teto de preto ou roxo, essas cores passariam a sensação de opressão e clausura.

Visibilidade

Amarelo e Azul são as cores que melhor se lêem a distância.

O contraste preto-amarelo se vê desde mais longe.

O contraste preto-branco tem um valor neutro.

O contraste vermelho-verde é o que menos se percebe.

Em geral os elementos gráficos escuros sobre fundo claro se percebem melhor que o contrário.

Bom agora mãos a obra, recomendo que guarde este post nos favoritos e visite sempre que precisar de uma referência “psicológica”. Se mesmo assim surgir dúvidas faça comentários, comente a vontade!