HTML Colores
Los colores HTML se especifican con nombres de colores predefinidos o con valores RGB, HEX, HSL, RGBA o HSLA.
Nombres de colores
En HTML, se puede especificar un color utilizando un nombre de color:
HTML admite 140 nombres de colores estándar.
Color de fondo
Puedes establecer el color de fondo de los elementos HTML:
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>
Inténtalo tú mismo »
Color del texto
Puedes configurar el color del texto:
Hello World
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>
Inténtalo tú mismo »
Color del borde
Puedes establecer el color de los bordes:
Hello World
Hello World
Hello World
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>
Inténtalo tú mismo »
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 configurado con valores RGB, HEX y HSL:
Los siguientes dos elementos <div> tienen su color de fondo configurado con valores RGBA y HSLA, lo que agrega un canal Alfa al color (aquí tenemos un 50% de transparencia):
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>
Inténtalo tú mismo »
Más información sobre los valores de color
Aprenderá más sobre RGB, HEX y HSL en los próximos capítulos.
