¿Por qué las mezclas RGB se ven turbias en medio?

RGB promedia los valores de canal directamente. De rojo saturado a azul saturado pasa por un punto medio gris-púrpura de baja saturación porque el canal verde queda en 0. Prueba HSL o LAB para mantener más saturación en el medio.

LAB es perceptualmente uniforme — pasos numéricos iguales se ven como pasos perceptuales iguales. Mejor para diseño de gradientes cuando la suavidad importa. CSS `color-mix(in lab, …)` hace lo mismo en navegadores modernos.

¿Qué pasa con el tono en HSL cuando los colores son opuestos?

HSL toma el arco más corto del círculo de color. Mezclar rojo (0°) y cian (180°) es ambiguo — la herramienta elige una dirección; si el resultado sorprende, prueba LAB.

¿Por qué mi 50% no es exactamente la mitad visualmente?

Solo LAB da un resultado perceptualmente a la mitad. Los puntos medios RGB y HSL son matemáticamente a la mitad, lo que suele ser perceptualmente más cerca del más oscuro de los dos extremos.

Mezclador de Color

Elige dos colores y una proporción (0–100%). La herramienta interpola entre ellos en el espacio elegido — RGB para matemática simple, HSL para mezclas que preservan el tono, o CIELAB para transiciones perceptualmente uniformes — y muestra el resultado más una franja de 11 pasos. Útil para escoger colores acentos intermedios, generar paradas de color para gradientes o entender por qué dos colores se ven turbios en el medio (usualmente porque su punto medio RGB no está perceptualmente a mitad de camino).

—

Color A

Color B

Mezcla: 50%

Resultado

#8033B3

Mezcla 11 pasos

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

LAB da el gradiente más perceptualmente uniforme. RGB y HSL son rápidos pero pueden verse desparejos en el medio.

Cómo usar

Define color A y color B (hex o selector).
Elige mezcla RGB, HSL o LAB.
Mueve el slider o lee la franja de 11 pasos.

Preguntas frecuentes

¿Por qué las mezclas RGB se ven turbias en medio?: RGB promedia los valores de canal directamente. De rojo saturado a azul saturado pasa por un punto medio gris-púrpura de baja saturación porque el canal verde queda en 0. Prueba HSL o LAB para mantener más saturación en el medio.
¿Cuándo usar LAB?: LAB es perceptualmente uniforme — pasos numéricos iguales se ven como pasos perceptuales iguales. Mejor para diseño de gradientes cuando la suavidad importa. CSS `color-mix(in lab, …)` hace lo mismo en navegadores modernos.
¿Qué pasa con el tono en HSL cuando los colores son opuestos?: HSL toma el arco más corto del círculo de color. Mezclar rojo (0°) y cian (180°) es ambiguo — la herramienta elige una dirección; si el resultado sorprende, prueba LAB.
¿Por qué mi 50% no es exactamente la mitad visualmente?: Solo LAB da un resultado perceptualmente a la mitad. Los puntos medios RGB y HSL son matemáticamente a la mitad, lo que suele ser perceptualmente más cerca del más oscuro de los dos extremos.

Herramientas relacionadas

Vista previa de CSS color-mix()

Compara cómo la función moderna CSS color-mix() mezcla dos colores en distintos espacios de interpolación (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — muestras en vivo, hex calculado, tira de gradiente completa por espacio y CSS copiable.

Color 0 0

Comparador de Brillo de Color (HSL vs Lab L* vs WCAG vs HSP)

Compara siete métricas de brillo distintas — Luminosidad HSL, Valor HSV, Luminancia Relativa WCAG (LRV), L* de CIE Lab (claridad perceptual), Luma Rec. 709, Brillo Percibido HSP y promedio ingenuo (R+G+B)/3 — para uno o dos colores en paralelo, con deltas que muestran por qué un color 'más claro' puede sentirse más oscuro.

Color 0 0

Conversor de color CMYK ↔ RGB (impresión)

Convierte entre colores RGB/hex de pantalla y porcentajes CMYK para impresión, con estrategias de generación de negro Simple, GCR (Reemplazo de componente gris) y UCR (Eliminación de subcolor), vista previa de separación de canales y lectura de cobertura total de tinta.

Color 0 0

Generador de Gradientes CSS

Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.

Color 0 0

Interpolación de Color / Pasos de Gradiente

Elige dos colores hex, obtén N pasos intermedios discretos — en sRGB, linear RGB, OKLab o HSL — con easing opcional.

Color 0 0

Generador de Conic Gradient

Constructor visual para CSS `conic-gradient()` — rotar ángulo, posición del centro, paradas de color, vista previa de forma. Útil para gráficos circulares, gráficos de anillo, patrones de tablero de ajedrez, ruedas de color.

Color 0 0