Erika Sarti | portfolio web designer » Cores

Meus sites favoritos sobre cores

Erika Sarti — Tue, 20 May 2008 13:47:54 +0000

A cor é fundamental no design. Se a escolha das cores de um projeto for mal feita, pode passar uma idéia completamente diferente do esperado. Os sites desta lista vão te ajudar a combinar cores corretamente para o seu projeto.

Kuler
Ferramenta online da Adobe com paletas de cores criadas e enviadas por usuários.

Color Palette Creator
Ferramenta que mistura até três cores e retorna o hexadecimal das tonalidades.

Color Blender
Ferramenta que mistura duas cores e retorna até 10 tonalidades em hexadecimal e RGB.

Color Blender
Apesar do mesmo nome, esta ferramenta vai um pouco além: além de misturar cores, você também pode baixar a paleta criada em formato .act (Photoshop) ou .eps (Illustrator).

Color Scheme Generator 2
Ótima ferramenta para criar combinações ideais de cores.

Tabela de Cores Seguras
Tabela criada por mim com os códigos hexa das cores web safe.

Tabela de Cores em HTML
Outra compilação com o nome e os códigos hexa de cores para internet.

Você pode acompanhar os links desta série de posts através do meu del.icio.us.

Tabela de cores em HTML

Erika Sarti — Tue, 17 Jul 2007 17:29:16 +0000

Logo que eu coloquei a tabela de cores web safe no ar, decidi que compilaria uma tabela com outras cores.

Por isso, montei essa segunda tabela de cores em HTML, com todas as cores que têm um nome, seu código hexadecimal e seu código RGB.

Apesar de não terem a mesma “garantia de fidelidade de cores” da tabela web safe, esses tons têm a vantagem de serem muito mais fáceis de memorizar – é mais fácil lembrar de HotPink do que de #FF69B4, não?

As cores no web design

Erika Sarti — Mon, 14 May 2007 14:12:48 +0000

Cuidar das cores de um site não é somente uma questão de estética ou usabilidade. As cores exercem influência psicológica sobre nós, por isso devemos prestar muita atenção a esse elemento do design.

Aplicadas corretamente, as cores têm o poder de “guiar” o usuário através do site, segundo o grau de importância que o designer determina para cada elemento. Misturar muitas cores fará o usuário se sentir perdido, sem saber para onde deve prestar atenção primeiro.

Também quando determinamos uma identidade visual, as cores nos ajudam a agrupas elementos que têm alguma relação entre si.

Claro que cada pessoa tem sua interpretação pessoal sobre essa ou aquela cor, proveniente de experiências e lembranças anteriores. Além disso, valores culturais também influenciam o efeito que cada cor tem sobre nós, sem contar as tendências de moda (atualmente, por exemplo, o cinza é o “novo preto”). Mas de maneira geral, a maioria delas carrega os mesmos significados. Por exemplo, você já deve ter ouvido dizer que as cores amarela e vermelha do logotipo do McDonalds sugerem, respectivamente, ansiedade e fome, fazendo com que a pessoa coma mais e mais rápido.

Abaixo estão alguns dos significados para as cores mais comuns:

Branco sugere pureza, simplifidade, luz, paz, higiene.
Quanto combinado com o azul, dá a sensação de frescor e limpeza.
Remete a casamentos e hospitais.

Preto remete ao pessimismo, morte, tristeza, dor, mistério, seriedade.
Porém, quando brilhante dá a sensação de nobreza, elegância.
Já quando combinado com outras cores, pode ficar alegre.

Cinza tédio, tristeza, velhice, passado, chuva, pó.
Sugere a indecisão e a ausência de energia.

Vermelho sugere sol, fogo, guerra, atenção, perigo, conquista, coragem, agitação, emoção, paixão, agressividade.
É uma cor quente, que impõe-se sem discrição. Quando tende ao laranja, sugere competição, dominação, excitabilidade. É indicada para anúncios que indicam calor e energia.

Laranja remete à expansão, irradiação, outono, aurora, senso de humor, prazer, euforia.
É uma cor acolhedora, íntima. Na publicidade, tem os mesmos resultados do vermelho, porém de forma moderada.

Amarelo é a cor da luminosidade. É radiante, feliz, vibrante, viva, que sugere flores, verão, calor do sol, conforto, esperança. Também pode remeter a angústia, egoísmo, ciúmes, inveja.

Verde remete à natureza, verduras, liberdade, à esperança. Também sugere frescor, umidade, adolescência e pode desencadear paixões. Por ser uma cor repousante, é muito utilizada em hospitais atualmente, para gerar bem-estar e repouso.

