SlideShare una empresa de Scribd logo
1 de 9
A cor na web. Escolha da paleta para um web site 
É necessário escolher cores de acordo com o logotipo da página. Neste 
capítulo veremos relações possíveis para conseguir a funcionalidade 
esperada. 
Na hora construir uma página o primeiro que temos que ter claro é a gama de 
cores que vamos empregar em suas diferentes partes, e para isso devemos 
começar sempre com selecionar uma cor ou cores base, que será o que dará um 
espírito próprio ao nosso site. 
É importante a escolha desta gama, que, por regra geral, será conveniente manter 
em todas as páginas do site, conseguindo com isso estabelecer uma identidade 
própria e uma continuidade entre todas as páginas que a formam. 
Se tivermos escolhido ou imposto um logotipo, suas cores serão as que marquem 
como guia o resto da página, trabalhando nas diferentes partes da página com os 
degrades claros e escuros destas cores base. 
Por ser necessária a introdução de outras cores (uma ou duas), teremos que 
escolher estas de forma que sejam equilibradas com as do logotipo e trabalhem 
juntas em boa harmonia. 
É conveniente que nos baseemos em uma das gamas de cores estudadas no 
capítulo anterior (monocromáticas, análogos, tríades, etc.), sobretudo se não 
tivermos grande experiência no desenho com cores, e que apliquemos os conceitos 
já estudados (hierarquia visual, escala, contrastes, etc.). 
Como exemplos, podemos considerar as seguintes paletas genéricas:
Ademais, podemos seguir uma série de regras generais que nos orientarão: 
- As cores primárias, puras, brilhantes, são comuns demais, dando assim pouca 
informação ao olho. Por isto, não convém se basear nunca nelas para construir 
nossas páginas. 
- A cor dos links convém que seja o azul padrão do navegador ou pelo menos 
permanecer sublinhados e com uma cor bem diferenciada das do resto de 
elementos textuais da página.
- Páginas destinadas a um público geral devem estar baseadas em combinações 
branco-preto- cor logotipo, em cores mais neutras, que a maioria possa gostar, 
como cores secundárias ou terciárias em tons pastel, ou em uma bem estudada 
gama de cinzas. É fundamental nestas páginas dar às páginas a identidade 
corporativa da empresa ou organização que representam. 
- Páginas orientadas a um público jovem podem adotar cores vivas, primários, com 
altos contrastes entre fundo e conteúdo, ou então com fundos escuros e textos 
claros, com a inclusão de pequenas animações em Flash de tons vistosos.
- Páginas destinadas a um público adulto devem estar desenhadas com cores sérios, 
elegantes, frios, sem altos contrastes de tom, em cores neutras, inclusive puxando 
a cinza. Sempre podemos recorrer neste caso ao típico padrão de fundo branco e 
letras pretas ou cinza escuro. 
- Páginas de empresa ou de instituições devem estar desenhadas de acordo com as 
cores corporativas da mesma, incluindo sempre o logotipo.
- Páginas de divulgação, como manuais e artigos, devem apresentar o texto de 
forma que destaque adequadamente sobre o fundo, sem usar cores escandalosas 
que cansem a vista, já que o objetivo fundamental destas páginas é ser lida. 
Conselho: fundo claro e letras escuras, que destaquem muito bem. 
- Páginas exóticas e ao mesmo tempo elegantes podem ser obtidas com fundo 
preto ou cor muito escura e letras e/ou motivos dourados, brancos ou púrpura e 
vermelho.
- Páginas destinadas a ser impressas pelo usuário final não devem empregar core 
escuras como fundo, já que obrigaria a dar cores claras aos textos para que se 
pudesse visualizar. Se se faz assim e o usuário não tiver ativada a opção de 
imprimir as cores de fundo, não verá nada na página impressa, e se a tiver ativada, 
gastará muita tinta, obtendo de qualquer forma um mal resultado. Conselho: 
fundos brancos ou muito claros, com textos escuros, ou versão especial para 
impressão com estas cores. 
Estas considerações gerais podem nos ajudar a manejar corretamente as cores em 
nossas páginas web. Porém, como sempre, a prática é o que manda, e 
afortunadamente podemos navegar pela Internet, visualizando páginas do tipo 
concreto que queremos desenhar para aprender e ver como diversos autores 
resolveram o desenho. 
Autoria e outras referências sobre este artigo
Dentro deste artigo: 
+ 1 manual relacionado 
+ 2 Categorias relacionadas 
Informe de Luciano Moreno 
URL: http://www.htmlweb.net/ 
Acrescentar um comentário do artigo 
Manuais relacionados com este artigo 
Dentro de Curso prático de Web Design 
Seguinte: A cor na web. Ferramentas básicas para trabalhar com cores 
Anterior: A cor na web. Cores e partes de uma página 
< Índice de Curso prático de Web Design 
Categorias relacionadas 
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados 
com este artigo: 
+ Entrar em Design 
+ Entrar em Guias de desenho

