14-Colores Hexadecimales en html

Jorge Catalao septiembre 16, 2024

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

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


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


...

Sosgues de Gray

El término Sosgues de Gray 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


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


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


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


Sosgues de Gray en HSL

Los sosgues de Gray 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%)


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


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



Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias