Uno de los primeros cambios de estilo que hacemos cuando aprendemos CSS es hacer variaciones en los colores de primer plano y de fondo de un documento HTML o de cualquiera de sus elementos o partes. Sin embargo, indicar el color específico no es una tarea fácil. Hay múltiples formas de definir un color en CSS, algunas más sencillas, otras más complejas.
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 | Valor | Significado |
|---|---|---|
color | Cambia el color del texto que está en el interior de un elemento. | |
background-color | Cambia el color de fondo de un elemento. |
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. De esta forma, podemos hacer cosas como estas:
.element {
width: 150px;
height: 150px;
background-color: indigo; /* Color de fondo */
color: white; /* Color de texto */
}
<div class="element"></div>
Sin embargo, aunque se suele hacer mucho en fases de aprendizaje, lo normal no suele ser indicar colores con palabras clave, ya que es una forma poco precisa de hacerlo, sino utilizar alguna función CSS de colores que veremos a continuación.
Las propiedades
colorybackground-colorno son las únicas en las que podemos establecer colores. A medida que avancemos, encontraremos más propiedades donde usarlos.
Formas de usar colores en CSS
Todas las propiedades CSS donde existen valores
| Esquema | Descripción | Más info |
|---|---|---|
| Espacio de color RGB | ||
red | Establece un color mediante palabras clave. | Ver palabras clave predefinidas |
rgb() | Usa una función rgb() (rojo, verde y azul). | Ver función RGB |
#rrggbb | Notación RGB abreviada en hexadecimal. Notación recomendada | Ver formato Hexadecimal |
hsl() | Usa una función hsl() (color, saturación y brillo). | Ver función HSL |
hwb() | Usa una función hwb() (color, claridad y oscuridad). | Ver función HWB |
| Espacio de color independiente del dispositivo | ||
lab() | Usa una función lab() y oklab() (luminosidad CIE, eje A y eje B). | Ver función LAB y OKLAB |
lch() | Usa una función lch() y oklch() (luminosidad CIE, saturación, color). | Ver función LCH y OKLCH |
A continuación iremos explicando cada uno de estos formatos para entender como se especifican los colores en CSS y utilizar el método que más se adapte a nuestras necesidades.
La mayoría de los editores tienen los denominados ColorPicker, que no son más que un sistema cómodo y rápido para elegir un color a base de clics por una paleta o circulo visual. También podemos hacerlo directamente en buscadores como Duck Duck Go o Google.
Consejo: Si lo que buscamos es un sistema para extraer colores (color dropper) de una página web, imagen u otra aplicación de nuestro escritorio, podemos usar tanto el Developer Tools del navegador (incorpora uno integrado en el selector de colores), como la aplicación Power Toys (Windows).
Palabras clave de color
El primer caso (el más sencillo pero también el más limitado) permite establecer el color utilizando palabras reservadas de colores, como red, blue, orange, white, navy, yellow u otras. Existen más de 140 palabras clave para indicar colores:
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 |
|---|---|
transparent | Establece un color completamente transparente (valor por defecto de background-color) |
currentColor | Establece el mismo color que se está utilizando para el texto (tanto en CSS, como en SVG) |
Veamos algunos ejemplos de palabras clave de color:
.element {
background-color: blue;
background-color: transparent;
background-color: indigo;
background-color: rebeccapurple; /* En honor a Rebeca, la hija de Eric Meyer */
}
Como hemos dicho, estas palabras clave son limitadas, por lo que si necesitamos una tonalidad muy específica puede ser insuficiente, y sería mejor utilizar uno de los códigos o funciones de color que veremos en los próximos apartados.
Colores del sistema
Además de las palabras clave predefinidas anteriores, también tenemos algunas otras palabras clave para hacer referencia a ciertos colores establecidos por el sistema operativo. Estas palabras clave son las siguientes:
| Valor | Significado |
|---|---|
canvas | Color de fondo del contenido de una aplicación o documento. |
canvastext | Color de texto de una aplicación o documento. Color de texto por defecto. |
linktext | Enlace no visitado y no activo. |
visitedtext | Enlace ya visitado. |
activetext | Enlace activo. |
buttonface | Color de fondo de un botón pulsable. |
buttontext | Color de texto de un botón pulsable. |
buttonborder | El color del borde un botón pulsable. |
field | Color de fondo de campos de texto <input>. |
fieldtext | Color de texto de campos de texto <input>. |
highlight | Color de fondo de textos seleccionados. |
highlighttext | Color de texto de textos seleccionados. |
selecteditem | Color de fondo de ítems seleccionados. |
selecteditemtext | Color de texto de ítems seleccionados. |
mark | Color de fondo de un texto especialmente marcado <mark>. |
marktext | Color de texto especialmente marcado <mark>. |
graytext | Color de texto desactivado. |
Los cuadritos anteriores se calculan a partir del sistema operativo en tu navegador. Si tienes un sistema operativo que no soporta alguna de estas palabras clave, te aparecerá con fondo rojo rayado.
Canales alfa o transparencia
En algunos casos, es muy posible que necesitemos indicar un color con cierto grado de transparencia, ya que hasta ahora solo podemos utilizar la palabra clave transparent que es una transparencia completa, del 100%. Con transparencias parciales podríamos conseguir que se aprecie el contenido que está detrás un elemento.
Sin embargo, existe la posibilidad de utilizar los denominados canales alfa, que permiten establecer un porcentaje de transparencia parcial sobre un color. Estos se pueden establecer en los diferentes formatos y funciones de la tabla anterior (salvo en los colores con palabras clave).
Además, también existe la propiedad opacity, mediante la cuál podemos hacer que un elemento y su contenido o elementos hijos tengan una transparencia parcial o completa. La veremos más adelante.
