Colores CSS

Tabla de contenido

    Mostrar tabla de contenidos

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

Nombres de colores CSS

En CSS, se puede especificar un color utilizando un nombre de color predefinido:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

CSS/HTML admite 140 nombres de colores estándar.

Color de fondo CSS

Puede establecer el color de fondo para los elementos HTML:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
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.
</p>

</body>
</html>

Color del texto CSS

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Color del borde CSS

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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Valores de color CSS

En CSS, los colores también se pueden especificar usando valores RGB, valores HEX, HSL valores, valores RGBA y valores HSLA:

Igual que el nombre del color "Tomate":

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

Igual que el nombre del color "Tomate", pero 50% transparente:

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>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

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

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

Más información sobre los valores de color

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