Funciones de Color CSS: rgb(), hsl(), oklch() Comparadas

CSS tiene más formas de escribir un color de las que la mayoría de los desarrolladores se dan cuenta. Más allá del ubicuo código hex, existen al menos ocho funciones de color distintas — y cada una tiene un modelo diferente, diferentes fortalezas y diferentes razones para elegirla. Elegir la correcta no es solo una preferencia de sintaxis; puede determinar si tus colores son accesibles, si se interpolan correctamente en animaciones y si puedes generar escalas de color programáticas que luzcan visualmente consistentes.

Esta guía cubre todas las funciones de color CSS principales, cuándo brilla cada una y cómo está el soporte de navegadores en 2026.

rgb() y rgba()

La función rgb() es la expresión CSS directa del modelo de color RGB: tres números del 0 al 255, uno para Rojo, uno para Verde y uno para Azul.

color: rgb(59, 130, 246);     /* Un azul vívido */
color: rgb(255, 87, 51);      /* Un coral-rojo cálido */
color: rgb(0, 0, 0);          /* Negro */
color: rgb(255, 255, 255);    /* Blanco */

rgba() es la forma histórica para añadir opacidad, con un cuarto argumento de 0 (transparente) a 1 (opaco):

color: rgba(59, 130, 246, 0.5);   /* El mismo azul al 50% de opacidad */

Sintaxis Moderna de rgb()

En CSS Color Level 4 (totalmente soportado en todos los navegadores modernos desde 2023), rgb() fue actualizado para aceptar el canal alfa directamente, haciendo redundante a rgba():

/* Estas son ahora equivalentes */
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5);

La nueva sintaxis separada por espacios con una barra antes del valor alfa funciona con rgb(), hsl() y otras funciones. Ambas formas funcionan — verás ambas en bases de código existentes.

Cuándo Usar rgb()

rgb() es más útil cuando: - Trabajas a partir de un color hex y quieres los valores de canal sin procesar visibles - Necesitas animar canales individuales R, G o B mediante propiedades personalizadas de CSS - Estás generando colores programáticamente y los datos de origen ya están en RGB

Su debilidad es que la intuición humana no se mapea bien al RGB. Es difícil mirar rgb(107, 142, 35) y saber que obtendrás verde oliva. Para trabajo de diseño, HSL u OKLCH son más intuitivos.

hsl() y hsla()

HSL son las siglas de Tono, Saturación, Luminosidad (en inglés Hue, Saturation, Lightness). Mapea los colores a un cilindro en lugar de un cubo, lo cual es mucho más cercano a cómo los diseñadores piensan realmente sobre el color.

• Tono (Hue): un grado en la rueda de color de 0 a 360 (0 = rojo, 120 = verde, 240 = azul)
• Saturación: 0% (gris, sin color) a 100% (completamente vívido)
• Luminosidad: 0% (negro) a 100% (blanco), con 50% siendo el color "puro"

color: hsl(217, 91%, 60%);    /* Un azul vívido */
color: hsl(9, 100%, 60%);     /* Un coral-rojo cálido */
color: hsl(80, 60%, 35%);     /* Verde oliva */
color: hsl(0, 0%, 50%);       /* Gris medio puro */

hsla() añade el canal alfa, idéntico al patrón rgb() / rgba():

color: hsla(217, 91%, 60%, 0.5);  /* Azul al 50% de opacidad */
color: hsl(217 91% 60% / 0.5);   /* Igual, usando sintaxis moderna */

Por Qué hsl() Cambió el Desarrollo Web

Antes de que hsl() llegara en CSS 2.1 (2011), cambiar la luminosidad o saturación de un color en CSS requería volver a un código hex o valores RGB y recalcular desde cero. Con hsl(), puedes crear variaciones consistentes de un color de forma trivial:

:root {
  --blue-h: 217;
  --blue-s: 91%;
}

.btn {
  background: hsl(var(--blue-h), var(--blue-s), 60%);    /* Base */
}
.btn:hover {
  background: hsl(var(--blue-h), var(--blue-s), 50%);    /* Más oscuro al pasar el cursor */
}
.btn:active {
  background: hsl(var(--blue-h), var(--blue-s), 40%);    /* Aún más oscuro */
}

El Problema con hsl()

A pesar de su atractivo intuitivo, HSL tiene un defecto fundamental: no es perceptualmente uniforme. Pasos numéricos iguales en HSL no producen colores que parezcan igualmente diferentes al ojo humano.

