Mezclador de Color
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).
Resultado
#8033B3
Mezcla 11 pasos
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
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.