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.