Más contenido relacionado

Similar a Escolha de cores para sites - guia completo

Como criar apresentações em 10 passos simples
Como criar apresentações em 10 passos simplesComo criar apresentações em 10 passos simples
Como criar apresentações em 10 passos simplesMárcio Martins
 
O Mundo Mágico do Photoshop SEGUNDA EDIÇÃO
O Mundo Mágico do Photoshop SEGUNDA EDIÇÃOO Mundo Mágico do Photoshop SEGUNDA EDIÇÃO
O Mundo Mágico do Photoshop SEGUNDA EDIÇÃOWelington Carvalho
 
Aperfeiçoar apresentações
Aperfeiçoar apresentaçõesAperfeiçoar apresentações
Aperfeiçoar apresentaçõesMarcio Uzum
 
Template + manual criar e books no estado da arte
Template + manual   criar e books no estado da arteTemplate + manual   criar e books no estado da arte
Template + manual criar e books no estado da arteChristiano Gorayeb
 
Manual_ID_Estante-Magica
Manual_ID_Estante-MagicaManual_ID_Estante-Magica
Manual_ID_Estante-MagicaMarcos Chrispim
 
Design para Redes Sociais - Webdesign 2020
Design para Redes Sociais - Webdesign 2020Design para Redes Sociais - Webdesign 2020
Design para Redes Sociais - Webdesign 2020Renato Melo
 
Material-Didático-PowerPoint.pdf
Material-Didático-PowerPoint.pdfMaterial-Didático-PowerPoint.pdf
Material-Didático-PowerPoint.pdfTocoMen
 
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, CorHtml aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, CorErick L. F.
 
Design de Cores na Web, por Martha Gabriel
Design de Cores na Web, por  Martha GabrielDesign de Cores na Web, por  Martha Gabriel
Design de Cores na Web, por Martha GabrielMartha Gabriel
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoRicardo Pereira Rodrigues
 
Dicas 100506053110-phpapp01
Dicas 100506053110-phpapp01Dicas 100506053110-phpapp01
Dicas 100506053110-phpapp01jtoscan
 
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Erick L. F.
 
Design para Redes Sociais 2 - Webdesign - aula 13 - 2020-01
Design para Redes Sociais 2 - Webdesign - aula 13 - 2020-01Design para Redes Sociais 2 - Webdesign - aula 13 - 2020-01
Design para Redes Sociais 2 - Webdesign - aula 13 - 2020-01Renato Melo
 
Edição e publicação 1 encontro
Edição e publicação   1 encontroEdição e publicação   1 encontro
Edição e publicação 1 encontroKetheley Freire
 

Similar a Escolha de cores para sites - guia completo (19)

Como criar apresentações em 10 passos simples
Como criar apresentações em 10 passos simplesComo criar apresentações em 10 passos simples
Como criar apresentações em 10 passos simples
 
O Mundo Mágico do Photoshop SEGUNDA EDIÇÃO
O Mundo Mágico do Photoshop SEGUNDA EDIÇÃOO Mundo Mágico do Photoshop SEGUNDA EDIÇÃO
O Mundo Mágico do Photoshop SEGUNDA EDIÇÃO
 
Aperfeiçoar apresentações
Aperfeiçoar apresentaçõesAperfeiçoar apresentações
Aperfeiçoar apresentações
 
Template + manual criar e books no estado da arte
Template + manual   criar e books no estado da arteTemplate + manual   criar e books no estado da arte
Template + manual criar e books no estado da arte
 
O design equilibrado3
O design equilibrado3O design equilibrado3
O design equilibrado3
 
Manual_ID_Estante-Magica
Manual_ID_Estante-MagicaManual_ID_Estante-Magica
Manual_ID_Estante-Magica
 
