Definindo cores (Hexadecimal)

Roger.Santos 03/01/2023

Módulo Progresso

0% Concluído

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 */
}