🎨
← Volver a guías

Funciones de color CSS modernas: rgba(), hsl(), oklch() y más allá

· Etiquetas: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Funciones de color CSS modernas: rgba(), hsl(), oklch() y más allá

Las funciones de color CSS han evolucionado drásticamente. Lo que antes era una elección entre hex, rgb() y hsl() ahora es un rico ecosistema de espacios de color y funciones de manipulación que dan a los desarrolladores un control sin precedentes sobre la representación del color, la interpolación y la accesibilidad.

Esta guía cubre todas las funciones de color CSS principales disponibles en 2026, desde las familiares hasta las más innovadoras.

RGB y RGBA: los caballos de batalla

La función rgb() define colores usando el modelo de color aditivo rojo-verde-azul. Ha sido parte de CSS desde CSS1 y es compatible con todos los navegadores jamás creados.

/* Sintaxis heredada separada por comas */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Sintaxis moderna separada por espacios (Nivel 4 de Color CSS) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Valores porcentuales */
color: rgb(100% 0% 0%);

Cambios clave en el RGB moderno

El Nivel 4 de Color CSS introdujo dos mejoras importantes:

  1. Separado por espacios en lugar de por comas — La función rgb() ahora acepta valores separados por espacios o barras
  2. Sintaxis alfa unificada — El alias rgba() está obsoleto (pero aún se admite). rgb() ahora acepta nativamente un canal alfa

Esta sintaxis moderna es compatible con todos los navegadores lanzados desde 2020. Para proyectos nuevos, usa la sintaxis moderna y omite el alias rgba() por completo.

Canales RGB

Cada canal RGB acepta:

  • Un entero de 0 a 255
  • Un porcentaje del 0 % al 100 %
  • La palabra clave none para canales ausentes (Nivel 4 de Color CSS)

La palabra clave none es útil al interpolar colores: le indica al navegador que no interpole ese canal específico.

HSL y HSLA: control de color intuitivo

HSL significa Tono, Saturación, Luminosidad. Usa un sistema de coordenadas cilíndricas que se corresponde naturalmente con cómo los humanos piensan sobre el color.

/* H es el ángulo de tono (0-360), S es la saturación (0-100 %), L es la luminosidad (0-100 %) */
color: hsl(0 100% 50%);        /* Rojo puro */
color: hsl(0 100% 50% / 0.5);  /* Rojo al 50 % de opacidad */

/* Ángulos de tono con unidades */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Referencia de ángulos de tono

| Tono | Color | Hex | |-----|---------|----------| | 0 | Rojo | #FF0000 | | 30 | Naranja | #FF8000 | | 60 | Amarillo | #FFFF00 | | 120 | Verde | #00FF00 | | 180 | Cian | #00FFFF | | 240 | Azul | #0000FF | | 300 | Magenta | #FF00FF |

HSL es la mejor opción para generar paletas de colores programáticamente porque cambiar solo el canal de luminosidad o saturación crea variantes visuales consistentes.

HWB: mezclar con blanco y negro

HWB (Tono, Blancura, Negrura) es una alternativa más intuitiva a HSL. Eliges un tono y luego añades blancura y negrura para crear tintes y sombras.

color: hwb(0 0% 0%);    /* Rojo puro */
color: hwb(0 40% 0%);   /* Rojo con tinte (se añade blanco) */
color: hwb(0 0% 40%);   /* Rojo con sombra (se añade negro) */
color: hwb(0 20% 20%);  /* Tono (blanco + negro) */

HWB es más simple que HSL para un caso de uso específico: crear variantes de tinte y sombra de un color de marca. Nunca necesitas pensar en curvas de saturación — solo añade blanco o negro.

Soporte de navegadores: HWB es compatible con todos los navegadores modernos (Chrome 101+, Firefox 96+, Safari 15+).

LAB y LCH: espacios perceptualmente uniformes

LAB (Luminosidad, eje A, eje B) y LCH (Luminosidad, Croma, Tono) son espacios de color perceptualmente uniformes. Esto significa que la distancia euclidiana entre dos valores de color corresponde a la diferencia visual percibida — algo que RGB y HSL no pueden hacer.

color: lab(50% 50 0);        /* Rojo medio */
color: lch(50% 50 0);        /* Mismo color en forma cilíndrica */

Por qué importa la uniformidad perceptual:

  • Degradados — Interpolar en LAB o LCH produce transiciones suaves y naturales sin la apagada "zona turbia" que crean los degradados RGB
  • Medición de diferencias de color — Delta E (la medida de diferencia perceptual) es significativa en el espacio LAB
  • Accesibilidad — La uniformidad perceptual ayuda a predecir cómo los usuarios con deficiencias en la visión del color percibirán los colores