Design para Redes Sociais - Webdesign 2020
Design para Redes Sociais - Webdesign 2020Design para Redes Sociais - Webdesign 2020
Design para Redes Sociais - Webdesign 2020
 
impress openoffice
impress openofficeimpress openoffice
impress openoffice
 
Material-Didático-PowerPoint.pdf
Material-Didático-PowerPoint.pdfMaterial-Didático-PowerPoint.pdf
Material-Didático-PowerPoint.pdf
 
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, CorHtml aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, Cor
 
Design de Cores na Web, por Martha Gabriel
Design de Cores na Web, por  Martha GabrielDesign de Cores na Web, por  Martha Gabriel
Design de Cores na Web, por Martha Gabriel
 
Workshop Básico de Direção de Arte
Workshop Básico de Direção de ArteWorkshop Básico de Direção de Arte
Workshop Básico de Direção de Arte
 
Dicas
DicasDicas
Dicas
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
Dicas 100506053110-phpapp01
Dicas 100506053110-phpapp01Dicas 100506053110-phpapp01
Dicas 100506053110-phpapp01
 
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
 
Design para Redes Sociais 2 - Webdesign - aula 13 - 2020-01
Design para Redes Sociais 2 - Webdesign - aula 13 - 2020-01Design para Redes Sociais 2 - Webdesign - aula 13 - 2020-01
Design para Redes Sociais 2 - Webdesign - aula 13 - 2020-01
 
Revista Scena (Apresentação)
Revista Scena (Apresentação)Revista Scena (Apresentação)
Revista Scena (Apresentação)
 
Edição e publicação 1 encontro
Edição e publicação   1 encontroEdição e publicação   1 encontro
Edição e publicação 1 encontro
 

Más de Blogotipos - Diário das Marcas

Más de Blogotipos - Diário das Marcas (20)

Teoria das cores
Teoria das coresTeoria das cores
Teoria das cores
 
Significado das cores para outros paises
Significado das cores para outros paisesSignificado das cores para outros paises
Significado das cores para outros paises
 
Significado das cores riccardo benetti
Significado das cores   riccardo benettiSignificado das cores   riccardo benetti
Significado das cores riccardo benetti
 
Hsv
HsvHsv
Hsv
 
Entendendo as cores e seus significados
Entendendo as cores e seus significadosEntendendo as cores e seus significados
Entendendo as cores e seus significados
 
Daltonismo
DaltonismoDaltonismo
Daltonismo
 
Cor
CorCor
Cor
 
Cor nas artes visuais
Cor nas artes visuaisCor nas artes visuais
Cor nas artes visuais
 
Cor na teatro
Cor na teatroCor na teatro
Cor na teatro
 
Cor na sinalização
Cor na sinalizaçãoCor na sinalização
Cor na sinalização
 
Cor na psicologia
Cor na psicologiaCor na psicologia
Cor na psicologia
 
Cor na moda
Cor na modaCor na moda
Cor na moda
 
Cor na arquitectura
Cor na arquitecturaCor na arquitectura
Cor na arquitectura
 
Cor azul
Cor azulCor azul
Cor azul
 
Anexo lista de cores
Anexo   lista de coresAnexo   lista de cores
Anexo lista de cores
 
A cor
A corA cor
A cor
 
Teoria da cor estudo de algumas cores ii
Teoria da cor   estudo de algumas cores iiTeoria da cor   estudo de algumas cores ii
Teoria da cor estudo de algumas cores ii
 
Teoria da cor estudo de algumas cores i
Teoria da cor   estudo de algumas cores iTeoria da cor   estudo de algumas cores i
Teoria da cor estudo de algumas cores i
 
Teoria da cor estudo de algumas cores ii
Teoria da cor   estudo de algumas cores iiTeoria da cor   estudo de algumas cores ii
Teoria da cor estudo de algumas cores ii
 
Teoria da cor estudo de algumas cores i
Teoria da cor   estudo de algumas cores iTeoria da cor   estudo de algumas cores i
Teoria da cor estudo de algumas cores i
 