El síntoma más obvio es el amarillo. Un amarillo HSL puro (hsl(60, 100%, 50%)) parece mucho más brillante e intenso que un azul HSL puro (hsl(240, 100%, 50%)), aunque ambos tengan los mismos valores de saturación y luminosidad. Esto hace difícil construir escalas de color donde diferentes tonos se sientan visualmente equilibrados.

Por esta razón, el trabajo moderno con colores CSS se está moviendo cada vez más hacia OKLCH.

lab() y lch()

CSS Color Level 4 introdujo lab() y lch() basados en el espacio de color CIE L*a*b*, diseñado por científicos del color para ser perceptualmente uniforme — diferencias numéricas iguales corresponden a diferencias percibidas iguales en el color.

lab()

lab() usa tres ejes: - L: Luminosidad de 0 (negro) a 100 (blanco) - a: Posición en el eje verde-rojo (negativo = verde, positivo = rojo) - b: Posición en el eje azul-amarillo (negativo = azul, positivo = amarillo)

color: lab(53 -5 -60);    /* Un azul vívido */
color: lab(55 60 40);     /* Un rojo-naranja cálido */
color: lab(80 -15 20);    /* Oliva/lima suave */

Los ejes a y b son menos intuitivos que los grados de tono, lo que hace que lab() sea algo difícil de escribir a mano. Es más útil de forma programática — por ejemplo, al calcular degradados perceptualmente uniformes o proporciones de contraste.

lch()

lch() es una reimaginación cilíndrica de Lab usando Luminosidad, Croma (similar a la saturación) y Tono:

color: lch(53 60 265);    /* Azul vívido (L=53, C=60, H=265°) */
color: lch(60 55 25);     /* Naranja-rojo cálido */

El tono en lch() se mapea aproximadamente (pero no idénticamente) al tono en hsl(). La diferencia clave es que la luminosidad y el croma en lch() son perceptualmente significativos — dos colores en lch(70 40 X) parecerán igualmente brillantes independientemente de su tono, lo cual no es cierto en hsl().

Cuándo Usar lab() y lch()

Estas funciones son excelentes para: - Generar pares de colores accesibles donde el contraste percibido es predecible - Construir paletas de visualización de datos donde los colores se sientan igualmente ponderados - Crear degradados de apariencia suave y natural

Han sido superados para la mayoría del trabajo nuevo por oklch(), que es más preciso y tiene mejor soporte de herramientas.

oklch()

OKLCH es el estado del arte actual para la especificación de colores CSS. Se basa en el espacio de color Oklab, desarrollado por Björn Ottosson en 2020, que mejora el CIE Lab con mejor uniformidad perceptual — especialmente para los tonos azul y morado, que el CIE Lab maneja mal.

La función toma tres valores más un alfa opcional:

• L: Luminosidad de 0 (negro) a 1 (blanco)
• C: Croma (intensidad del color), típicamente de 0 a 0.4
• H: Ángulo de tono en grados, de 0 a 360

color: oklch(0.62 0.19 250);    /* Azul vívido */
color: oklch(0.65 0.22 25);     /* Rojo-naranja cálido */
color: oklch(0.85 0.08 130);    /* Verde suave */
color: oklch(0.62 0.19 250 / 0.5); /* Azul al 50% de opacidad */

Por Qué oklch() Importa

Luminosidad predecible. Debido a que la luminosidad OKLCH es perceptualmente uniforme, dos colores con el mismo valor L parecen igualmente brillantes, independientemente del tono. Esto facilita la construcción de paletas de color donde cada tono se siente equilibrado:

/* Todos estos parecen igualmente "de peso medio" en OKLCH */
--red:    oklch(0.65 0.25 15);
--green:  oklch(0.65 0.18 145);
--blue:   oklch(0.65 0.19 250);
--yellow: oklch(0.65 0.15 90);

Intenta lograr eso con hsl() — el amarillo parecerá notablemente más brillante que el azul.

Acceso a gama amplia. OKLCH puede expresar colores fuera de la gama sRGB, dando acceso a los colores vívidos disponibles en las pantallas modernas (iPhone, MacBook Pro, la mayoría de laptops 2023+) que soportan Display P3 o más amplio. Los códigos hex y rgb() están limitados a sRGB:

/* Este verde vívido solo es posible con oklch — fuera de sRGB */
color: oklch(0.72 0.30 145);

Los navegadores mapean automáticamente los colores OKLCH fuera de gama al color disponible más cercano para pantallas que no pueden mostrarlos, por lo que es seguro usar colores de gama amplia ahora.

