CORES CSS
As cores css pode ser pelos nomes ou valores RGB, HEX,
HSL, RGBA ou HSLA.
CORES PELOS NOMES.
Backgrond- para colocar cor no fundo.
Color- para colocar cor no texto.
Border- para colocar cor na borda.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:ORANGE;">Título
grande 1</h1>
<p style="color:Tomato;">
Primeiro parágrafo.
</p>
<h2 style="border: 2px solid Violet;">Título
menor 2 </h2>
</body>
</html>
OBS: Nomes das cores tem que está em inglês.
CSS – CORES RGB E RGBA.
VALORES DE CORES RGB.
rgb ( vermelho, verde , azul )
<h1 style="background-color:rgb(255, 201,
20);">rgb(255, 201, 20)</h1>
<h1 style="background-color:rgb(220, 0,
255);">rgb(220, 0, 255)</h1>
<p style="color:rgb(220, 110, 20);"> Você
tem cor </p>
</body>
</html>
APARTIR DAS TRÊS CORES DÁ PARA FAZER COMBINAÇÕES DOS CORES.
RGB 255, 0, 0 = VERMELHO
RGB 0, 255,0 = VERDE
RGB 0, 0, 255 = AZUL
rgb(255, 0,
0)
rgb(0, 0,
255)
rgb(60, 179, 113)
rgb(238, 130,
238)
rgb(255, 165,
0)
rgb(106, 90, 205)
TON DE CINZA SÃO VALORES IGUAIS
rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)
VALORES DE CORES RGBA
rgba( vermelho, verde , azul,
alfa )
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 200, 200,
0.5);">rgba(255, 99, 71, 0)</h1>
<p style="color:rgba(255, 0, 0, 10);">cor
texto </p>
</body>
</html>
APARTIR DAS TRÊS CORES MAIS ALFA DÁ PARA FAZER COMBINAÇÕES
DOS CORES.
RGB 255, 0, 0 = VERMELHO
RGB 0, 255,0 = VERDE
RGB 0, 0, 255 = AZUL
ALFA 0,0 TRANSPARENTE
1,0 CORES MAIS FORTE.
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
VALORES DE CORES HEX.
Uma cor hexadecimal é: #RRGGBB, onde os inteiros hexadecimais
RR (vermelho), GG (verde) e BB (azul)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">cor
fundo vermelho</h1>
<p style="color:#000ff;"> cor do texto azul
</p>
</body>
</html>
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
TON DE CINZA SÃO VALRES IGUAIS.
#404040
#686868
#a0a0a0
#bebebe
#dcdcdc
#f8f8f8
HTML5 - CORES HSL HSLA
VALORES DE CORES HSL
hsl ( matiz , saturação , luminosidade )
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%,
50%);">COR DO FUNDO VERMELHO</h1>
<p style="color:hsl(240, 100%, 50%);"> cor
do texto zul </p>
</body>
</html>
hsl(0, 100%,
50%)
hsl(240,
100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
SATURAÇÃO
É A INTENSIDADE DE UMA COR.
100% COR PURA, NÃO APARECE TON CINZA.
50% COR CINZA, E DÁ PARA VER COR.
0% COMPLETAMENTE COR CINZA, MAS NÃO DÁ PARA VER.
hsl(0, 100%,
50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%,
50%)
LEVEZA
É A CLARIDADE DE UMA COR.
0% NÃO TEM LUZ (PRETO).
50% LUZ NEM ESCURO E NEM CLARO.
100% LUZ TOTAL (BRANCO).
hsl(0, 100%,
0%)
hsl(0, 100%,
25%)
hsl(0, 100%,
50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0,
100%, 100%)
OS TONS DE CINZA DEFINIDOS POR MATIZ EA SATURAÇÃO.
hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)
VALORES DAS CORES
HSLA
hsla(matiz, saturação , luminosidade,
alfa )
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsla(9,
100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<p style="color:hsla(9,100%,64%,1);">
cor do texto </p>
</body>
</html>
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)