12- 🎨 Colores en HTML: guía práctica

---

• Nombre de colores
• Color de fondo
• Color de texto
• Color del borde
• Valores del color
• Resume

---

Nombre de colores

En HTML, un color se puede especificar usando un nombre de color. Existen 140 nombres de color estándar que HTML soporta, tales como Naranja, Verde, Amarillo, Rojo, etc.

Estos nombres son fáciles de recordar y usar, proporcionando una forma rápida de aplicar colores sin necesidad de codificar valores hexadecimales o RGB.

Ejemplo

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Código del ejemplo

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

---

Color de fondo

El color de fondo en HTML se puede especificar utilizando la propiedad CSS `background-color`. Puedes utilizar valores de nombre de color,

• valores hexadecimales, RGB, RGBA, HSL, o HSLA

para definir el color de fondo de un elemento.

Esta propiedad permite personalizar la apariencia de las secciones de la página web, proporcionando contraste y mejora visual en el diseño.

Ejemplo

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula purus nec risus ultrices, in facilisis nunc fringilla.

Código del ejemplo

<h1 style="background-color:DodgerBlue; color:white; padding:10px;">Hello World</h1>
<p style="background-color:Tomato; color:white; padding:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula purus nec risus ultrices, in facilisis nunc fringilla.</p>

---

Color de texto

Para cambiar el color del texto en HTML, se utiliza la propiedad CSS `color`. Al igual que con el color de fondo, puedes usar nombres de colores, valores hexadecimales, RGB, RGBA, HSL, o HSLA para definir el color del texto.

Esta propiedad es fundamental para asegurar que el contenido de la página sea legible y estéticamente agradable, permitiendo ajustes precisos al color del texto.

Ejemplo

Hola Mundo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula purus nec risus ultrices, in facilisis nunc fringilla.

Código del ejemplo

<h1 style="color:DodgerBlue;">Hola Mundo</h1>
<p style="color:Tomato;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula purus nec risus ultrices, in facilisis nunc fringilla.</p>

---

Color del borde

La propiedad CSS `border-color` se utiliza para especificar el color del borde de un elemento. Puedes usar nombres de colores, valores hexadecimales, RGB, RGBA, HSL, o HSLA para definir el color del borde.

Este estilo permite resaltar y delimitar elementos en la página, mejorando la estructura visual y la claridad del diseño.

Ejemplo

Borde color DodgerBlue

Borde color Tomato

Borde color MediumSeaGreen

Borde color Orange

Código del ejemplo

<div style="border: 4px solid DodgerBlue; padding: 10px; margin-bottom: 10px;">
    <p>Borde color DodgerBlue</p>
</div>
<div style="border: 4px solid Tomato; padding: 10px; margin-bottom: 10px;">
    <p>Borde color Tomato</p>
</div>
<div style="border: 4px solid MediumSeaGreen; padding: 10px; margin-bottom: 10px;">
    <p>Borde color MediumSeaGreen</p>
</div>
<div style="border: 4px solid Orange; padding: 10px;">
    <p>Borde color Orange</p>
</div>

---

Valores del color

En CSS, los colores pueden ser especificados en varios formatos, incluyendo nombres de color,

• hexadecimales (como #FF5733),
• valores RGB (como rgb(255, 87, 51)),
• valores RGBA (para colores con transparencia), valores HSL (como hsl(9, 100%, 60%)),
• y valores HSLA (para colores con transparencia).

Cada formato tiene sus propias ventajas y puede ser utilizado dependiendo de las necesidades específicas de diseño y compatibilidad.

Ejemplo

Color en formato hexadecimal (#FF5733)

Color en formato RGB (rgb(255, 87, 51))

Color en formato RGBA (rgba(255, 87, 51, 0.5))

Color en formato HSL (hsl(9, 100%, 60%))

Color en formato HSLA (hsla(9, 100%, 60%, 0.5))

Código del ejemplo

<div style="background-color: #FF5733; padding: 10px; margin-bottom: 10px;">
    <p>Color en formato hexadecimal (#FF5733)</p>
</div>
<div style="background-color: rgb(255, 87, 51); padding: 10px; margin-bottom: 10px;">
    <p>Color en formato RGB (rgb(255, 87, 51))</p>
</div>
<div style="background-color: rgba(255, 87, 51, 0.5); padding: 10px; margin-bottom: 10px;">
    <p>Color en formato RGBA (rgba(255, 87, 51, 0.5))</p>
</div>
<div style="background-color: hsl(9, 100%, 60%); padding: 10px; margin-bottom: 10px;">
    <p>Color en formato HSL (hsl(9, 100%, 60%))</p>
</div>
<div style="background-color: hsla(9, 100%, 60%, 0.5); padding: 10px;">
    <p>Color en formato HSLA (hsla(9, 100%, 60%, 0.5))</p>
</div>

---

Resume

En resumen, HTML y CSS ofrecen diversas formas de especificar y aplicar colores en una página web. Desde nombres de colores sencillos hasta valores hexadecimales y RGB complejos, hay muchas opciones para lograr el diseño deseado.

Entender estas propiedades y formatos te permitirá tener un control más preciso sobre la apariencia de tu contenido web, asegurando que se ajuste a tu visión de diseño.

Ir al índice