CodeKitHub¿Qué es esta herramienta?
Un mezclador de colores interpola linealmente los canales rojo, verde y azul de dos colores en una proporción elegida, la misma operación que usa internamente un degradado. Al 0% el resultado es el Color A, al 100% es el Color B, y al 50% es el punto medio aritmético de cada canal RGB.
Esto es distinto de mezclar pintura física (que es sustractiva y depende del pigmento), y tampoco es lo mismo que promediar en el espacio HSL — la interpolación lineal en RGB es lo que usan los degradados CSS, las herramientas de diseño y la mayoría de utilidades de "color entre dos colores", por lo que el resultado coincide con lo que verías en un degradado del navegador entre esos mismos dos colores.
¿Por qué utilizarlo?
- Encuentra un color de hover o estado activo que quede de forma natural entre tu color base y un acento, en lugar de adivinar un ajuste al azar.
- Consulta el código HEX exacto en cualquier proporción, no solo a ojo sobre una captura del degradado.
- La rampa de 11 pasos genera de un clic una paleta completa de un color al otro, útil para visualización de datos o un degradado con varios puntos.
- Haz clic en cualquier paso para copiar su código HEX al instante.
- Gratis, instantáneo y totalmente local — sin subir archivos, sin cuenta.
Cómo utilizarlo
- Elige el Color A y el Color B con los selectores de color o escribiendo un código HEX.
- Arrastra el control deslizante de proporción para definir cuánto Color B mezclar.
- Lee los valores HEX y RGB resultantes encima de la muestra.
- Haz clic en cualquier muestra de la rampa de 11 pasos para copiar su código HEX.
Ejemplo
Entrada
Color A #3B82F6 (azul), Color B #F59E0B (ámbar), proporción 50%Resultado
#9B9E7D — rgb(155, 158, 125)Exactamente al 50%, cada canal RGB es el promedio aritmético de los canales de los dos colores de entrada.
Preguntas frecuentes
¿Por qué esto no coincide con lo que obtendría mezclando pintura real?
La mezcla de pintura es sustractiva (los pigmentos absorben luz) y depende de los pigmentos concretos usados — mezclar pintura azul y amarilla da verde, por ejemplo. Esta herramienta mezcla luz (canales RGB) de forma aditiva/lineal, que es como los pantallas, los degradados CSS y la mayoría de herramientas de diseño digital combinan colores. Los dos sistemas producen resultados genuinamente distintos por diseño, no por error.
¿Es lo mismo que un linear-gradient de CSS entre los dos colores?
Sí — un linear-gradient(colorA, colorB) de CSS interpola los canales RGB de la misma forma que esta herramienta, así que el color que verías en el punto medio de ese degradado coincide con el resultado al 50% aquí.
¿Por qué el color mezclado a veces se ve turbio o gris?
Mezclar dos tonos saturados pero muy distintos (como azul y naranja, casi complementarios) en el espacio RGB suele producir un punto medio de baja saturación, grisáceo o pardo — es una propiedad real de la interpolación RGB, no un error. Si quieres una mezcla más viva, prueba con colores más cercanos entre sí en el círculo cromático, o mezcla en el espacio HSL ajustando el tono mientras mantienes alta la saturación (algo que este mezclador RGB directo no hace).
¿Puedo mezclar más de dos colores a la vez?
No en un solo paso — la herramienta mezcla exactamente dos colores. Para combinar tres, mezcla los dos primeros en la proporción que quieras, copia el resultado y pégalo como el nuevo Color A frente a tu tercer color. Hacerlo por etapas también te da control sobre el peso de cada uno, algo que un promedio de tres a la vez no permitiría.
¿Debería usar esto o el Generador de Tonos de Color?
Si necesitas un color que quede entre dos colores distintos — digamos, un tono de transición entre tu azul de marca y un acento ámbar — usa este mezclador. Si necesitas variantes más claras y más oscuras de un solo color (estados de hover, fondos, una rampa estilo Tailwind de 50 a 900), usa en cambio el Generador de Tonos de Color: mantiene fijos el tono y la saturación y solo varía la luminosidad, así que cada resultado se mantiene claramente en la misma familia de color.
¿Qué formatos de color puedo escribir en los campos de entrada?
Los campos de texto aceptan códigos HEX de 6 dígitos, con o sin el # inicial (por ejemplo 3B82F6 o #3B82F6). El HEX abreviado de 3 dígitos, la notación rgb() y los nombres de color CSS no se interpretan ahí — pero puedes elegir cualquier color visualmente con el selector de color nativo junto a cada campo, y el campo HEX se actualiza para coincidir.