Skip to content
Gallery
CSS
Selectores, propiedades y valores
Mecanismos para añadir CSS a un archivo HTML
Selectores
Pseudoclases y pseudoelementos
Cascada y especificidad
Herencia
Display
Modelo de cajas
Posicionamiento
Medidas
Colores
Z-index y el contexto de apilamiento
Responsive Design
Arquitectura CSS
Flexbox
Share
Explore

icon picker
Colores

⁠
Propiedades de color 
⁠
⁠

Primero vamos a ver las propiedades CSS que podemos utilizar para cambiar el color de texto y el color de fondo de un elemento HTML:
Propiedad
Significado
1
color
Cambia el color del texto que está en el interior de un elemento.
2
background-color
Cambia el color de fondo de un elemento.
There are no rows in this table
⁠
Como podemos ver en la tabla anterior, la propiedad color establece el color del texto, mientras que la propiedad background-color establece el color de fondo del elemento.

⁠
Formas de indicar un color 
⁠
⁠

Todas las propiedades CSS donde existen valores , establecen la posibilidad de indicar varias formas alternativas (con algunos derivados) para especificar el color deseado:
Esquema
Nombre
Descripción
1
red
Palabra clave predefinida
Establece un color mediante una palabra clave predefinida.
2
rgb()
Función RGB
Utiliza una función rgb() (rojo, verde, azul).
3
rgba()
Función RGB con canal alfa
Función rgb() o rgba() con un canal alfa (transparencia) añadido.
4
#rrggbb
Código RGB hexadecimal
Notación RGB abreviada en hexadecimal.
5
#rgb
Código RGB hexadecimal con canal alfa
Notación RGB abreviada en hexadecimal con un canal alfa añadido.
6
hsl()
Función HSL
Función hsl() (matiz de color, saturación y brillo).
7
hsla()
Función HSL con canal alfa
Función hsl() o hsla() con un canal alfa añadido.
There are no rows in this table
⁠

Además, existen algunos valores especiales que puedes utilizar cuando quieras especificar un color, como colores transparentes o el color actual del texto, muy útil para SVG, por ejemplo:
Valor
Significado
1
transparent
Establece un color completamente transparente (valor por defecto de background-color)
2
currentColor
Establece el mismo color que se está utilizando para el texto (tanto en CSS, como en SVG)
There are no rows in this table
⁠

info

⁠
Tabla de colores
⁠
⁠


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.