¿Qué es Mezclador de colores?

Mezcla dos colores con un control de proporción y ve el resultado en tiempo real. Genera valores HEX, RGB y HSL que puedes copiar directamente a tu código o herramienta de diseño.

Elige dos colores, escoge un modo de mezcla — RGB, RYB, LAB, LCH, HSL u OKLCH — y desliza la proporción del 0% al 100%. RGB promedia directamente en espacio de pantalla, es el más rápido pero puede producir puntos medios apagados; RYB mezcla como la pintura real, así que azul y amarillo dan verde, y rojo y amarillo dan naranja; LAB y LCH mezclan en espacio perceptual, dando gradientes más suaves entre familias de tono; OKLCH es el modelo perceptual más reciente, alineado con la especificación CSS color-mix, y suele dar el punto medio de aspecto más natural. Las salidas incluyen HEX, RGB, HSL, CMYK y el nombre de color más cercano, además de una lectura de contraste WCAG sobre blanco y negro y un degradado lineal CSS para copiar. Los botones de 25, 50 y 75 por ciento te llevan al instante a los puntos de mezcla habituales sin arrastrar el deslizador.

Cómo usar

1. Paso 1 — Selecciona el primer color con el selector o introduce su valor HEX.
2. Paso 2 — Selecciona el segundo color y ajusta el control de proporción de mezcla (0 % = primer color puro, 100 % = segundo color puro).
3. Paso 3 — Observa el resultado de la mezcla con sus códigos de color y copia los valores que necesites.

Cuándo usar

• Generar estados hover y deshabilitado mezclando un color de marca con blanco o gris.
• Crear paradas intermedias para un degradado CSS que no se enturbie en el centro.
• Sacar un acento más suave mezclando dos colores de marca a baja proporción para avisos.

Resultado

Un diseñador mezcla azul corporativo (#2196F3) con blanco (#FFFFFF) al 30 % para crear un tinte sutil (#A1C9F8) para estados hover en un kit de interfaz.

Preguntas frecuentes

¿Qué modo de mezcla conviene usar la mayoría de las veces?

Si tu pipeline lo admite, usa OKLCH: es el más uniforme perceptualmente y casa con la especificación moderna CSS color-mix. LAB es la siguiente mejor opción y goza de soporte amplio en herramientas de diseño. RGB sirve cuando los colores tienen luminosidad parecida; LCH conserva mejor el croma; HSL es útil cuando quieres rotación de matiz, no interpolación suave.

¿Por qué el punto medio en RGB a veces sale gris o sucio?

RGB promedia números, no percepción. Colores complementarios como azul y naranja se cancelan en los canales R, G y B y el promedio queda en un gris desaturado. Cambia a LAB o LCH y el punto medio se mantiene saturado. Para un resultado igual al de mezclar pintura física, usa el modo RYB: combina azul y amarillo en verde en lugar de gris.

¿En qué se diferencia esto de CSS `color-mix()`?

color-mix() ya funciona en navegadores modernos en srgb, lab, oklab, lch u oklch. Esta herramienta entrega HEX para pegar en hojas de estilo antiguas y suma un slider visual para ajustar la proporción sin tener que adivinar el porcentaje.

¿Puedo mezclar más de dos colores?

En un solo paso no, pero puedes encadenar: mezcla A y B para obtener C, luego mezcla C con D. Para un degradado de tres colores más suave, mezcla A→B al 50%, B→C al 50%, y usa esos dos puntos medios como paradas alrededor del B original.

¿Qué significa una proporción del 0% frente al 100%?

0% te da Color 1 puro, 100% te da Color 2 puro y 50% es el punto medio. El slider avanza en pasos de 1%, así puedes afinar un tinte o sombra: un 10% de mezcla se siente distinto de un 15%.

Herramientas relacionadas