As cores HTML são especificadas com nomes de cores predefinidos ou com valores RGB, HEX, HSL, RGBA ou HSLA.

Cores RGB

Os valores de cores RGB são suportados em todos os navegadores. Um valor de cor RGB é especificado com: rgb (vermelho, verde, azul). Cada parâmetro (vermelho, verde e azul) define a intensidade da cor como um número inteiro entre 0 e 255. Por exemplo, rgb (0, 0, 255) é renderizado como azul, porque o parâmetro azul é definido com seu valor mais alto (255) e os outros são definidos como 0.

Existe outro parâmetro para cores RGB, que o A, que significa Alfa, canal Alfa. O modelo de cores passa a ser RGBA (Red, Green, Blue, Alpha). Os valores de cores RGBA são uma extensão dos valores de cores RGB com um canal alfa – que especifica a opacidade da cor.

Exemplo:

<h1 style="background-color:rgb(17,217,157);">Hello World!</h1>2.<h1 style="background-color:rgba(17,217,157,0.6);">Hello World!</h1>

Resultado

Hello World!

Hello World!

Note que a cor é a mesma, mas no segundo exemplo, tem 0.4 ou 40% de transparência.

Cores HEX (hexadecimal)

Os valores hexadecimais de cores também são suportados em todos os navegadores. Uma cor hexadecimal é especificada com: #RRGGBB. RR (vermelho), GG (verde) e BB (azul) são inteiros hexadecimais entre 00 e FF especificando a intensidade da cor. Por exemplo, #0000FF é exibido em azul, porque o componente azul é definido com seu valor mais alto (FF) e os outros são definidos como 00.

•  Para exibir o preto, defina todos os parâmetros de cor para 00, como este: # 000000.
•  Para exibir o branco, defina todos os parâmetros de cor para ff, assim: #FFFFFF.

Exemplo:

<h1 style="background-color: #000000; color:#FFFFFF;">Hello World!</h1>2.<h1 style="background-color:#0054FF; color:#FFFFFF;">Hello World!</h1>

Resultado:

Hello World!

Hello World!

Cores HSL

Os valores de cor HSL são suportados no IE9 +, Firefox, Chrome, Safari e no Opera 10+. HSL significa matiz, saturação e luminosidade. Valores de cor HSL são especificadas com: .hsl(hue, saturation, lightness)

Aqui também temos um parâmetro Alpha. ele funciona da mesma forma que o Alpha do RGBA adicionando uma camada de transparência à cor.

•  Matiz: O matiz é um grau na roda de cores de 0 a 360. 0 é vermelho, 120 é verde, 240 é azul.
•  Saturação: A saturação é um valor percentual; 0% significa um tom de cinza e 100% é a cor total.
•  Leveza: A leveza também é uma porcentagem; 0% é preto, 100% é branco.
•  Alpha: Especifica a opacidade de uma cor.

Exemplo:

<h1 style="background-color:hsl(0,100%,50%);">Hello World!</h1>2.<h1 style="background-color:hsla(0,100%,50%,0.5);">Hello World!</h1>

Hello World!

Hello World!

Nomes das cores

Em HTML, uma cor pode ser especificada usando um nome de cor. Isso mesmo, você não precisa decorar valores hexadecimais, RGB ou HSL, pode simplesmente dizer o nome da cor.

Atenção! Você não precisa decorar códigos de cores, mas precisa saber as cores em INGLÊS!!!

Pois é, são mais de 140 cores que você precisa sabem em inglês. Mais fácil que os códigos, porém não abrange todas as cores, na verdade, 140 são só a ponta do iceberg.

Veja alguns exemplos abaixo.

Cor de fundo

Como você já deve ter notado, para darmos uma cor de fundo usamos o código CSS background-color.

A sintaxe é muito simples, você adiciona um parâmetro style ao seu elemento e define o background-color usando umas das opções que vimos.

• rgb(123,123,123)
• rgba(123,123,123,0.1)
• #FF3300
• hsl(123,123,123)
• hsla(123,123,123,0.1)
• Tomato

Cor do texto

Você também pode definir cores para o texto, o padrão é o mesmo, o que vai mudar é a sintaxe. Para o texto usamos o parâmetro CSS color.

Exemplo:

<h1 style="color:Tomato;">
    Hello World!
</h1>
<h1 style="color:#FF5566;">
    Hello World!
</h1>

Cor da borda

As cores das bordas também podem ser definidas usando esse método. O parâmetro CSS usado para isso é o border.

<h1 style="border:2px solid Tomato">Hello World</h1>

• border: parâmetro usado para informar que o elemento terá uma borda. O valor da espessura da borda e é dada em pixel (px) por isso, 2px em nosso exemplo.
• solid: é o tipo de borda, nesse caso, uma borda contínua.
• Tomato: é a cor da borda que pode ser por nome ou por qualquer forma que vimos até agora.

Info! Mais informações sobre parâmetros CSS na série CSS 🙂

Exemplo

<h1 style="border:2px solid 
Tomato;">
    Hello World!
</h1>
<h1 style="border:2px solid #664477;">
    Hello World!
</h1>

Em HTML5 quase todos os elementos podem ter suas cores definidas usando essas técnicas de background-color e background-color e os esquemas de cores RGB, RGBA, HEX, HSL, HLSA e pelo nome das cores.

Agora como prometido e para o seu deleite, segue as mais de 140 cores pelo nome para você não ter o trabalho de decorar ou ficar buscando códigos… Bom proveito!!!