CSS tem 16.777.216 cores à sua disposição. Elas podem ter a forma de um nome, um valor rgb (red/green/blue – vermelho/verde/azul) ou um código hexadecimal.
red (vermelho) é o mesmo que rgb(255,0,0), que é o mesmo que rgb(100%, 0%, 0%), que é o mesmo que #ff0000 que é o mesmo que #f00.
Existem 17 nomes de cores válidas predefinidos. São eles aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white e yellow. Veja cada uma na tabela abaixo.
Os três valores no valor rgb vão de 0 até 255. 0 é o menor nível (por exemplo, nenhum vermelho) e 255 é o maior nível (por exemplo, vermelho completo). Esses valores também podem ser porcentagens. Preto é definido como ausência de cor – rgb(0,0,0) – e branco é definido como a união das cores – rgb(255,255,255).
Hexadecimal é um sistema numérico de base 16. Nós geralmente usamos o sistema numero decimal (base 10, 0 a 9), mas o sistema hexadecimal tem 16 dígitos, do 0 ao f.
O número hexadecimal tem o prefixo “#” (sustenido) e pode ter um tamanho de três ou seis dígitos. Basicamente, a versão de três dígitos é uma versão comprimida da versão de seis dígitos (#f00 se torna #ff0000, #c96 se torna #cc9966, etc.). A versão de três dígitos é mais fácil de entender (o primeiro dígito, como o primeiro valor em rgb, é o tom de vermelho, o segundo de verde e o terceiro de azul) mas a versão de seis dígitos te dá mais controle sobre a cor exata.
“color” e “background-color”
Cores podem ser aplicadas usando as propriedades color (define a cor do texto) e background-color (define a cor do fundo).
Um fundo azul com texto amarelo pode ser feito assim:
h1 {
color: yellow;
background-color: blue;
}
Veja como fica no seu navegador.
Essas cores são fortes demais e, como cores fortes demais incomodam o usuário, devem ser usadas muito raramente. Então é melhor mudar seu arquivo CSS pra tons levemente diferentes:
body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
Salve o arquivo CSS e atualize seu navegador. Você verá que as cores do primeiro cabeçalho (o elemento h1) mudaram pra amarelo e azul.
Você pode aplicar as propriedades “color” e “background-color” na maioria dos elementos HTML, incluindo body, o que vai mudar as cores de tudo na página.
Recomendo a leitura do artigo sobre cores do Maujor, que vai mais fundo nesse assunto.
BlogBlogs Tags: +web, minicurso, tutorial, iniciante, css
Related Pages
- Próxima Página: Texto
- Página Anterior: Seletores, Propriedades e Valores
- Imagens de Background (Tutorial Intermediáro de CSS) – Definindo cores e imagens de background (fundo)
Referência
Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
[...] Cores (Tutorial Iniciante de CSS) [...]