Escolhendo a cor certa

Pré-requisitos: Conhecimentos introdutórios em HTML

Ao som de: Tangos e Tragédias – Aquarela da Sbornia

Peço desculpas pela longa ausência. Agora, em uma feliz parceria com o iMasters, trago este pacote de colunas! Gostaria de informar a todos meus leitores que o MSN que a maioria possui está desativado. Para quem quiser conversar comigo ou com outros leitores, basta adicionar no MSN : mgroup47555@hotmail.com

Também gostaria de divulgar o meu curso lançado pela TIShop. Quem tiver interesse, basta acessar clicando aqui. Onde você encontrará o conteúdo desta matéria e muito mais!

Neste artigo aprenderemos como as cores se formam e entenderemos como criar um site harmonioso visualmente.

As cores são formadas por ondas, que refletem em um determinado material. Cada cor possui uma determinada freqüência, como mostrada na tabela abaixo. Analisaremo-la com calma e observaremos alguns exemplos práticos depois.

Vamos imaginar um determinado objeto, que absorva freqüências maiores que 600 THz, logo ele refletirá freqüências de até de 600 THz, portanto ele terá uma coloração VERDE. Uma observação importante: o branco nada mais é que do que todas as cores refletidas ao mesmo tempo, e o preto é a ausência de cores (o objeto absorve todas).

Vamos para um exemplo bem prático. Imaginaremos uma sala, com uma esfera AZUL e outra esfera BRANCA, como na imagem abaixo:

Agora pegue esta mesma sala e coloque uma luz verde pura (que transmita ondas entre 500 – 565 mn), e olhem como ficará:

A esfera branca, como reflete todas as cores, possui apenas a cor verde para refletir, então ela fica VERDE. A esfera azul reflete apenas ondas entre 440-485mn, as outras ela absorve. Como não possuía ondas entre estes valores, ela absorveu todas as ondas existentes. Já que o preto é absorção de todas as cores, ela fica PRETA.

Faça um exemplo prático. Abra o seu Photoshop, crie uma esfera azul e outra esfera branca, logo após crie um quadrado do tamanho de toda tela de trabalho e o deixe com a coloração verde e logo após o coloque em ‘superexposição linear’. Você verá que uma esfera ficará preta e a outra da cor verde.

Cores quentes e cores frias

Muitas pessoas preferem se guiar por cores quentes e cores frias, ao invés de frequência e comprimento de onda. Não preciso explicar muito sobre cores quentes/frias, observem a imagem abaixo:

Observem a ordem das setas, passa do vermelho para o laranja-amarelo-verde-ciano-azul-violeta, seguindo a mesma ordem das freqüências das cores.

RGB e CMYK

Aqui veremos sobre algumas teorias usadas para formar as cores, estes dois sistemas RGB e CMYK são utilizados em vários softwares hoje em dia.

O RGB (utilizado em televisão, monitores e etc.) consiste na adição de comprimentos de ondas. Significa Red+Green+Blue (vermelho+verde+azul), a soma da onda de todas estas cores resulta na cor BRANCA. Cada cor varia de 0 a 255. Por exemplo, se você colocar o valor de R = 255 , G = 255 e B = 255, você obterá a cor BRANCA, caso coloque R = 0, G = 0 e B = 0 obterá a cor preta.

O CMYK é utilizado em praticamente todas as impressoras. Suas siglas significam C = Cyan (ciano), M = Magenta (magenta), Y = Yellow (amarelo), K = Black (preto, utilizam o K e não o B para não confundir com Blue, que significa azul). Consiste na sobreposição destas cores, para formar uma outra cor. Cada valor varia de 0 a 100%. Se deixarmos o C = 0%, M = 0%, Y = 0% e K = 100%, obteremos uma cor 100% preta. Se deixarmos todos os valores em 0%, obteremos uma cor branca.