Azul provoca uma sensação de calma, frescor e higiene. Também remete ao frio, ao céu, mar, tranquilidade, paz, infinito, confiança, afeto, amizade, verdade. É a cor da maturidade, da intelectualidade e da confiança, por isso é preferida por muitos adultos. Com o preto, causa sensação de antipatia, por isso deve ser evitado na publicidade.

Roxo sugere a espititualidade, por isso nos remete à igreja, misticismo, delicadeza. Também sugere calma, justiça, noite, mistério, fantasia, egoísmo.
Assim como o preto, também remete à nobreza e ao poder. Quando tente ao violeta, tem efeito calmante, sonífero. Quando tende ao púrpura, cria a sensação de dignidade, estima. Por ser uma cor que entristece, não é indicada na publicidade.

Rosa é de pouca vitalidade, e sugere feminilidade e afeição na nossa cultura. É uma cor íntima, doce, romântica.

Marrom dá a sensação de cordialidade, segurança, solidez, outono, terra, chocolate, densidade, madeira, lama, doença, pesar, desconforto. Não é uma cor recomendável em publicidade.

É importante lembrar que a fidelidade de cores não é garantida na web. Isso porque a maneira como o site, e consequentemente a cor, será mostrado na tela do usuário depende de vários fatores, como contraste, resolução, tipo de monitor, etc. As cores que têm mais chance de se ter o mesmo resultado em todos os dispositivos são as cores web safe.

Referência: www.tci.art.br/cor

As cores em HTML e CSS

Erika Sarti — Thu, 28 Sep 2006 17:10:30 +0000

Nossos monitores de vídeo trabalham com o sistema de cores RGB (red-green-blue), onde valores entre 0 e 255 de vermelho, verde e azul são combinados para formar todos os tons de cores na tela. Por exemplo, a cor amarela é formada por 100% de vermelho, 100% de verde e 0% de azul, ou 255,255,0. Porém, quando trabalhamos com HTML ou CSS, as cores são utilizadas no sistema hexadecimal (com base 16). Por isso, você provavelmente conhece melhor o amarelo como #FFFF00.

Antigamente, os monitores só suportavam 256 cores, o que limitava a quantidade de tons disponíveis. Hoje em dia os monitores modernos trabalham com milhões de cores, mas mesmo assim ainda existem as cores seguras para web.

Continue lendo “As cores em HTML e CSS” no InfoWester…

Tabela de cores em HTML

Erika Sarti — Sat, 23 Sep 2006 05:21:46 +0000

Mais uma ferramenta de consulta para web developers: montei uma tabela de cores hexadecimais em HTML.

Nessa versão, só as cores web safe. O que isso significa?

Quando a web surgiu, os computadores comuns não exibiam milhaes de cores como agora. A maioria dos sistemas operacionais só trabalhava com 256 cores, o que limitava bastante os tons exibidos na tela.

Assim como a tv, a tela do computador funciona no sitema de cores RGB (red – green – blue, ou vermelho – verde – azul). Para formar cada tom de cor, é feita uma combinação entre esses 3 fatores, que vai de 0 a 255. Por exemplo, a cor branca é representada por (255,255,255); a cor vermelha, por (255,0,0) e assim por diante.

As cores seguras para web são aquelas formadas por combinações entre os números 0, 51, 102, 153, 204 e 255. Em hexadecimal, esses valores se tornam 00, 33, 66, 99, CC e FF. Portanto, qualquer tom de cor formado pela combinação desses valores é web safe.

Na tabela, alguns tons ficam tão parecidos que pareciam repetidos, por isso nem todas as cores possíveis aparecem.

Hoje em dia, os vídeos modernos suportam milhões de cores, então existe uma infinidade de tons diferentes (mais de 16 milhões na verdade – não que nossos olhos diferenciem todas essas tonalidades). Na próxima semana vou escrever um tutorial explicando como converter qualquer cor RGB em hexadecimal para ser usada no HTML.

Get CoffeeCup Color Schemer For Free!

Erika Sarti — Thu, 11 May 2006 00:50:12 +0000

O CoffeeCup Color Schemer é uma ferramenta bem interessante para todos os web designers na hora de combinar as cores do seu layout. Essa semana você ganha uma cópia registrada do software se colocar um link no seu site:

[ Get CoffeeCup - HTML Editor & Web Design Software ]

E você, tá esperando o que pra divulgá-lo e conseguir sua cópia? ;D

PS: mantenha o volume da sua caixa de som baixinho no final da instalação =|

Meta Tags – O que são e como utilizá-las