DOS COLORES · 3 ESPACIOS · 7 PASOS · LOCAL
Combina dos colores HEX con una proporción exacta de 0 a 100, compara tres espacios de interpolación, consulta los valores resultantes y copia una declaración CSS color-mix() utilizable. Este mezclador de colores funciona por completo en tu navegador y muestra cada color intermedio antes de aplicarlo a una paleta, interfaz, ilustración o estudio cromático de personajes.
Actualizado el 11 de agosto de 2026
mezclador de colores
Este mezclador de colores calcula una interpolación matemática entre dos colores sRGB opacos. Elige cuánto aporta cada extremo y después selecciona sRGB para una mezcla web familiar, sRGB lineal para combinar intensidades de luz u OKLCH para recorrer una ruta perceptualmente organizada. El resultado cambia porque cada espacio interpola coordenadas distintas.
Con la proporción predeterminada 50/50, #FF5A5F y #2F80ED producen #976DA6 en sRGB, #BE6FB8 en sRGB lineal y #C060D6 en OKLCH. Las tres respuestas son válidas dentro de su método. El mezclador de colores crea además siete muestras equidistantes y convierte el punto elegido a HEX, RGB y HSB.
mezclador de colores
Un único punto medio puede ocultar la decisión principal: el sistema de coordenadas utilizado para viajar entre los extremos. Comparar métodos permite escoger una mezcla que responda al trabajo visual y no a un valor predeterminado sin explicar.
mezclador de colores
El mezclador de colores identifica el espacio de interpolación junto al resultado. Puedes cambiar de método sin modificar los extremos ni la proporción, de modo que la diferencia visible procede del cálculo. Así resulta más sencillo justificar una decisión en una revisión de diseño o durante la entrega.
mezclador de colores
Cada mezcla aparece como HEX en mayúsculas, RGB moderno, HSB redondeado y expresión CSS color-mix(). El mezclador de colores también genera una escala de siete pasos para estados, gráficos, transiciones de ilustración y exploración de paletas, sin calcular proporciones intermedias a mano.
mezclador de colores
Los extremos, la proporción, los resultados y los valores copiados permanecen en la sesión actual del navegador. El mezclador de colores no sube archivos ni exige una cuenta, algo útil al probar colores de marca todavía inéditos, paletas de clientes o direcciones artísticas preliminares.
mezclador de colores
Define dos extremos HEX, ajusta el equilibrio y compara la misma mezcla en tres espacios.
mezclador de colores
CSS COLOR 5
color-mix(in srgb, #FF5A5F 50%, #2F80ED 50%)Usa el HEX calculado como fallback cuando tu política de navegadores lo exija.
mezclador de colores
Selecciona cualquier muestra para copiar su HEX.
#FF5A5F#DC6077#BA678E#976DA6#7473BE#527AD5#2F80EDPrivado por diseño: todos los colores se mezclan localmente en este navegador.
mezclador de colores
Trata la salida como una decisión reproducible. Fija primero los extremos, compara después los espacios y valida el resultado elegido en su contexto final, no como una ficha aislada.
mezclador de colores
Pega un valor HEX de tres o seis dígitos para cada extremo o usa los selectores nativos. Asigna funciones semánticas, como superficie y acento, en lugar de llamarlos solo izquierda y derecha. Los nombres estables facilitan comentar y documentar cualquier cambio posterior de proporción.
mezclador de colores
Empieza en 50/50, alterna entre sRGB, sRGB lineal y OKLCH y desplaza luego la proporción en incrementos de un punto. Observa por separado luminosidad, croma y matiz. El mezclador de colores conserva ambos extremos para que la comparación siga siendo controlada.
mezclador de colores
Copia el valor en el componente, la ilustración o el gráfico real. Comprueba contraste, colores vecinos, temas claro y oscuro y navegadores compatibles antes de publicar. Un punto medio atractivo no se convierte automáticamente en un color de texto accesible ni en un token seguro.
mezclador de colores
Los mismos extremos y el mismo porcentaje pueden devolver puntos medios muy diferentes. Esta tabla resume qué interpola cada método, cuándo resulta útil y qué conviene revisar antes de adoptar su salida.
| Método | Qué interpola | Útil para | Qué revisar |
|---|---|---|---|
| sRGB | Canales rojo, verde y azul codificados con gamma | Comportamiento web heredado y mezclas rápidas familiares | El centro puede verse más oscuro o gris de lo previsto |
| sRGB lineal | Valores RGB lineales respecto a la intensidad luminosa | Composición similar a la luz y transiciones energéticas | La salida puede parecer más brillante que una mezcla de interfaz habitual |
| OKLCH | Luminosidad perceptual, croma y recorrido corto del matiz | Escalas uniformes y paletas que preservan el croma | La conversión a sRGB puede recortar colores muy saturados |
mezclador de colores
Antes de convertir una mezcla generada en valor de producción, verifica entradas, método, condiciones de salida y función semántica. Esta lista evita que un experimento atractivo termine como token sin explicación.
mezclador de colores
Este mezclador de colores interpola coordenadas de pantalla. Los pigmentos reales interactúan mediante absorción, dispersión, opacidad, aglutinante, concentración y sustrato; por eso dos pinturas pueden producir algo que ningún punto RGB u OKLCH predice. Emplea muestras físicas o datos del fabricante para decisiones materiales.
mezclador de colores
Los métodos y términos de esta página siguen el modelo de interpolación publicado para la plataforma web. Los ejemplos numéricos se reproducen con los extremos visibles y permiten auditar la elección del método.
CSS Color Module Level 4 explica:
Mixing or otherwise combining colors has different results depending on the interpolation color space used.
mezclador de colores
mezclador de colores
mezclador de colores
No existe uno universal. Usa sRGB para un comportamiento web heredado y familiar, sRGB lineal si la mezcla debe reflejar intensidad luminosa y OKLCH si priorizas uniformidad perceptual o croma. Compara los tres con los mismos extremos antes de decidir.
mezclador de colores
Cada modo promedia coordenadas distintas. Los canales sRGB codificados con gamma, los canales RGB de luz lineal y la luminosidad, el croma y el matiz de OKLCH describen rutas diferentes; por eso pesos iguales generan puntos medios visibles distintos.
mezclador de colores
Sí. Introduce valores HEX de tres o seis dígitos. Este mezclador de colores calcula todo en el navegador, no guarda la paleta en un servidor y no exige subir imágenes ni abrir una cuenta.
mezclador de colores
La declaración indica a un navegador compatible qué espacio, colores extremos y porcentajes debe usar. Pega el valor en una propiedad de color CSS y añade un fallback estático probado cuando lo requiera la política de compatibilidad del proyecto.
mezclador de colores
Úsala como punto de partida. Asigna una función semántica real a cada paso conservado, verifica contraste y estados vecinos y elimina valores sin uso. Una separación uniforme en un modelo no crea automáticamente tokens accesibles o mantenibles.
mezclador de colores
No. Interpola coordenadas digitales y no modela química de pigmentos, reflectancia espectral, opacidad ni sustrato. Mezcla y prueba físicamente los materiales si el resultado final será pintura, tinta, tinte u otro color fabricado.