Cómo usar: Mezclador de colores
- Introduce o elige Color A y Color B.
- Elige cuántos pasos quieres (incluyendo los dos extremos).
- Selecciona un espacio de interpolación: OKLab ofrece la mezcla más suave y uniforme.
- Haz clic en una muestra para copiar un color, o copia el conjunto completo como variables CSS,
color-mix()o JSON.
¿Qué hace un mezclador de colores?
Calcula colores equidistantes entre dos extremos. Con 5 pasos entre azul y ámbar obtienes azul, tres colores de transición y ámbar. Es útil para degradados de varios puntos, escalas de visualización de datos, indicadores de progreso, bordes sutiles entre dos colores de superficie y estados hover con temas.
Por qué importa el espacio de interpolación
| Espacio | Resultado | Ideal para |
|---|---|---|
| OKLab | Pasos perceptualmente uniformes, sin centro turbio | La mayoría de interfaces, degradados, escalas de gráficos |
| OKLCH | Recorre la rueda de tonos y mantiene los colores vivos | Degradados tipo arcoíris y de marca |
| sRGB | El valor clásico del navegador; los puntos medios pueden volverse grises u oscuros | Igualar diseños heredados |
| sRGB lineal | Mezcla de luz físicamente correcta, puntos medios más brillantes | Simular la mezcla de luz real |
| HSL | Basado en el tono, con luminosidad percibida desigual | Barridos rápidos de tono |
Mezclar colores complementarios como azul y amarillo en sRGB produce un gris apagado en el centro; OKLab mantiene la transición limpia. Por eso el CSS moderno te permite elegir el espacio de forma explícita.
Mezclar colores con CSS nativo
Todos los navegadores actuales admiten color-mix() y las indicaciones de interpolación en degradados, así que muchas veces puedes evitar los valores fijos:
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Los pasos generados siguen siendo útiles para herramientas de diseño, plantillas de correo, gráficos dibujados en canvas o SVG y cualquier lugar donde no haya funciones CSS disponibles. Para crear una escala completa de claro a oscuro a partir de un color, usa el Generador de colores de Tailwind; para código de degradados con varios puntos, el Generador de degradados CSS.
También se busca como: mezclar colores, interpolación de colores, pasos de color, color-mix css, generador de degradados, mezclar dos colores, generar colores intermedios, mezclador de colores online.
Herramientas que combinan con: Mezclador de colores
- Conversor OKLCH — Explora el espacio de color OKLCH, perceptualmente uniforme, con deslizadores en vivo, comprueba si un color cabe en sRGB y copia los valores HEX, RGB y HSL equivalentes como fallback.
- Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
- Buscador de nombres de color — Pega un código HEX para obtener su nombre más cercano, legible para personas, y nombres de token limpios para tu CSS, SCSS, JavaScript o configuración de Tailwind.
- Conversor HEX a RGBA — Pega un código HEX, arrastra el deslizador de opacidad y copia el CSS exacto que necesitas: rgba() clásico, rgb( / alpha) moderno o HEX de 8 dígitos.
Preguntas frecuentes
¿Qué interpolación debo usar?
¿Los colores extremos cuentan dentro del número de pasos?
¿Qué es color-mix() en CSS?
color-mix(in oklab, red, blue 30%) mezcla dos colores en el navegador. Es compatible con todos los navegadores actuales y funciona con variables CSS, así que las mezclas se actualizan automáticamente con tu tema.