Colores modernos con color-mix() y light-dark()

Mezcla de colores con color-mix()

Las funciones de color de CSS clásicas, como rgb() o hsl(), permiten especificar un color concreto pero no derivar variantes automáticamente. Si queremos una versión más clara o más oscura de un color principal, tradicionalmente había que calcularla manualmente o usar preprocesadores como Sass con funciones lighten() y darken().

La función color-mix() resuelve este vacío directamente en CSS nativo. Permite combinar dos colores en un espacio cromático definido y obtener un tercer color como resultado. La sintaxis básica es:

color-mix(in <espacio>, <color1> <porcentaje>, <color2> <porcentaje>)

Un ejemplo sencillo mezcla blanco con un azul para generar una variante más clara, útil para fondos:

.tarjeta-resaltada {
    background: color-mix(in srgb, #3b82f6 20%, white);
    color: #1e293b;
}

La mezcla interpola los componentes de ambos colores: 20% del azul y 80% del blanco (el porcentaje restante lo toma automáticamente). El resultado es un azul pastel que mantiene coherencia con la identidad principal.

Generación de variantes automáticas

La utilidad real de color-mix() aparece cuando lo combinamos con custom properties para crear una escala de variantes a partir de un único color base. Este patrón reemplaza a los preprocesadores y funciona a tiempo real, sin compilación.

:root {
    --primario: #3b82f6;
    --primario-claro: color-mix(in srgb, var(--primario) 20%, white);
    --primario-medio: color-mix(in srgb, var(--primario) 50%, white);
    --primario-oscuro: color-mix(in srgb, var(--primario) 30%, black);
    --primario-hover: color-mix(in srgb, var(--primario), black 15%);
}

.boton {
    background: var(--primario);
    color: white;
}

.boton:hover {
    background: var(--primario-hover);
}

Cambiar --primario en un único sitio actualiza automáticamente todas las variantes. Esta técnica es la base de los design tokens dinámicos de los sistemas de diseño modernos.

Espacios de color

El primer argumento de color-mix() especifica el espacio cromático usado para la interpolación. Los más usados son:

• 1 - srgb: espacio estándar, el más compatible. Suele dar resultados adecuados para interfaces.
• 2 - srgb-linear: espacio sRGB sin corrección gamma, útil para mezclas matemáticamente limpias.
• 3 - oklch y oklab: espacios perceptualmente uniformes. Mezcla colores tal como los percibe el ojo humano.
• 4 - hsl y hwb: útiles cuando la mezcla debe conservar el tono o la luminosidad.

La elección del espacio afecta al resultado visual de la mezcla. Por ejemplo, mezclar amarillo y azul en srgb puede dar un gris apagado, mientras que oklch produce un verde más natural.

/* Mezcla clásica en sRGB */
.ejemplo-srgb {
    background: color-mix(in srgb, yellow, blue);
}

/* Mezcla percepcional uniforme */
.ejemplo-oklch {
    background: color-mix(in oklch, yellow, blue);
}

Para interfaces modernas, oklch ofrece mezclas más agradables a la vista porque trabaja en un espacio perceptualmente uniforme. Si no hay requisitos especiales, empezar con oklch es una apuesta segura.

Mezcla con transparencia

Una aplicación frecuente de color-mix() es generar colores con opacidad sin tener que convertir formatos. Mezclando cualquier color con transparent obtenemos una versión semitransparente:

:root {
    --acento: #8b5cf6;
    --acento-suave: color-mix(in srgb, var(--acento) 15%, transparent);
}

.notificacion {
    background: var(--acento-suave);
    border: 1px solid var(--acento);
    color: var(--acento);
}

Este patrón reemplaza a las funciones tradicionales como rgba() y es más flexible porque funciona con cualquier formato de color, incluidos colores con nombre o variables CSS.

Temas claro y oscuro con light-dark()

Desde hace años, soportar modo claro y oscuro obliga a duplicar bloques de código o a usar media queries prefers-color-scheme. La función light-dark() simplifica este patrón al permitir especificar, en una sola declaración, dos colores: uno para cada modo.

La sintaxis es directa:

light-dark(<color-modo-claro>, <color-modo-oscuro>)

Para que funcione, el documento debe declarar qué esquemas soporta mediante la propiedad color-scheme:

:root {
    color-scheme: light dark;

    --color-fondo: light-dark(white, #0f172a);
    --color-texto: light-dark(#1e293b, #e2e8f0);
    --color-primario: light-dark(#3b82f6, #60a5fa);
}

body {
    background: var(--color-fondo);
    color: var(--color-texto);
}

Con esto, el navegador elige automáticamente el color correcto según la preferencia del sistema operativo del usuario. Si cambia entre modo claro y oscuro, las variables se reevalúan sin necesidad de recargar la página.

Forzar un tema específico

La propiedad color-scheme también permite forzar el modo a nivel de contenedor. Esto resulta útil para secciones que siempre deben mostrarse en un esquema concreto, como un panel de administración con fondo oscuro permanente:

.panel-oscuro {
    color-scheme: dark;
    background: light-dark(white, #0f172a);
    color: light-dark(black, white);
}

Dentro de .panel-oscuro, la función light-dark() devolverá siempre el valor oscuro, aunque el resto de la página esté en claro.

La combinación con un toggle manual también es sencilla. Basta con cambiar color-scheme mediante una clase aplicada al html:

:root {
    color-scheme: light dark;
}

html[data-tema="oscuro"] {
    color-scheme: dark;
}

html[data-tema="claro"] {
    color-scheme: light;
}

Un script mínimo en JavaScript cambiaría el atributo data-tema, y todo el CSS se adaptaría automáticamente.

Combinación de color-mix() y light-dark()

Las dos funciones se pueden combinar para construir sistemas de diseño completos que adapten colores al modo activo y generen variantes derivadas. Un ejemplo típico:

:root {
    color-scheme: light dark;

    --primario: light-dark(#3b82f6, #60a5fa);
    --primario-hover: color-mix(in srgb, var(--primario), black 15%);
    --primario-fondo: color-mix(in srgb, var(--primario) 10%, transparent);

    --superficie: light-dark(white, #1e293b);
    --superficie-elevada: color-mix(in srgb, var(--superficie) 90%, black);

    --texto: light-dark(#0f172a, #f1f5f9);
    --texto-suave: color-mix(in srgb, var(--texto) 70%, var(--superficie));
}

.boton-primario {
    background: var(--primario);
    color: white;
}

.boton-primario:hover {
    background: var(--primario-hover);
}

.aviso {
    background: var(--primario-fondo);
    color: var(--primario);
    border: 1px solid var(--primario);
}

flowchart LR
    A[Color base] --> B[light-dark adapta al modo]
    B --> C[color-mix genera variantes]
    C --> D[Variables CSS finales]
    D --> E[Componentes consumen variables]

Con esta arquitectura, un diseñador puede ajustar --primario en un único sitio y el sistema entero reacciona: variantes de hover, fondos suaves, superficies elevadas, todo recalculado automáticamente, tanto en modo claro como oscuro.

Buenas prácticas

Algunos consejos para aplicar estas funciones en proyectos reales:

• 1 - Define una paleta base corta y genera todas las variantes con color-mix(). Es más fácil de mantener que enumerar 20 colores independientes.
• 2 - Elige un espacio cromático consistente para todas las mezclas. Cambiar entre srgb y oklch dentro del mismo sistema produce incoherencias visuales.
• 3 - Usa color-scheme siempre que uses light-dark(). Sin esa propiedad, algunos controles nativos del navegador (scrollbars, inputs) mantendrán la apariencia por defecto aunque el resto esté oscuro.
• 4 - Testea con contraste real. Las funciones generan colores matemáticamente, pero el contraste para legibilidad (WCAG) debe verificarse con herramientas como DevTools o contrastchecker.

Las funciones modernas de color no sustituyen al trabajo del diseñador, pero permiten materializar sus decisiones en código sin repetir valores ni preprocesar. El resultado es un CSS más expresivo y mantenible.

Tanto color-mix() como light-dark() son parte del núcleo de CSS y funcionan en todos los navegadores modernos. Su adopción es cada vez más extendida en componentes web, design systems comerciales y frameworks recientes, por lo que dominar su sintaxis es imprescindible para cualquier desarrollador frontend en 2026.