Códigos de color HTML – Valores HEX, RGB, RGBA, HSL y HSLA

Los códigos de color HTML definen los colores que se usan en las páginas web. Los formatos más comunes son nombres de color, HEX, RGB, RGBA, HSL y HSLA, y cada uno resulta útil en distintas tareas de estilo con HTML y CSS.

Colores HTML

Los colores HTML son los colores utilizados para mostrar páginas web. Están estrechamente vinculados a los métodos para describir y definir esos colores mediante sus respectivos códigos de color. Por ejemplo, los colores HTML se pueden especificar con nombres comunes en inglés o con valores HEX, tripletes RGB, HSL, RGBA y HSLA.

Los colores desempeñan un papel esencial en el valor percibido del contenido web y en las emociones que una persona experimenta al verlo. En HTML y XHTML, se pueden usar colores para texto, fondos, bordes de marcos, tablas y celdas individuales.

Nombres de colores HTML

Los nombres de colores HTML son familiares para cualquier persona que trabaje en desarrollo web. La especificación CSS Color define colores con nombre que pueden usarse donde se acepta un valor CSS <color>. El conjunto básico original incluía 16 nombres de colores VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. CSS moderno también incluye orange, por lo que muchas tablas básicas de colores muestran 17 nombres de color.

La figura ilustra 17 colores básicos con códigos HEX y RGB:

17 nombres básicos de colores HTML con códigos HEX y RGB

Códigos de color HTML

Los códigos de color HTML son una forma de representar un color en un formato que una computadora puede leer y mostrar. Se utilizan en HTML y CSS para crear paletas y esquemas de color en diseño web. Los usan principalmente diseñadores web, desarrolladores front-end, programadores e ilustradores digitales.

La siguiente tabla resume cuándo conviene usar cada formato común de color en HTML y CSS:

Formato de color	Ejemplo	Cuándo usarlo
Nombre de color	`teal`	Cuando necesita un valor legible para un color común y no requiere precisión exacta de un sistema de diseño.
HEX	`#008080`	Cuando necesita un valor compacto y ampliamente compatible para CSS, tokens de diseño o colores copiados de una paleta.
RGB	`rgb(0, 128, 128)`	Cuando quiere controlar directamente los canales rojo, verde y azul o igualar valores de herramientas gráficas.
RGBA	`rgba(0, 128, 128, 0.5)`	Cuando necesita el mismo control por canales que RGB más transparencia.
HSL	`hsl(180, 100%, 25%)`	Cuando quiere ajustar tono, saturación o luminosidad de una forma más intuitiva que con canales RGB.
HSLA	`hsla(180, 100%, 25%, 0.5)`	Cuando necesita ajustes de tipo HSL más transparencia.

Colores RGB

RGB (Red, Green, Blue) es un modelo de color aditivo que describe cómo se codifica cualquier color a partir de tres colores básicos. Es la base del color mostrado mediante luz en pantallas de televisión, computadoras, escáneres de imágenes, proyectores de video, cámaras digitales y dispositivos móviles.

Modelo de color aditivo RGB con canales rojo, verde y azul

Los valores R, G y B definen la intensidad de los componentes rojo, verde y azul en un rango de 0 a 255. Un azul brillante puede definirse como rgb(0, 0, 255), el rojo como rgb(255, 0, 0), el verde brillante como rgb(0, 255, 0), el negro como rgb(0, 0, 0) y el blanco como rgb(255, 255, 255). RGB es un modelo de color popular en fotografía, televisión y gráficos por computadora. Como cada componente tiene 256 valores posibles, RGB puede representar 256^3 = 16,777,216 colores. Al mezclar estos tres componentes se obtiene un valor de color RGB, por ejemplo, rgb(125, 50, 210).

Una de las formas más habituales de explicar el color es mediante sistemas visuales, como diagramas o modelos gráficos, donde cada color tiene su propio conjunto de coordenadas. Por ejemplo, el sistema de color RGB puede representarse como un cubo con 256 puntos discretos en cada lado:

Cubo RGB como modelo gráfico para representar valores de color RGB

Históricamente, el modelo RGB se ha elegido como modelo principal para el desarrollo web porque está directamente relacionado con el funcionamiento de las pantallas, que usan píxeles rojos, verdes y azules para mostrar colores.

Colores HEX

Los códigos HEX son los códigos de color más utilizados. Son números hexadecimales de tres bytes, es decir, seis variables. El número de color de seis dígitos se estructura en tres grupos de dos dígitos que especifican la cantidad de rojo, verde y azul en el color aditivo. Cada par hexadecimal de dos dígitos puede tener un valor de 00 a FF. Esto permite representar más de 16 millones de colores posibles.

El código se expresa así: #RRGGBB, donde cada valor de dos dígitos corresponde al rango de uno de los tres colores (rojo, verde y azul) con los que se selecciona el valor final del color. Por ejemplo, #00FF00 se muestra como verde porque el componente verde está establecido en su valor máximo (FF) y los demás están establecidos en 00.

Colores RGBA

Los valores de color RGBA (Red, Green, Blue, Alpha) son una extensión de los valores RGB con un canal alfa que determina la opacidad del color. El parámetro alfa es un número entre 0.0, que significa “totalmente transparente”, y 1.0, que significa “totalmente opaco”. Por ejemplo, rgba(255, 0, 0, 1) se muestra como rojo puro, y rgba(255, 0, 0, 0.5) se muestra como rojo con un 50% de opacidad.

La figura muestra valores RGBA del color “Yellow-Green” con distintos niveles de transparencia:

Valores de color RGBA para YellowGreen con distintos niveles de transparencia

Para un valor RGBA, a diferencia de los valores RGB, no existe notación hexadecimal.