Limitaciones: LAB y LCH pueden producir colores fuera de la gama sRGB. Estos colores se recortarán al mostrarse en pantallas sRGB, pero son accesibles en pantallas de gama más amplia (DCI-P3, Rec. 2020).

Soporte de navegadores: compatible con Chrome 111+, Firefox 113+, Safari 15+. Sin soporte para IE ni Edge heredado.

OKLAB y OKLCH: estándar perceptual moderno

OKLCH es una versión mejorada de LCH desarrollada por Bjorn Ottosson. Corrige las no uniformidades perceptuales de LCH, especialmente para los tonos azules. OKLCH se ha convertido en el espacio de color predeterminado recomendado para proyectos CSS nuevos en 2025-2026.

color: oklch(60% 0.2 30);
/* Luminosidad: 0-100 %, Croma: 0-~0.4, Tono: 0-360 */

Por qué OKLCH es el mejor espacio de color para CSS

  1. Mejor uniformidad perceptual — Cambios numéricos iguales producen cambios visuales iguales en todos los tonos
  2. Luminosidad predecible — Los colores con el mismo valor de luminosidad realmente se ven igualmente brillantes
  3. Sin degradados turbios — La interpolación se mantiene limpia en todo el rango de tonos
  4. Seguro para sRGB por defecto — La mayoría de los valores OKLCH producen colores sRGB dentro de gama
  5. Canales intuitivos — Como HSL pero con precisión perceptual real

OKLCH en la práctica

/* Crear una escala de color equilibrada con OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Observa que cada paso cambia aproximadamente por el mismo valor de luminosidad (20 puntos porcentuales). Dado que OKLCH es perceptualmente uniforme, estos pasos aparecen espaciados de manera uniforme al ojo humano — algo difícil de lograr con HSL.

Soporte de navegadores: OKLCH es compatible con Chrome 111+, Firefox 113+, Safari 15.4+. Se ha convertido rápidamente en el espacio de color moderno más recomendado.

Color-Mix: mezclar colores en CSS

La función color-mix() mezcla dos colores en un espacio de color especificado:

/* Mezclar rojo y azul por igual en sRGB */
color: color-mix(in srgb, red, blue);

/* 30 % primario, 70 % blanco: un tinte */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Mezclar con un espacio de color perceptual para resultados suaves */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

El parámetro in <color-space> te permite controlar el espacio de interpolación. Para la mayoría de los casos, in oklch produce los mejores resultados visuales.

Casos de uso:

  • Crear tintes y sombras sin funciones de preprocesador
  • Construir variantes de componentes a partir de un único token de color
  • Generar estados de hover y activo dinámicamente
  • Crear efectos similares a degradados en una sola función

Sintaxis de color relativa: modificar colores existentes

El Nivel 4 de Color CSS te permite derivar nuevos colores a partir de los existentes modificando canales individuales:

--primary: #3366cc;

/* Usando canales OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Usando canales HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

La palabra clave from <color> descompone los canales del color de origen en los canales de la función de destino, que luego puedes ajustar con aritmética.

Palabras clave de canales por espacio de color

Cada espacio de color expone palabras clave de canales específicas:

| Espacio de color | Palabras clave | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Resumen de soporte de navegadores (2026)

| Función | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Todos | Todos | Todos | Todos | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Sintaxis de color relativa | 111+ | 113+ | 16.2+ | 111+ |

Todas las funciones de color modernas son seguras de usar en 2026 para proyectos que no requieran soporte de Internet Explorer. Para una compatibilidad más amplia, usa un paso de compilación que convierta la sintaxis moderna a hex o rgb() heredado.

Recomendaciones prácticas

  • Para proyectos existentes — HSL sigue siendo el mejor equilibrio entre legibilidad y capacidad
  • Para proyectos nuevos — Usa OKLCH como tu espacio de color principal por su precisión perceptual
  • Para degradados — Interpola siempre en OKLCH para evitar transiciones turbias
  • Para sistemas de diseño — Almacena los colores base en OKLCH, genera variantes con color-mix() o sintaxis relativa
  • Para canvas/WebGL — Quédate con RGB, que es nativo de la canalización de renderizado

Conclusión

Las funciones de color CSS modernas han transformado lo que puedes hacer con el color en la web. OKLCH proporciona uniformidad perceptual que hace predecible el diseño de sistemas de color. color-mix() y la sintaxis de color relativa eliminan la necesidad de funciones de color de preprocesador. Juntas, estas herramientas dan a los desarrolladores web el mismo poder de color que las herramientas de diseño han ofrecido durante años — ahora directamente en el navegador.

Usa nuestro conversor de colores en línea gratuito para convertir entre todos los formatos de color CSS modernos, incluidos OKLCH, LAB, HWB y el clásico HEX/RGB/HSL.