Mejor interpolación de degradados. Los colores interpolados (animados o con degradados) en OKLCH pasan por colores perceptualmente intermedios. El infame "gris lodoso en el medio" que aparece en los degradados RGB entre colores complementarios no ocurre en OKLCH.

oklch() en Sistemas de Diseño

Un número creciente de sistemas de diseño y frameworks CSS están adoptando OKLCH para sus escalas de color. Si estás construyendo un sistema de diseño desde cero en 2025 o después, OKLCH es el punto de partida recomendado. Usa el Conversor de Color para traducir cualquier código hex existente a su equivalente OKLCH.

color-mix()

color-mix() es una función CSS más nueva que mezcla dos colores en un espacio de color y proporción especificados:

/* Mezclar azul y rojo en partes iguales en oklch */
color: color-mix(in oklch, #3B82F6 50%, #EF4444 50%);

/* Crear un tinte más claro: mezclar con blanco */
color: color-mix(in oklch, oklch(0.62 0.19 250) 60%, white);

/* Crear un tono más oscuro: mezclar con negro */
color: color-mix(in oklch, oklch(0.62 0.19 250) 70%, black);

El in oklch (o in srgb, in hsl, etc.) especifica el espacio de color usado para el cálculo de mezcla, lo cual afecta significativamente el resultado.

Por Qué el Espacio de Color Importa para Mezclar

Mezclar en sRGB a menudo produce puntos medios apagados y desaturados entre colores complementarios. Mezclar en OKLCH produce colores intermedios perceptualmente vívidos — porque la interpolación OKLCH sigue el mismo camino que toma la percepción del color humano.

/* Mezclar azul y amarillo en sRGB a menudo produce un oliva/gris apagado */
color: color-mix(in srgb, blue, yellow);

/* Mezclar en oklch produce un verde intermedio vívido */
color: color-mix(in oklch, blue, yellow);

Casos de Uso Prácticos para color-mix()

Generación de variantes de tema. En lugar de codificar en duro cinco variantes de sombra de tu color de marca, genéralas dinámicamente:

:root {
  --brand: oklch(0.55 0.22 250);
  --brand-light: color-mix(in oklch, var(--brand) 50%, white);
  --brand-lighter: color-mix(in oklch, var(--brand) 25%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 80%, black);
}

Adaptación al modo oscuro. Deriva automáticamente los colores de superficie en modo oscuro mezclando con una base oscura:

@media (prefers-color-scheme: dark) {
  --surface: color-mix(in oklch, var(--brand) 15%, #121212);
}

Opacidad sin transparencia real. Mezclar un color con blanco o un color de fondo específico simula la opacidad sin capas de composición:

/* Simula rgba(59, 130, 246, 0.2) sobre fondo blanco */
color: color-mix(in srgb, #3B82F6 20%, white);

Soporte de Navegadores en 2026

A principios de 2026, oklch() y color-mix() están soportados en todos los navegadores actuales principales. La preocupación principal son los usuarios con navegadores móviles más antiguos o entornos empresariales con políticas de navegador desactualizadas. Para trabajo en producción donde la compatibilidad máxima importa, proporciona un hex o fallback rgb() antes de la sintaxis moderna:

.element {
  /* Fallback para navegadores más antiguos */
  color: #3B82F6;
  /* Mejora progresiva */
  color: oklch(0.62 0.19 250);
}

Elegir la Función de Color CSS Correcta

Conclusiones Clave

• rgb() y hsl() son los estándares establecidos con soporte universal de navegadores. La sintaxis moderna separada por espacios (rgb(R G B / alpha)) hace redundantes a rgba() y hsla().
• hsl() es más intuitivo que rgb() para trabajo de diseño, pero no es perceptualmente uniforme — pasos numéricos iguales producen cambios perceptuales desiguales, especialmente entre tonos.
• lab() y lch() introdujeron la uniformidad perceptual en CSS, pero han sido ampliamente superados por el más preciso oklch().
• oklch() es el estándar moderno: perceptualmente uniforme, capaz de gama amplia y excelente para degradados, animaciones y escalas de color de sistemas de diseño.
• color-mix() permite la generación dinámica de color directamente en CSS — útil para temas, tintes, sombras y adaptación al modo oscuro.
• Usa el Conversor de Color para traducir cualquier código hex existente a oklch() o cualquier otro formato.
• Proporciona valores hex o rgb() de fallback antes de oklch() o color-mix() para máxima compatibilidad con navegadores.