Uma observação importante é que não existe uma conversão perfeita de RGB para CMYK. Por exemplo, as impressoras utilizam CMYK e os monitores RGB, a maioria das gráficas pede quando você quer algo 100% preto, utilizar o sistema CMYK, e deixar C, M e Y em 0% e K em 100% na hora de imprimir. Mas, se você colocar estes valores no Photoshop, o código da cor não fica #000000 e sim #231F20, no caso não fica um preto puro no Photoshop, mas na impressora ficará. Curioso, não?

Na prática

Agora veremos como utilizar isto na criação de um layout. Quanto menor a frequência e maior a onda, mais cansativo se torna para nossa vista. Mas isso não quer dizer que você precisa fazer um site apenas com cores de frequência mais alta e ondas menores, pois o site ficaria com um visual sem graça. O ideal é fazer uma mescla entre cores quentes/frias ou entre cores de alta e baixa freqüência (como preferir). Observe estas três imagens:

Apenas cores quentes / menor frequência

Apenas cores frias / maior frequência

Balanceamento entre cores de maior e menor frequência

Repare bem na diferença entre cada imagem, em uma delas se torna mais cansativa a nossa visão, porém chama mais atenção. A outra fica meio sem graça, sem conteúdo, e na terceira mais balanceada, da uma aparência mais agradável, mais harmoniosa.

Um outro modo de escolhermos as cores para nosso site é escolher duas cores-padrão que serão usadas. Primeiro vem a pergunta, você quer um site claro ou escuro? Se sua pergunta for um site claro, use como base a cor branca, se for escuro utilize a cor preta. Então temos a cor base do nosso site, agora escolha uma cor principal. Por exemplo, caso você tenha interesse em trabalhar com branco/azul, utilize detalhes com cores de baixa frequência para destacar e dar mais vida. Caso sua escolha seja branco/vermelho use cores de alta frequência para amenizar um pouco o layout.

Uma outra escolha é o verde, não precisa ter cores frias nem quentes o acompanhando, ele por si passa um visual agradável. Se deseja um site totalmente neutro, utilize as cores preto/branco apenas.

Significados

Na hora de escolhermos as cores para fazermos o ‘balanceamento’, é bom termos uma noção de que idéia estas mesmas irão transmitir. Por exemplo, não seria legal fazer o site de uma loja chamada BlackStore utilizando como base cor-de-rosa. Os significados que irei passar agora não devem ser seguidos rigorosamente, é só para transmitir uma idéia inicial, para ver se compreendem melhor o que digo.

Vermelho

É uma cor mais excitante, transmite mais energia, inquietação. Em locais com esta cor como base, o tempo parece passar mais rápido. Ela é a cor que mais se destaca, por isso é usada para chamar atenção.

Laranja

É uma cor que transmite uma idéia mais jovem, mais animada, é uma cor mais radiante.

Amarelo

Também transmite uma idéia mais jovem, mais clara e transparente, ela estimula a criatividade, o intelecto.

Verde

O verde é a transição entre cores frias/quentes ou de menor/maior ondas. Ela traz uma sensação de equilíbrio, transmite uma idéia mais relaxante.

Azul

Transmite um aspecto calmo, tranquilo. Ambientes com esta coloração parece que o tempo passa mais lentamente.

Preto

As cores preto/branco são usadas como base para um site, onde escolhemos se o site vai ter uma tonalidade mais clara/escura. O preto é mais misterioso, aguça o intelecto e a reflexão. É usado como base para sites com tonalidade escura.

Branco

O branco é usado como base para sites com tonalidade clara. Ele transmite uma idéia transparente, clara e objetiva. Passando uma sensação de calma e conforto.

Agora basta escolher as cores certas para o site de seu cliente, conforme as informações que você coletou dele.

Aproveitando a oportunidade, gostaria de divulgar duas empresas que me patrocinam e são uma referência de qualidade!

HostDime – Uma das maiores empresas do Brasil no seu setor de atuação, confiram!

Soft4You – Um ótimo sistema de gestão de hosting, 100% nacional, imperdível!