Qué es Generador CSS color-mix()?
Generador CSS color-mix() es una herramienta de navegador para esta tarea: Genera llamadas color-mix() CSS para estados hover, bordes, fondos y texto atenuado. La salida es fácil de revisar antes de usarla en un sitio publicado.
Quick answer
Use color-mix() to blend two colors in a specified color space, such as oklab or srgb. It is useful for creating tint, shade, and hover variants from a single base color without a preprocessor.
Limitations
- color-mix() requires Chrome 111+, Edge 111+, Safari 16.2+, and Firefox 113+. Older browsers do not support it and will ignore the declaration.
- The oklab color space produces more perceptually uniform results than srgb. Mixing in srgb can create muddy intermediates.
- color-mix() may not reference CSS custom properties that contain color-mix() output in some older browser versions due to property cycle detection.
Cómo usar esta herramienta
- Abre la herramienta y escribe los valores necesarios.
- Revisa la salida en el panel de resultado.
- Copia solo la parte que encaja con tu página.
- Prueba el cambio antes de publicar.
Para qué puedes usarla
- Resolver tareas repetidas de publicación con menos fricción.
- Preparar marcado, CSS o checklists antes del lanzamiento.
- Evitar pequeños errores comunes en sitios estáticos.