Color
Mixer
Mezcla dos colores y obtén el resultado al instante — con valores HEX, RGB y HSL.
① Elige el Color A y el Color B ② Arrastra el control para ajustar la proporción ③ Copia el resultado mezclado
Color A
Color B
Preajustes de par de colores:
RGB Blending
Linear channel interpolation
Ratio
0% = Color A · 100% = Color B
Output
HEX, RGB and HSL formats
¿Cómo funciona la mezcla de colores?
Mezcla de colores digital con interpolación RGB lineal: resultado = color1 + (color2 − color1) × proporción, aplicada a cada canal R, G, B. Al 50% obtienes la media aritmética; al 25% el resultado se inclina un 75% hacia el Color A. Es el mismo algoritmo de la función CSS
color-mix() y mix-blend-mode, y refleja el motor de mezcla de Figma. Copia el resultado como HEX, RGB o HSL directamente en el código. Para tokens de diseño y paletas de marca, encadena resultados.Preguntas frecuentes
El mezclador usa interpolación lineal en el espacio RGB. Cada canal (R, G, B) se mezcla con la fórmula: resultado = color1 + (color2 - color1) × proporción. Al 0% obtienes el Color A, al 100% el Color B, al 50% la media aritmética de ambos.
La mezcla RGB es aditiva: trabaja con luz. Mezclar luz roja y verde da amarillo, mientras que mezclar pinturas rojas y verdes da un marrón opaco. El mezclador digital usa mezcla RGB (aditiva).
Al mezclar en espacio RGB, el punto medio de dos colores saturados complementarios suele atravesar un área de baja saturación (gris), ya que la interpolación lineal RGB no preserva la ruta del tono.
La herramienta proporciona tres formatos. Usa el código HEX directamente en CSS. Usa RGB con notación rgb(). En CSS moderno puedes usar color-mix(): color-mix(in srgb, #color1 50%, #color2).
Esta herramienta mezcla exactamente dos colores. Para mezclar múltiples colores, encadena los resultados: primero mezcla el Color A y B, luego el resultado con el Color C.
El deslizador va de 0% (100% Color A) a 100% (100% Color B). Al 50% ambos colores contribuyen por igual. Al 25% el resultado se acerca al 75% al Color A.
Casos de uso comunes: generar colores de transición entre colores de marca, crear estados intermedios para elementos interactivos, construir rampas de color para visualizaciones de datos.