Cores HEX

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 26 de 76.

Cores hexadecimais são uma forma de especificar cores usando valores hexadecimais. Um código de cor hexadecimal é um código de seis dígitos precedido por um símbolo de cerquilha (#) que representa a quantidade de luz vermelha, verde e azul que compõe uma cor.

Cada par de dígitos no código representa a intensidade de uma dessas cores primárias, variando de 00 (sem intensidade) a FF (intensidade total). Cores hexadecimais oferecem uma ampla gama de opções de cores e são amplamente utilizadas em web design.

Aqui está a sintaxe básica para usar cores hexadecimais em CSS:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Por exemplo:

p {
    color: #FF0000; /* Vermelho */
    background-color: #00FF00; /* Verde */
}

Você também pode usar a notação abreviada para cores hexadecimais quando ambos os dígitos em cada par forem iguais. Por exemplo:

p {
    color: #F00; /* Vermelho (equivalente a #FF0000) */
    background-color: #0F0; /* Verde (equivalente a #00FF00) */
}

Desafio

Fácil

Você recebeu um documento HTML com dois cabeçalhos (<h1> e <h2>) e um parágrafo (<p>). Sua tarefa é usar códigos de cores hexadecimais para cores de fundo. Siga as etapas abaixo:

Escreva uma regra CSS para o elemento <h1>. Defina a cor de fundo para roxo elétrico usando a cor hex #BF00FF.
Escreva uma regra CSS para o elemento <h2>. Defina a cor de fundo para verde neon usando #39FF14.
Escreva uma regra CSS para todos os elementos <p>. Defina a cor de fundo para cinza claro usando #D3D3D3.

Folha de consulta

Cores hexadecimais usam um código hexadecimal de seis dígitos precedido por um símbolo de cerquilha (#) para especificar cores. Cada par de dígitos representa a intensidade da luz vermelha, verde e azul, variando de 00 (sem intensidade) a FF (intensidade total).

Sintaxe básica:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Exemplo:

p {
    color: #FF0000; /* Vermelho */
    background-color: #00FF00; /* Verde */
}

A notação abreviada pode ser usada quando ambos os dígitos em cada par são iguais:

p {
    color: #F00; /* Vermelho (equivalente a #FF0000) */
    background-color: #0F0; /* Verde (equivalente a #00FF00) */
}

Experimente você mesmo

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>