Bruno C. de Paula
Laboratório de Informática
Propriedades CSS:
Cores
1º Semestre 2009 > PUCPR > BSI
Resumo da aula
Após finalizarmos nosso trabalho com os
seletores do CSS, é chegado o momento
de conhecer as principais propriedades
do CSS;
Nosso objetivo hoje será conhecer as
propriedades que lidam com cores.
Material referente ao assunto da aula
Tutorial sobre cores em CSS:
– http://www.maujor.com/tutorial/cores
.php
Recomendação W3C do CSS 3 (cores)
(em Inglês):
– http://www.w3.org/TR/css3-color/
Capítulo do Livro CSS – Guia de Bolso:
– http://altabooks.tempsite.ws/capitulo
s_amostra/00_cssbolso.pdf
05/11/2015
3
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
05/11/2015
4
Ferramentas de cor
Color Picker / Color Wheel
 Extensão para Firefox:
– http://www.colorzilla.com/firefox/
– https://addons.mozilla.org/enUS/firefox/addon/60
 Online:
– http://www.colorpicker.com/
– http://www.workwithcolor.com/doughnutcolor-picker-01.htm
– http://www.febooti.com/products/iezoom/o
nline-help/online-color-chart-picker.html
– http://www.ficml.org/jemimap/style/color/
wheel.html
05/11/2015
5
Ferramentas de cor
 Color Blender:
– http://meyerweb.com/eric/tools/colorblend/
Referências sobre cores:
– http://www.morecrayons.com/
05/11/2015
6
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>.
05/11/2015
7
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>;
05/11/2015
8
Exemplos da aula
Cor em #RRGGBB
Cor em #RGB
Cor em rgb(rrr.rr%, ggg.gg%,
bbb.bb%)
Cor em rgb(rrr, ggg, bbb)
Cor como palavra-chave;
Cores do sistema operacional;
Cores em rgba(rrr,ggg,bbb,a) ;
Cores em hsl(h, s%, l%).
05/11/2015
9
Cada cor tem um significado e
uma personalidade
05/11/2015
10
A cor é essencial para a
apresentação de um site
e pode ser representada de
maneiras diferentes
05/11/2015
11
Na tela do computador as cores
são aditivas (cor luz)
Mistura de intensidades de:
– Vermelho (red);
– Verde (green);
– Azul (blue).
05/11/2015
12
Monitores apresentam as cores
de maneira diferente
Cores de 8 bits (256 cores):
– raro hoje em dia;
– usar paleta web safe (216 cores).
Cores de 16 bits (65 mil cores):
– usar paleta web smart (4096 cores).
Cores de 32 bits (16 milhões):
– 16 milhões de cores;
– Liberdade na escolha da cor.
05/11/2015
13
Notação de cor em CSS
#RRGGBB;
#RGB;
rgb(rrr.rr%, ggg.gg%,
bbb.bb%);
rgb(rrr, ggg, bbb);
Palavra-chave.
05/11/2015
14
Notação de cor em CSS
CSS 3
rgba(rrr,ggg,bbb,aaa);
hsl(h, s%, l%);
hsla(h, s%, l%, a).
05/11/2015
15
#RRGGBB
RR:
– Intensidade do vermelho em base
hexadecimal de 0 a 255 (FF);
GG:
– Intensidade do verde em base
hexadecimal de 0 a 255 (FF);
BB:
– Intensidade do azul em base
hexadecimal de 0 a 255 (FF).
05/11/2015
16
Base hexadecimal
0 dec = 0 hex;
...
15 dec = F hex;
16 dec = 10 hex;
255 dec = FF hex;
05/11/2015
17
05/11/2015
18
#RGB
Forma abreviada;
Cada dígito é replicado;
Exemplos:
– #f00 é a mesma coisa que #ff0000;
– #ccc é a mesma coisa que #cccccc;
– #123 é a mesma coisa que #112233;
Tons de cinza: #000, #111, #222,...,
#ddd, #eee, #fff.
05/11/2015
19
05/11/2015
20
rgb(rrr.rr%, ggg.gg%, bbb.bb%)
Valores RGB de 0 a 100%;
100% corresponde a 255 (FF);
05/11/2015
21
rgb(rrr, ggg, bbb)
Valores RGB de 0 a 255;
05/11/2015
22
Palavra-chave
HTML 4.01:
– 16 cores;
05/11/2015
Cores do
Sistema:
29 cores;
Depende do
Sistema
Operacional.
23
Palavra-chave
Cores HTML (X11) :
– http://www.w3schools.com/HTML/ht
ml_colornames.asp
05/11/2015
24
rgba(rrr,ggg,bbb,a)
RGB + Transparência;
0 => transparente;
1 => sólido.
05/11/2015
25
hsl(h, s%, l%)
H (hue):
– Tonalidade de cor;
– “Cores do arco-íris”;
– 0 a 360;
S (saturation):
– Pureza da cor;
– 0 a 100%;
L (lightness):
– Brilho;
– 0 a 100%;
05/11/2015
26
05/11/2015
27
hsla(h, s%, l%, a)
HSL + transparência;
0 => transparente;
1 => sólido.
05/11/2015
28
Material referente ao assunto da aula
Tutorial sobre cores em CSS:
– http://www.maujor.com/tutorial/cores
.php
Recomendação W3C do CSS 3 (cores)
(em Inglês):
– http://www.w3.org/TR/css3-color/
Capítulo do Livro CSS – Guia de Bolso:
– http://altabooks.tempsite.ws/capitulo
s_amostra/00_cssbolso.pdf
05/11/2015
29
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
05/11/2015
30
Ferramentas de cor
Color Picker / Color Wheel
 Extensão para Firefox:
– http://www.colorzilla.com/firefox/
– https://addons.mozilla.org/enUS/firefox/addon/60
 Online:
– http://www.colorpicker.com/
– http://www.workwithcolor.com/doughnutcolor-picker-01.htm
– http://www.febooti.com/products/iezoom/o
nline-help/online-color-chart-picker.html
– http://www.ficml.org/jemimap/style/color/
wheel.html
05/11/2015
31
Ferramentas de cor
 Color Blender:
– http://meyerweb.com/eric/tools/colorblend/
Referências sobre cores:
– http://www.morecrayons.com/
05/11/2015
32
Próximas aulas de CSS
Propriedades CSS:
–Imagens e fundos.
05/11/2015
33