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 mediante 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, green y azul que compone un color.

Cada par de dígitos del código representa la intensidad de uno de estos colores primarios, que va de 00 (sin intensidad) a FF (intensidad máxima). Los colores HEX ofrecen una amplia variedad de opciones de color y se utilizan ampliamente en el diseño web.

Esta es la sintaxis básica para usar colores hexadecimales en CSS:

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

Por ejemplo:

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

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

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #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 usar 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 en electric purple usando el color hexadecimal #BF00FF.
Escribe una regla CSS para el elemento <h2>. Establece el color de fondo en neon green usando #39FF14.
Escribe una regla CSS para todos los elementos <p>. Establece el color de fondo en light gray usando #D3D3D3.

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>