14- 🎨 Colores hexadecimales en HTML

---

Un color hexadecimal es una forma de representar los colores utilizando una combinación de números y letras basados en el sistema hexadecimal (base 16). Este sistema es comúnmente usado en la web para especificar colores en HTML, CSS, y otros lenguajes de diseño.

La representación hexadecimal de un color comienza con un símbolo # seguido de seis caracteres, que son combinaciones de números (del 0 al 9) y letras (de la A a la F). Estos caracteres se agrupan en pares para representar los valores de los colores primarios Rojo (Red), Verde (Green) y Azul (Blue), también conocido como el modelo de color RGB.

Cada par de caracteres tiene un valor que puede variar de 00 a FF, donde 00 es el valor más bajo (sin presencia de ese color) y FF es el valor más alto (máxima intensidad de ese color).

---

• Valores de color HEX
• Tonos de Gris
• Valores de color HSL
• Ligereza
• Tonos de Gris en HSL
• Valores de color HSLA

---

#000000

Rojo: 00

Verde: 00

Azul: 00

--- ## Valores de color HEX

Los valores de color HEX son una forma de representar colores en HTML y CSS mediante un código hexadecimal. Cada valor HEX consta de un símbolo "#" seguido de seis caracteres, que están formados por combinaciones de números del 0 al 9 y letras de la A a la F. Estos seis caracteres se dividen en tres pares que representan los componentes de color rojo, verde y azul (RGB), respectivamente. Cada componente puede tener un valor entre 00 y FF, que determina la intensidad del color en ese canal específico.

Ejemplo

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

Código del ejemplo

<div class="bg-primary p-3 border rounded mt-3">
    <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
    <div class="bg-white p-3">
        <h1 style="background-color:#ff0000; color: white;">#ff0000</h1>
        <h1 style="background-color:#0000ff; color: white;">#0000ff</h1>
        <h1 style="background-color:#3cb371; color: white;">#3cb371</h1>
        <h1 style="background-color:#ee82ee; color: black;">#ee82ee</h1>
        <h1 style="background-color:#ffa500; color: black;">#ffa500</h1>
        <h1 style="background-color:#6a5acd; color: white;">#6a5acd</h1>
    </div>
</div>
                

---

--- ## Tonos de Gris

El término **Tonos de Gris** se refiere a una escala de tonos neutros que van desde el negro hasta el blanco. En este contexto, los colores son generados utilizando valores iguales para los tres componentes de color (rojo, verde y azul) en el modelo de color RGB, creando diferentes grados de gris. Los tonos de gris no tienen matiz, y su única variación es la cantidad de luz o intensidad que contienen.

Ejemplo

#000000

#444444

#888888

#cccccc

#ffffff

Código del ejemplo

<div class="bg-primary p-3 border rounded mt-3">
    <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
    <div class="bg-white p-3">
        <h1 style="background-color:#000000; color:#ffffff;">#000000</h1>
        <h1 style="background-color:#444444; color:#ffffff;">#444444</h1>
        <h1 style="background-color:#888888; color:#000000;">#888888</h1>
        <h1 style="background-color:#cccccc; color:#000000;">#cccccc</h1>
        <h1 style="background-color:#ffffff; color:#000000;">#ffffff</h1>
    </div>
</div>
                

---

--- ## Valores de color HSL

Los valores de color HSL representan colores en términos de **Tono (Hue)**, **Saturación (Saturation)** y **Luminosidad (Lightness)**. El Tono define el tipo de color (como rojo o azul) y se mide en grados de un círculo de color. La Saturación mide la intensidad o pureza del color, mientras que la Luminosidad indica qué tan claro u oscuro es el color, basándose en la cantidad de luz presente.

Ejemplo

hsl(0, 100%, 50%)

hsl(120, 100%, 50%)

hsl(240, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 25%)

Código del ejemplo

<div class="bg-primary p-3 border rounded mt-3">
    <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
    <div class="bg-white p-3">
        <h1 style="background-color:hsl(0, 100%, 50%); color:#ffffff;">hsl(0, 100%, 50%)</h1>
        <h1 style="background-color:hsl(120, 100%, 50%); color:#ffffff;">hsl(120, 100%, 50%)</h1>
        <h1 style="background-color:hsl(240, 100%, 50%); color:#ffffff;">hsl(240, 100%, 50%)</h1>
        <h1 style="background-color:hsl(0, 100%, 75%); color:#000000;">hsl(0, 100%, 75%)</h1>
        <h1 style="background-color:hsl(0, 100%, 25%); color:#ffffff;">hsl(0, 100%, 25%)</h1>
    </div>
