Colores HTML

Los colores HTML se especifican con nombres de color predefinidos o con valores RGB, HEX, HSL, RGBA o HSLA.

Nombres de color

En HTML, se puede especificar un color mediante un nombre de color:

HTML admite 140 nombres de color estándar.

---

Color de fondo

Puede establecer el color de fondo para los elementos HTML:

Hola mundo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ejemplo

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

---

Color del texto

Puede establecer el color del texto:

Hola mundo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ejemplo

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

---

---

Color del borde

Puede establecer el color de los bordes:

Hola mundo

Hola mundo

Hola mundo

Ejemplo

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

---

Valores de color

En HTML, los colores también se pueden especificar utilizando valores RGB, valores HEX, valores HSL, valores RGBA y valores HSLA.

Los siguientes tres elementos <div> tienen su color de fondo establecido con valores RGB, HEX y HSL:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Los siguientes dos elementos <div> tienen su color de fondo establecido con valores RGBA y HSLA, lo que agrega un canal Alpha al color (aquí tenemos un 50% de transparencia):

rgba(255, 99, 71, 0,5)

hsla(9, 100%, 64%, 0.5)

Ejemplo

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Más información sobre los valores de color

Aprenderá más sobre RGB, HEX y HSL en los próximos capítulos.

❮ AnteriorSiguiente ❯