Colores en CSS

CSS permite definir colores para los elementos de distintas formas. Se pueden usar nombres de color, códigos HEX, valores RGB/RGBA y formatos HSL/HSLA.

Uso de nombres de color

CSS reconoce más de 140 nombres de colores predefinidos como 'red', 'blue', 'green'. Son una opción rápida y fácil de entender.

Colores HEX

Los códigos HEX representan los componentes rojo, verde y azul de un color. Su formato es #RRGGBB, donde cada componente es un número hexadecimal entre 00 y FF.

Colores RGB y RGBA

El modelo RGB define un color mediante la combinación de rojo, verde y azul. RGBA añade un canal alfa que indica transparencia.

Colores HSL y HSLA

El modelo HSL (Hue, Saturation, Lightness) define un color según tono, saturación y luminosidad. HSLA incluye además un canal alfa para la transparencia.

Ejemplos de colores

Los siguientes cuadros incluyen el nombre, código HEX y RGB de los colores.

Red

#FF0000

rgb(255, 0, 0)

Green

#00FF00

rgb(0, 255, 0)

Blue

#0000FF

rgb(0, 0, 255)

Purple

#800080

rgb(128, 0, 128)

Orange

#FFA500

rgb(255, 165, 0)

Cyan

#00FFFF

rgb(0, 255, 255)

Pink

#FFC0CB

rgb(255, 192, 203)

Yellow

#FFFF00

rgb(255, 255, 0)

Comparación de formatos de color

Los siguientes ejemplos muestran cómo lograr el mismo color en diferentes formatos.

Consejos para usar colores

La elección correcta de colores es importante para la apariencia del sitio y también para la accesibilidad.

Asegúrate siempre de que haya suficiente contraste entre el texto y el fondo.
Los colores RGBA y HSLA permiten transparencia, lo que es útil en diseños modernos.
En proyectos grandes conviene usar una paleta de colores consistente para mantener un diseño uniforme.