Códigos de colores

Establecer colores de texto y de fondo


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 color y background-color no 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 , establecen la posibilidad de indicar varias formas alternativas (con algunos derivados) para especificar el color deseado:

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.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev