Cor

Esta página explica mais sobre como você pode especificar cores no CSS.

Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.

Informação: Cor

Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:

  black   gray   silver   white  
primárias red   lime   blue  
secundárias yellow   aqua   fuchsia  
  maroon   orange   olive   purple   green   navy   teal  

 

Mais detalhes
Seu navegador pode suportar muitas cores nomeadas, como:
dodgerblue   peachpuff   tan   firebrick   aquamarine  

Para detalhes sobre esta lista extendida, veja: SVG color keywords no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.


Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos hexadecimais na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:

black   #000
pure red   #f00
pure green   #0f0
pure blue   #00f
white   #fff


Para a paleta total, especifique dois digitos hexadecimais por cada componente:

black   #000000
pure red   #ff0000
pure green   #00ff00
pure blue   #0000ff
white   #ffffff

Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.

Exemplos
Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos:
Começe com vermelho puro:   #f00
Para tornar isto mais pálido, adicione um pouco de verde e azul:   #f77
Para tornar isto mais alaranjado, adicione um pouquinho mais de verde:   #fa7
Para tornar isto mais escuro, reduza todos os componentes:   #c74
Para reduzir a saturação, faça os componentes mais parecidos:   #c98
Se você quiser deixar todos os componentes iguais, você obterá cinza:   #ccc
Para uma sombra pastel como azul pálido:
Começe com branco puro:   #fff
Reduza um pouco os outros componentes:   #eef
Mais detalhes
Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens.

Por exemplo, este marrom (vermelho escuro):

rgb(128, 0, 0)


Para maiores detalhes sobre como especificar cores, veja: Colors na CSS Specification.

Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: CSS2 System Colors na CSS Specification.

Propriedades de cor

Você já usou a propriedade color para textos.

Você também já usou a propriedade background-color para mudar elementos de fundo.

Fundos podem ser configurados para transparent para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.

Exemplo
As caixas de Exemplo neste tutorial usam este fundo amarelo pálido:
background-color: #fffff4;

As caixas de Mais detalhes usam esta paleta cinza:

background-color: #f4f4f4;

Ação: Usando códigos de cor

Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)

/*** CSS Tutorial: Página de Cor ***/
 
/* Fonte da Página */
body {font: 16px "Comic Sans MS", cursive;}
 
/* Parágrafos */
p {color: blue;}
#first {font-style: italic;}
 
/* Letras Iniciais */
strong {
  color: red;
  background-color: #ddf;
  font: 200% serif;
  }
 
.carrot {color: red;}
.spinach {color: green;}

Atualize seu navegador para ver o resultado:

Cascading Style Sheets
Cascading Style Sheets
Desafio
No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado.

(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.)

O que vem depois?

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.

A próxima página explica como você pode fazer exceções para separar rigorosamente: Conteúdo

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores para esta página: fscholz, teoli, Verruckt, Leandro Mercês Xavier
 Última atualização por: fscholz,