Existem diversas maneiras de você definir cores em CSS, mas 3 delas são as mais comuns e você vai ver em praticamente todo codigo CSS.
1 – Explicita ou palavra-chave
é onde você coloca diretamente o nome da cor como nos exemplos a seguir, a grande desvantagem desse formato é que existe uma variaçào limitada de cores e muitas vezes awquele tom de azul que você precisa não existe nesse formato.
background-color: black;
color: darkblue;
border-color: lightpink;
2 – Hexadecimal
o hexadecimal resolve o problema de cores, nele podemos fazer mais de 16milhões de combinações de cores diferentes utilizando o padrão RGB, onde o R = Red, G = Green e B = Blue. esses 3 valores vao de 0 a 255, porem em hexadecimal que é representado pelo sistema numerico de 16, onde vai do 0
ao 9
+ do A
ao F
onde A=10
, B=11
, e F=15
, ta roger, mas você não falou que era 16
? sim, mas lembre-se que começamos no 0
, então vai do 0 ao 15
.
como construir uma cor em Hexadecimal?
elá é composta por 7 digitos (pode ser abreviado, mas vamos por esse caminho agora que vai ser mais simples entender).
Exemplo: #00A2FF
#
representa que a cor será hexadecimal 00
primeiros dois digitos representam o vermelho(RED), nesse caso, esta cor tem 0 de vermelho A2
terceiro e quarto digito representam o verde(GREEN), nesse caso, A2 são 162 de verde FF
os doi ultimos digitos representam o azul(BLUE), nesse caso, FF são 255 de azul
misturando 0 de vermelho, 162 de verde e 255 de azul vai dar esse um tom de azul bem bonito.
pode ser meio complicado utilizar a cor em hexadecimal, mas depois que você entende bem ele você vai ver que é tranquilo, alem disso existem diversas feramentas para você escolher a cor e ele gerar o hexadecimal, o proprio vscode faz isso.
3 – função RGB
Como ja vimos anterirmente nas funcões em CSS, podemos utilizar a função RGB que é mais facil de você entender o valor e dosar a quantidade de cada cor você vai adicionar na tua mistura de vermelho, verde e azul.
rgb(0,0,0)
rgb(255,255,255)
rgb(0,255,128)
ela funciona da mesma forma do hexadecimal a unica diferença é que dessa vez você utiliza numeros decimais.
existe também a funcão RGBA que é representada pelo RGB + o alpha ou transparencia, nesse caso os 3 primeiros parametros vao de 0 a 255 para montar o RGB e o quarto parâmetro vai de 0.0 até 1.0 para definir a transparência, onde 0 é totalmente transparente e 1 é totalmente preenchido.
rgba(0,0,0,.3)
rgba(255,255,255,0.45)
rgba(0,255,128,.80)
Exercício 1: Cores Hexadecimais
Crie um arquivo HTML e CSS para definir as cores usando o formato hexadecimal. Use uma estrutura de tabela simples com três células e defina o fundo de cada célula com uma cor hexadecimal diferente.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<table>
<tr>
<td class="color-cell" id="red-cell"></td>
<td class="color-cell" id="green-cell"></td>
<td class="color-cell" id="blue-cell"></td>
</tr>
</table>
</body>
</html>
Exercício 2: Paleta de Cores Hexadecimais
Crie uma página com uma caixa de entrada de texto e um botão “Aplicar”. Quando o usuário passar o cursor do mouse sobre o botão, o mesmo precisa mudar de cor. Para criar esse efeito, utilize a pseudo-classe:
CSS:
button:hover {
background-color: #0056b3; /* Muda a cor de fundo do botão quando o usuário passa o mouse sobre ele */
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<input type="text" id="color-input" placeholder="Digite uma cor hexadecimal">
<button id="apply-button">Aplicar</button>
</body>
</html>