Escolha de cores para sites - guia completo

  • 1. A cor na web. Escolha da paleta para um web site É necessário escolher cores de acordo com o logotipo da página. Neste capítulo veremos relações possíveis para conseguir a funcionalidade esperada. Na hora construir uma página o primeiro que temos que ter claro é a gama de cores que vamos empregar em suas diferentes partes, e para isso devemos começar sempre com selecionar uma cor ou cores base, que será o que dará um espírito próprio ao nosso site. É importante a escolha desta gama, que, por regra geral, será conveniente manter em todas as páginas do site, conseguindo com isso estabelecer uma identidade própria e uma continuidade entre todas as páginas que a formam. Se tivermos escolhido ou imposto um logotipo, suas cores serão as que marquem como guia o resto da página, trabalhando nas diferentes partes da página com os degrades claros e escuros destas cores base. Por ser necessária a introdução de outras cores (uma ou duas), teremos que escolher estas de forma que sejam equilibradas com as do logotipo e trabalhem juntas em boa harmonia. É conveniente que nos baseemos em uma das gamas de cores estudadas no capítulo anterior (monocromáticas, análogos, tríades, etc.), sobretudo se não tivermos grande experiência no desenho com cores, e que apliquemos os conceitos já estudados (hierarquia visual, escala, contrastes, etc.). Como exemplos, podemos considerar as seguintes paletas genéricas:
  • 2.
  • 3.
  • 4. Ademais, podemos seguir uma série de regras generais que nos orientarão: - As cores primárias, puras, brilhantes, são comuns demais, dando assim pouca informação ao olho. Por isto, não convém se basear nunca nelas para construir nossas páginas. - A cor dos links convém que seja o azul padrão do navegador ou pelo menos permanecer sublinhados e com uma cor bem diferenciada das do resto de elementos textuais da página.
  • 5. - Páginas destinadas a um público geral devem estar baseadas em combinações branco-preto- cor logotipo, em cores mais neutras, que a maioria possa gostar, como cores secundárias ou terciárias em tons pastel, ou em uma bem estudada gama de cinzas. É fundamental nestas páginas dar às páginas a identidade corporativa da empresa ou organização que representam. - Páginas orientadas a um público jovem podem adotar cores vivas, primários, com altos contrastes entre fundo e conteúdo, ou então com fundos escuros e textos claros, com a inclusão de pequenas animações em Flash de tons vistosos.
  • 6. - Páginas destinadas a um público adulto devem estar desenhadas com cores sérios, elegantes, frios, sem altos contrastes de tom, em cores neutras, inclusive puxando a cinza. Sempre podemos recorrer neste caso ao típico padrão de fundo branco e letras pretas ou cinza escuro. - Páginas de empresa ou de instituições devem estar desenhadas de acordo com as cores corporativas da mesma, incluindo sempre o logotipo.
  • 7. - Páginas de divulgação, como manuais e artigos, devem apresentar o texto de forma que destaque adequadamente sobre o fundo, sem usar cores escandalosas que cansem a vista, já que o objetivo fundamental destas páginas é ser lida. Conselho: fundo claro e letras escuras, que destaquem muito bem. - Páginas exóticas e ao mesmo tempo elegantes podem ser obtidas com fundo preto ou cor muito escura e letras e/ou motivos dourados, brancos ou púrpura e vermelho.
  • 8. - Páginas destinadas a ser impressas pelo usuário final não devem empregar core escuras como fundo, já que obrigaria a dar cores claras aos textos para que se pudesse visualizar. Se se faz assim e o usuário não tiver ativada a opção de imprimir as cores de fundo, não verá nada na página impressa, e se a tiver ativada, gastará muita tinta, obtendo de qualquer forma um mal resultado. Conselho: fundos brancos ou muito claros, com textos escuros, ou versão especial para impressão com estas cores. Estas considerações gerais podem nos ajudar a manejar corretamente as cores em nossas páginas web. Porém, como sempre, a prática é o que manda, e afortunadamente podemos navegar pela Internet, visualizando páginas do tipo concreto que queremos desenhar para aprender e ver como diversos autores resolveram o desenho. Autoria e outras referências sobre este artigo
  • 9. Dentro deste artigo: + 1 manual relacionado + 2 Categorias relacionadas Informe de Luciano Moreno URL: http://www.htmlweb.net/ Acrescentar um comentário do artigo Manuais relacionados com este artigo Dentro de Curso prático de Web Design Seguinte: A cor na web. Ferramentas básicas para trabalhar com cores Anterior: A cor na web. Cores e partes de uma página < Índice de Curso prático de Web Design Categorias relacionadas Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo: + Entrar em Design + Entrar em Guias de desenho