color-mix() y sintaxis de color relativa
Mezcle colores y cree variaciones cromáticas mediante las funciones modernas de color de CSS.
color-mix() y sintaxis de color relativa es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Función color-mix()
color-mix() combina dos colores en un espacio de color especificado. Permite crear variaciones de color basadas en tokens de diseño sin Sass ni JavaScript.
<button class="button-hover">Hover-mixed button</button>Sintaxis de color-mix()
Sintaxis completa: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). Los porcentajes deben sumar 100 %.
<div class="mix-equal">Equal mix</div>
<div class="mix-weighted">Weighted mix</div>Espacios de color en color-mix()
El espacio de color afecta al resultado de la combinación. Los espacios perceptuales modernos, como oklch, producen resultados visualmente más uniformes que srgb:
<div class="oklch-mix">OKLCH mix</div>
<div class="srgb-mix">sRGB mix</div>Generación de escalas de color con color-mix()
Cree una paleta de colores coherente a partir de un solo color de marca:
<span class="swatch swatch-100"></span>
<span class="swatch swatch-300"></span>
<span class="swatch swatch-700"></span>
<span class="swatch swatch-900"></span>Sintaxis de color relativo
Los colores relativos permiten derivar un color nuevo a partir de uno existente modificando canales específicos. Utilice la palabra clave from:
<p class="darker">20% darker text</p>
<p class="desaturated">Half saturation text</p>Variante transparente con color relativo
Cree una versión transparente de un color de marca sin conocer sus valores RGB:
<div class="overlay">Overlay</div>Aclarar y oscurecer
Sume o reste luminosidad en oklch para crear tintes y sombras:
<div class="card demo-active">Card</div>Descripción general del espacio de color oklch
OKLCH es un espacio de color perceptualmente uniforme:
l— luminosidad (de 0 a 1)c— croma/saturación (de 0 a 0.4+)h— ángulo de tono (de 0 a 360)
Ajustar l produce tintes y sombras uniformes de forma predecible.
Compatibilidad con navegadores
color-mix() es compatible con Chrome 111+, Firefox 113+ y Safari 16.2+. La sintaxis de color relativo (la palabra clave from) está disponible en Chrome 119+, Safari 16.4+ y Firefox 128+. Consulte caniuse.com para conocer la compatibilidad actual.
Futuro de color-contrast()
color-contrast() es una función propuesta que elige automáticamente el color más legible (de una lista) para un fondo determinado. Todavía no está disponible en los navegadores, pero está diseñada para crear temas orientados a la accesibilidad.
Comprobación rápida
¿Qué espacio de color de color-mix() produce resultados de combinación perceptualmente más uniformes?
Resumen
color-mix(in oklch, color1 %, color2 %) combina colores en un espacio especificado, lo que resulta ideal para crear tintes, sombras y variantes transparentes a partir de un solo color de marca. La sintaxis de color relativo (oklch(from var(--brand) calc(l+0.2) c h)) deriva colores nuevos modificando canales individuales. OKLCH es el mejor espacio de color para obtener resultados perceptualmente uniformes.
Preguntas frecuentes
¿La lección «color-mix() y sintaxis de color relativa» es gratis?
Sí — el texto completo de «color-mix() y sintaxis de color relativa» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «color-mix() y sintaxis de color relativa»?
Mezcle colores y cree variaciones cromáticas mediante las funciones modernas de color de CSS. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «color-mix() y sintaxis de color relativa»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- calc() para cálculos dinámicos
- min(), max() y clamp() para valores fluidos
- repeat() y minmax() en Grid
- color-mix() y sintaxis de color relativa