Cor do CSS

As cores são especificadas usando nomes de cores pré-definidos, ou valores RGB, HEX, HSL, RGBA, HSLA.

Nomes de cores do CSS

No CSS, você pode usar nomes de cores para especificar cores:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Experimente pessoalmente

Suporte CSS/HTML 140 nomes de cores padrão.

Cor de fundo do CSS

Você pode definir a cor de fundo do elemento HTML:

Bem-vindo à China
China é um grande país!

Exemplo

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China é um grande país!</p>

Experimente pessoalmente

Cor de texto do CSS

Você pode definir a cor do texto:

China

China é um grande país!

China, oficialmente a República Popular da China, é um país na Ásia Oriental.

Exemplo

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China é um grande país!</p>
<p style="color:MediumSeaGreen;">China, oficialmente a República Popular da China...</p>

Experimente pessoalmente

Cor da borda do CSS

Você pode definir a cor da borda:

Olá Mundo
Olá Mundo
Olá Mundo

Exemplo

<h1 style="border:2px solid Tomato;">Olá Mundo</h1>
<h1 style="border:2px solid DodgerBlue;">Olá Mundo</h1>
<h1 style="border:2px solid Violet;">Olá Mundo</h1>

Experimente pessoalmente

Valor de cor CSS

No CSS, você também pode usar valores RGB, HEX, HSL, RGBA ou HSLA para especificar cores:

É equivalente à cor "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

É equivalente à cor "Tomato", mas com 50% de transparência:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>Exemplo</h3> 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Experimente pessoalmente

Conheça mais sobre valores de cor

No próximo capítulo, você aprenderá sobre RGB、HEX e HSL para obter mais conhecimento.