Colores HEX

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 26 de 76.

Los colores hexadecimales son una forma de especificar colores utilizando valores hexadecimales. Un código de color hexadecimal es un código de seis dígitos precedido por un símbolo de almohadilla (#) que representa la cantidad de luz roja, verde y azul que compone un color.

Cada par de dígitos en el código representa la intensidad de uno de estos colores primarios, que va desde 00 (sin intensidad) hasta FF (intensidad total). Los colores hexadecimales ofrecen una amplia gama de opciones de color y se utilizan ampliamente en el diseño web.

Aquí tienes la sintaxis básica para usar colores hexadecimales en CSS:

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

Por ejemplo:

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

También puedes usar la notación abreviada para colores hexadecimales cuando ambos dígitos de cada par son iguales. Por ejemplo:

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

Desafío

Fácil

Se te proporciona un documento HTML con dos encabezados (<h1> y <h2>) y un párrafo (<p>). Tu tarea es utilizar códigos de color hexadecimales para los colores de fondo. Sigue los pasos a continuación:

Escribe una regla CSS para el elemento <h1>. Establece el color de fondo a púrpura eléctrico usando el color hexadecimal #BF00FF.
Escribe una regla CSS para el elemento <h2>. Establece el color de fondo a verde neón usando #39FF14.
Escribe una regla CSS para todos los elementos <p>. Establece el color de fondo a gris claro usando #D3D3D3.

Hoja de referencia

Los colores hexadecimales utilizan un código hexadecimal de seis dígitos precedido por un símbolo de almohadilla (#) para especificar colores. Cada par de dígitos representa la intensidad de la luz roja, verde y azul, que va desde 00 (sin intensidad) hasta FF (intensidad total).

Sintaxis básica:

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

Ejemplo:

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

Se puede utilizar la notación abreviada cuando ambos dígitos de cada par son iguales:

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

Pruébalo tú mismo

<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>