Colores HEX

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 26 de 76.

Los colores HEX 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, verde 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 completa). Los colores hexadecimales 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 sean 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 púrpura eléctrico usando el color hexadecimal #BF00FF.
Escribe una regla CSS para el elemento <h2>. Establece el color de fondo en verde neón usando #39FF14.
Escribe una regla CSS para todos los elementos <p>. Establece el color de fondo en gris claro 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>