</div>
                

---

--- ## Ligereza del color

La **ligereza del color (Lightness)** es un componente del modelo de color HSL que indica el nivel de brillo o oscuridad de un color. Se mide como un valor porcentual, donde el 0% representa un color completamente oscuro (negro) y el 100% representa un color completamente claro (blanco), con 50% siendo el nivel estándar para la luminosidad media del color.

Ejemplo

hsl(0, 100%, 10%)

hsl(0, 100%, 30%)

hsl(0, 100%, 50%)

hsl(0, 100%, 70%)

hsl(0, 100%, 90%)

Código del ejemplo

<div class="bg-primary p-3 border rounded mt-3">
    <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
    <div class="bg-white p-3">
        <h1 style="background-color:hsl(0, 100%, 10%); color:#ffffff;">hsl(0, 100%, 10%)</h1>
        <h1 style="background-color:hsl(0, 100%, 30%); color:#ffffff;">hsl(0, 100%, 30%)</h1>
        <h1 style="background-color:hsl(0, 100%, 50%); color:#000000;">hsl(0, 100%, 50%)</h1>
        <h1 style="background-color:hsl(0, 100%, 70%); color:#000000;">hsl(0, 100%, 70%)</h1>
        <h1 style="background-color:hsl(0, 100%, 90%); color:#000000;">hsl(0, 100%, 90%)</h1>
    </div>
</div>
                

---

--- ## Tonos de Gris en HSL

Los **Tonos de Gris en HSL** se refieren a los tonos de gris generados en el modelo de color HSL cuando la saturación (S) es del 0%, independientemente del valor de matiz (H). En este modelo, el nivel de gris está determinado por la ligereza (L), con valores bajos produciendo tonos oscuros y valores altos generando tonos claros de gris.

Ejemplo

hsl(0, 0%, 10%)

hsl(0, 0%, 30%)

hsl(0, 0%, 50%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)

Código del ejemplo

<div class="bg-primary p-3 border rounded mt-3">
<h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
<div class="bg-white p-3">
    <h1 style="background-color:hsl(0, 0%, 10%); color:#ffffff;">hsl(0, 0%, 10%)</h1>
    <h1 style="background-color:hsl(0, 0%, 30%); color:#ffffff;">hsl(0, 0%, 30%)</h1>
    <h1 style="background-color:hsl(0, 0%, 50%); color:#000000;">hsl(0, 0%, 50%)</h1>
    <h1 style="background-color:hsl(0, 0%, 70%); color:#000000;">hsl(0, 0%, 70%)</h1>
    <h1 style="background-color:hsl(0, 0%, 90%); color:#000000;">hsl(0, 0%, 90%)</h1>
</div>
</div>
                

---

--- ## Valores de color HSLA

Los **valores de color HSLA** son una extensión del modelo HSL que incluye un componente adicional llamado **alfa (A)**, el cual controla la opacidad del color. Este modelo define los colores mediante cuatro parámetros: matiz (H), saturación (S), ligereza (L) y opacidad (A), donde el alfa determina el grado de transparencia, con un valor de 0 representando completa transparencia y 1 representando opacidad total.

Ejemplo

hsla(0, 100%, 50%, 0.1)

hsla(120, 100%, 50%, 0.3)

hsla(240, 100%, 50%, 0.5)

hsla(60, 100%, 50%, 0.7)

hsla(300, 100%, 50%, 0.9)

Código del ejemplo

<div class="bg-primary p-3 border rounded mt-3">
    <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
    <div class="bg-white p-3">
        <h1 style="background-color:hsla(0, 100%, 50%, 0.1); color:#000000;">hsla(0, 100%, 50%, 0.1)</h1>
        <h1 style="background-color:hsla(120, 100%, 50%, 0.3); color:#000000;">hsla(120, 100%, 50%, 0.3)</h1>
        <h1 style="background-color:hsla(240, 100%, 50%, 0.5); color:#000000;">hsla(240, 100%, 50%, 0.5)</h1>
        <h1 style="background-color:hsla(60, 100%, 50%, 0.7); color:#000000;">hsla(60, 100%, 50%, 0.7)</h1>
        <h1 style="background-color:hsla(300, 100%, 50%, 0.9); color:#000000;">hsla(300, 100%, 50%, 0.9)</h1>
    </div>
</div>
                

---

Ir al índice