-
Notifications
You must be signed in to change notification settings - Fork 0
/
cores.html
70 lines (46 loc) · 3.45 KB
/
cores.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Trabalhando com cores</title>
<style>
p {
font-family: sans-serif;
}
h2 {
color: #9c3131;
font-family: sans-serif;
}
</style>
</head>
<body style="background-color: rgb(220, 195, 195);">
<h1 style="font-size: 32pt; font-family: sans-serif; color: #a52a2a;">Trabalando com Cores </h1>
<hr>
<p>Em HTML, as cores também podem ser especificadas usando valores RGB, valores HEX, valores HSL e valores RGBA </p>
<h2>Valores em HSL:</h2>
<p>O modelo HSL (Tonalidade, Saturação e Luz, em inglês), baseado no trabalho do pintor Albert H. Munsell, criador do Munsell Atlas, é um modelo de representação das cores considerado natural, já que se aproxima bastante da percepção fisiológica da cor pelo olho humano.</p>
<p>O modelo HSL consiste em decompor a cor de acordo com critérios fisiológicos: tonalidade, que corresponde à percepção da cor, saturação, que descreve a pureza da cor, ou seja, seu caráter brilhante ou fosco, e brilho, que indica a quantidade de luz da cor, ou seja, o seu aspecto claro ou sombrio.</p>
<h3 style="background-color: hsl(0, 100%, 50%); color: hsl(0, 0%, 100%);">hsl - Vermelho</h3>
<h3 style="background-color: hsla(240, 100%, 50%, 0.5);">hsl - Azul</h3>
<h3 style="background-color: hsl(60, 100%, 50%);">hsl - Amarelo</h3>
<h2> Cores em RGB</h2>
<p>Na formação de cores por luz, as cores são formadas a partir de três cores primarias. As três cores primárias mais conhecidas são: Vermelho, Verde e Azul, ou RGB (do inglês, Red-Green-Blue). A partir delas pode-se criar as demais cores.</p>
<p>As cores são criadas na computação com a combinação de valores de RGB. Cada uma dessas cores primárias recebe um valor de intensidade que varia de 0 a 255.</p>
<h3 style="background-color: rgb(255, 0, 0);">rgb - Vermelho</h3>
<h3 style="background-color: rgb(0, 0, 255);">rgb - Azul</h3>
<h3 style="background-color: rgba(255, 255, 0, 0.5);">rgb - Amarelo</h3>
<h2>Cores Hexadecimal</h2>
<p style="font-size: 18pt;">Podemos perceber que os códigos RGB são sempre formados com 6 dígitos, o que dá 2 dígitos para cada cor.</p>
<p>Se em 2 dígitos hexadecimais conseguimos valores de 00 a FF, então conseguimos representar valores de 0 a 255 da base decimal</p>
<p>se o branco é formado com a combinação dos maiores valores para RGB (255 para Red, 255 para Green e 255 para Blue), o código RGB do branco é: #FFFFFF.</p>
<p>Então 255 vermelho (FF), 255 verde (FF) e 255 Azul (FF). Juntando tudo com o # do início, temos o #FFFFFF. </p>
<h3 style="background-color: #000; color: #fff;">Preto</h3>
<h3 style="background-color: #787878;">Cinza</h3>
<h3 style="background-color: #fff;">Branco</h3>
<h2>Cores RGBA</h2>
<p>É o sistema de cores formado pelas cores Vermelho (Red), Verde (Green), Azul (Blue) e pelo canal Alpha. O sistema permite exibir todas as cores do sistema RGB, porém permite a utilização da transparência, artifício amplamente usado em softwares de edição de imagem com camadas.</p>
<h3 style="background-color: rgba(255, 0, 0, 0.5);">Vermelho</h3>
<h3 style="background-color: rgba(0, 255, 0, 0.35);">Verde</h3>
<h3 style="background-color: rgba(0, 0, 255, 0.45);">Azul</h3>
</body>
</html>