Colores HSL

Muchas personas consideran que el código de color RGB no es intuitivo y está orientado al hardware. El modelo de color HSL (Hue, Saturation, Lightness) fue desarrollado en la década de 1970 por investigadores de gráficos por computadora para aproximarse mejor a la forma en que la visión humana percibe los atributos que producen color. En el modelo HSL, los colores de cada tono se organizan en una sección radial alrededor de un eje central de colores neutros, desde el negro en la parte inferior hasta el blanco en la parte superior. La representación HSL reorganiza los colores para hacerlos más intuitivos que en RGB. Se utiliza con frecuencia en aplicaciones de gráficos por computadora, como selectores de color y análisis de imágenes.

La figura muestra una interpretación gráfica 3D del modelo HSL (a); la imagen procede de commons.wikimedia.org/wiki/. La figura (b) muestra una interpretación gráfica 2D del modelo HSL para un valor de luminosidad del 50%.

Modelo de color HSL con dimensiones de tono, saturación y luminosidad

HSL es una representación del modelo de color RGB en coordenadas cilíndricas. Hue define el color básico. El tono es, en esencia, cualquier color de la rueda cromática; se expresa como un grado de 0 a 360. Así, 0 es rojo, 120 es verde y 240 es azul. La saturación es la intensidad o pureza de un color y determina qué tan vivo será. Cero por ciento es gris, y 100 por ciento es un color completamente saturado. La luminosidad es la cantidad de brillo o luz del color. Determina cuánto tinte negro o blanco tiene. Por ejemplo, 50 por ciento no tiene tinte, cero por ciento es completamente negro y 100 por ciento es completamente blanco.

Ejemplos de colores HSL

La siguiente tabla representa un tono. Se eligió el rojo del círculo cromático. Tono=0. El eje X de la tabla representa la saturación (100%, 75%, 50%, 25%, 0%). El eje Y representa la luminosidad. 50% es “normal”.

Ejemplos de colores HSL para el tono rojo con diferentes valores de saturación y luminosidad

Colores HSLA

Los valores de color HSLA (Hue, Saturation, Lightness, Alpha) son una extensión de los valores HSL con un canal alfa que determina la opacidad del color. El valor de color HSLA se especifica con tono, saturación, luminosidad y alfa, donde el parámetro alfa define la opacidad. El parámetro alfa es un número entre 0.0, que significa “totalmente transparente”, y 1.0, que significa “totalmente opaco”. Por ejemplo, hsla(0, 100%, 50%, 1) se muestra como rojo puro, y hsla(0, 100%, 50%, 0.5) se muestra como rojo con un 50% de opacidad:

Valores de color HSLA para rojo con distintos niveles de opacidad

¿Qué ocurre con otros formatos de color CSS?

Los documentos HTML suelen aplicar colores mediante CSS, y el contenido web se muestra en pantallas que usan el modelo de color RGB (Red, Green, Blue). Por eso RGB, RGBA, HEX, HSL y HSLA siguen siendo los formatos de color más comunes para el trabajo diario con HTML y CSS.

Existen otros modelos de color, pero no siempre son igual de útiles para el estilo web básico:

El modelo de color CMYK se usa principalmente para impresión y describe cómo se mezclan las tintas sobre papel. No es un modelo natural para pantallas digitales que usan luz para mostrar colores.
HSV resulta útil en algunas herramientas de diseño, pero los autores de CSS suelen usar HSL o funciones de color modernas.
HWB, Lab, LCH, Oklab, OkLCh y los espacios de color basados en XYZ se usan para trabajos de color más avanzados, gamas más amplias, ajustes perceptuales y tareas de ciencia del color.
Para la mayoría de las páginas, los nombres de color, HEX, RGB, RGBA, HSL y HSLA son más simples, ampliamente reconocidos y suficientes para aplicar estilos a textos, fondos, bordes y elementos de interfaz.

CSS Color Module Level 4 define funciones de color más recientes, como lab(), lch(), oklab(), oklch() y color(). La compatibilidad en navegadores y entornos de renderizado puede variar, por lo que conviene usar estos formatos avanzados cuando la plataforma de destino los admita y cuando la precisión adicional del color justifique la mayor complejidad.

Resumen de códigos de color HTML

Los colores HTML se pueden definir mediante un nombre o mediante valores RGB, RGBA, HEX, HSL o HSLA, y aplicarse al fondo o al texto en documentos HTML.

La siguiente figura ilustra cómo especificar un color verde azulado mediante nombre, RGB, RGBA, HEX, HSL y HSLA:

Color teal representado por nombre, HEX, RGB, RGBA, HSL y HSLA

RGB y sus derivados comunes siguen siendo la base práctica del color en la web. Use nombres de color cuando la legibilidad sea más importante que la precisión, HEX para una notación CSS compacta, RGB o RGBA cuando necesite control por canales o transparencia, y HSL o HSLA cuando quiera ajustar tono, saturación y luminosidad de una forma más intuitiva.

FAQ

¿Cuál es el formato de código de color HTML más común?

HEX es uno de los formatos más comunes porque es compacto y compatible en CSS. RGB y HSL también son habituales cuando los desarrolladores necesitan valores por canal o ajustes de color más sencillos.

¿Cuándo debo usar RGBA o HSLA?

Use RGBA o HSLA cuando el color necesite transparencia. El valor alfa controla la opacidad, donde 0 es totalmente transparente y 1 es totalmente opaco.

¿Son mejores los nombres de colores HTML que los códigos HEX?

Los nombres de color son legibles, pero son limitados y no siempre precisos. Los valores HEX, RGB y HSL ofrecen más control y son mejores para sistemas de diseño consistentes.