Colores de CSS

Se especifica un color utilizando nombres de color predefinidos, o valores RGB, HEX, HSL, RGBA, HSLA.

Nombres de color de CSS

En CSS, se puede especificar un color utilizando nombres de color:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Prueba por ti mismo

Soportado por CSS/HTML 140 nombres de colores estándar.

Color de fondo CSS

Puede configurar el color de fondo del elemento HTML:

¡Bienvenido a China!
China es un gran país!

Ejemplo

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China es un gran país!</p>

Prueba por ti mismo

Color de texto CSS

Puede configurar el color del texto:

China

China es un gran país!

China, oficialmente la República Popular China, es un país en el Este de Asia.

Ejemplo

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China es un gran país!</p>
<p style="color:MediumSeaGreen;">China, oficialmente la República Popular China...</p>

Prueba por ti mismo

Color de borde de CSS

Puede configurar el color del borde:

¡Hola Mundo!
¡Hola Mundo!
¡Hola Mundo!

Ejemplo

<h1 style="border:2px solid Tomato;">¡Hola Mundo!</h1>
<h1 style="border:2px solid DodgerBlue;">¡Hola Mundo!</h1>
<h1 style="border:2px solid Violet;">¡Hola Mundo!</h1>

Prueba por ti mismo

Valores de color CSS

En CSS, también se puede usar valores RGB, HEX, HSL, RGBA o HSLA para especificar colores:

Equivalente al nombre de color "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Equivalente al nombre de color "Tomato", pero con transparencia del 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>Ejemplo</h3> 
<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>

Prueba por ti mismo

Conoce más sobre los valores de color

En el siguiente capítulo, aprenderás sobre RGB、HEX y HSL para obtener más información.