Podemos usar cores em CSS por meio de diversos formatos.
Vou criar um arquivo cores.html e adicionar alguns títulos a ele para exemplificar o que queremos ver:
<!DOCTYPE html>
< html>
< head>
< meta charset = " UTF-8" >
< title> Cores</ title>
< style>
.ex-1 {
}
.ex-2 {
}
.ex-3 {
}
.ex-4 {
}
.ex-5 {
}
</ style>
</ head>
< body>
< h1 class = " ex-1" > Exemplo 1</ h1>
< h1 class = " ex-2" > Exemplo 2</ h1>
< h1 class = " ex-3" > Exemplo 3</ h1>
< h1 class = " ex-4" > Exemplo 4</ h1>
< h1 class = " ex-5" > Exemplo 5</ h1>
</ body>
</ html>
Que vai nos render esta página:
Uma das primeiras formas de usar cores em CSS é usando os próprios nomes das cores:
< style>
.ex-1 {
color : aquamarine;
}
.ex-2 {
color : chocolate;
}
.ex-3 {
color : gray;
}
.ex-4 {
color : darkviolet;
}
.ex-5 {
color : forestgreen;
}
</ style>
Que vai mudar as cores do texto de acordo com as cores digitadas:
Mas como saber esses nomes estranhos? Como saber que "chocolate" é uma cor, por exemplo? O editor de texto ou a IDE pode nos ajudar sugerindo essas cores. Abaixo, um exemplo usando o editor VSCode:
No entanto, essa forma não é a mais usual de usar cores em CSS. Uma das mais usadas é o formato rgb, no qual cada letra da sigla significa "red", "green" e "blue". Usando o formato rgb, você deve usar a sigla seguida de parênteses com 3 valores numéricos em sequência de 0 a 255, que significa a intensidade de cada cor.
Ou seja, um rgb(0, 0, 0) vai ter 0 de intensidade das 3 cores, então a cor resultante será a cor preta. Já um rgb de (255, 255, 255) vai ter a intensidade máxima das 3 cores, e a cor resultante vai ser branca.
Já usando 255 como valor de uma cor e as outras como 0, teremos as cores puras vermelho, verde ou azul:
Notem que o editor de texto já mostra uma prévia da cor, e que ao mudar somente um dos 3 valores eu obtenho as cores puras.
Então nesse formato, quanto mais próximo do 255, mais perto do vermelho, ou do verde, ou do azul eu vou estar, e a cor resultante vai ser a mistura dessa combinação:
< style>
.ex-1 {
color : rgb ( 0, 0, 255) ;
}
.ex-2 {
color : rgb ( 120, 0, 255) ;
}
.ex-3 {
color : rgb ( 255, 120, 0) ;
}
.ex-4 {
color : rgb ( 65, 180, 225) ;
}
.ex-5 {
color : rgb ( 180, 75, 180) ;
}
</ style>
Resultado:
Tem outra forma de representar cores, esta mais usada do que as outras duas, que é por meio do formato hexadecimal. É um rgb feito de outra forma. A representação é por meio de um número hexadecimal, no formato #00000, no qual cada número varia de 0 a f, obedecendo o formato hexadecimal.
Uma cor #000000 equivale a um rgb(0, 0, 0), ou seja, cor preta, e um #ffffff equivale a um rgb(255, 255, 255), ou seja, branco:
Notem que eu posso abreviar #000000 para somente #000, ou #ffffff para #fff, que o CSS vai entender que eu quero que o número do lado de cada um seja igual ao seu antecessor.
A lógica aqui é igual ao rgb, números mais próximos de f vão se aproximar mais do vermelho, do verde ou do azul, e mais próximos de 0 vão diminuir a intensidade dessas cores:
< style>
.ex-1 {
color : #f4f4f4;
}
.ex-2 {
color : #83f8c4;
}
.ex-3 {
color : #75b401;
}
.ex-4 {
color : #ff0000;
}
.ex-5 {
color : #0055ee;
}
</ style>
Mas a gente vai escolher esses valores de cabeça? Claro que não. Tem sites diversos que nos ajudam a escolher essas cores, tal como o
Color Hex Color Codes Se clicarmos em alguma dessas cores, o site inclusive nos disponibiliza algumas variações e outras informações dessas cores, tais como o formato RGB, o HSL (que não vou tratar aqui mas é outro formato de cores), etc:
O próprio google tem uma paleta de cores ao buscar por "hexadecimal color picker":
Então você não vai precisar pensar numa cor de cabeça, essas ferramentas ajudam bastante.