Mezclador de colores
Mezclar #FF0000 y #0000FF al 50 % da #800080, un púrpura con rojo 128, verde 0 y azul 128. Cree tonos intermedios de marca y colores de estado a partir de dos colores que ya tiene. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Primer color hex
- #FF0000
- Segundo color hex
- #0000FF
- Proporción
- 50
- T
- 0,5
- Cód. hex
- #800080
- Cadena RGB
- rgb(128, 0, 128)
Un mezclador de colores toma dos códigos hex y un porcentaje de mezcla, y devuelve un solo color situado entre ambos en el espacio de canales RGB. Los diseñadores lo usan cuando necesitan un tono intermedio entre un rojo de marca y un azul profundo, cuando desean un estado hover al treinta por ciento hacia un resaltado, o cuando generan rampas escalonadas sin abrir un programa de gráficos de escritorio. Los códigos hex inválidos fallan con un error claro de entrada inválida para que los pipelines detecten erratas antes de publicar muestras incorrectas.
Cómo funciona la mezcla RGB y cómo elegir la proporción
Envíe dos colores hex y una proporción de cero a cien. Internamente cada color se expande a tres canales en el rango de cero a doscientos cincuenta y cinco. La forma corta de tres dígitos, como almohadilla f cero cero, se expande a seis dígitos duplicando cada nibble, de modo que almohadilla f cero cero y almohadilla FF0000 son el mismo rojo puro.
Prefijos opcionales de almohadilla o cero-x se aceptan y se eliminan antes de la validación. El RGB lineal no es lo mismo que un punto medio perceptual en LAB o HSL, de modo que dos colores de luminosidad muy distinta pueden parecer sesgados hacia el padre más brillante; es el comportamiento esperado de este producto y coincide con la interpolación clásica de canales al estilo CSS que muchos scripts de diseño ya usan.
Qué puede hacer con ella
Tonos intermedios de paleta de marca
Fusione un hex de marca primario con uno secundario al 25%, 50% y 75% para generar tokens intermedios escalonados en temas de IU y kits de marketing.
Colores de hover y de estado
Mezcle un color base de botón con blanco o negro a una proporción pequeña para producir estados hover más claros y active más oscuros sin elegir cada muestra a mano.
Preguntas frecuentes
¿Qué ocurre si envío un código hex inválido?
Ambos colores deben ser hexadecimales de 3 o 6 dígitos (# opcional). Longitud incorrecta o dígitos no hex se rechazan y no se cobran.
¿El mezclador de colores es gratuito?
La herramienta del navegador se ejecuta gratis en su dispositivo.
¿La mezcla se hace en HSL o LAB?
Los espacios perceptuales son otra intención de producto; esta herramienta sigue las mezclas clásicas de canales hex.
¿Qué color sale al mezclar rojo y azul al 50 %?
Sale #800080, un púrpura. Cada canal queda a medio camino: el rojo baja de 255 a 128, el azul sube de 0 a 128 y el verde se queda en 0.
¿Qué indica el porcentaje de mezcla?
Indica cuánto del segundo color entra en la mezcla. Con 0 obtiene el primer color sin cambios, con 100 el segundo y con 50 el punto medio de cada canal.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/color/mix \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color1":"#FF0000","color2":"#0000FF","ratio":50}'const res = await fetch("https://api.kit.forhosting.com/color/mix", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/mix",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/mix", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color1":"#FF0000","color2":"#0000FF","ratio":50}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color1":"#FF0000","color2":"#0000FF","ratio":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/mix", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"color1": "#FF0000",
"color2": "#0000FF",
"ratio": 50
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.mix",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Esta capacidad realiza una mezcla lineal determinista sobre rojo, verde y azul de forma independiente: con proporción cero el resultado es color1 puro, con cien es color2 puro, y los valores intermedios interpolan cada canal y redondean a enteros 0–255.
Cómo funciona la mezcla RGB y cómo elegir la proporción
La proporción se interpreta como el porcentaje de color2 en la mezcla: canal igual a redondeo de color1 por uno menos t más color2 por t, donde t es la proporción dividida entre cien. Eso significa que proporción cero deja color1 intacto, proporción cien produce color2, y proporción cincuenta queda a mitad de camino en RGB lineal en cada canal. Entradas idénticas siempre producen JSON idéntico porque la ruta es aritmética pura, sin red, sin semilla aleatoria y sin reloj de pared.
Cómo leer la respuesta: hex, RGB y entradas reflejadas
Use hex cuando necesite un solo token para tokens de estilo o archivos de tema; use rgb cuando un lienzo, biblioteca de gráficos o comprobador de accesibilidad espere canales separados. En caso de éxito la respuesta repite color1 y color2 normalizados como hex de seis dígitos en mayúsculas con almohadilla inicial, la proporción numérica enviada y t como el intervalo unitario usado en el lerp. El resultado mezclado aparece de tres formas: hex como muestra mixta principal, rgb como objeto con campos enteros r g y b, y rgb_string como línea legible rgb paréntesis abierto r coma g coma b paréntesis cerrado para pegar en CSS o notas de diseño. color1_rgb y color2_rgb exponen los canales padre analizados para que las IU dibujen ambos extremos de un degradado sin reanalizar. La etiqueta method es siempre rgb_lerp para que el código posterior pueda ramificar sin olfatear formas. Falta de color1, de color2, de ratio, ratio fuera de cero a cien, y cualquier código hex inválido fallan con invalid_input y no se cobran tras el rechazo del motor. Los mensajes de error nombran el campo para que los clientes API muestren validación de formulario precisa.
Uso de la API, precios, flujos de diseño y límites prácticos
Llame al mezclador gratuito en el navegador para bocetos de paleta, experimentos de tinte de marca y comprobaciones rápidas de mezcla intermedia sin instalar una herramienta de diseño. Solo se admite entrada hex —los colores CSS con nombre y las cadenas rgb entre paréntesis quedan fuera de alcance—, así que normalice aguas arriba si sus datos fuente usan nombres. Envíe un cuerpo JSON con los campos de cadena obligatorios color1 y color2 más el número obligatorio ratio. Se aceptan los alias hex1, hex2, a, b, from, to, percent, amount y mix cuando están documentados, de modo que campos de formularios antiguos se mapean con limpieza. Use la API prepago cuando un generador de temas, pipeline de sistema de diseño, constructor de muestras de comercio electrónico o servicio de activos de marketing necesite un contrato estable bajo saldo KIT a $0.002 por elemento exitoso; los fallos de validación nunca consumen saldo. Combine este endpoint con herramientas de hex a HSL o de colores complementarios cuando el siguiente paso sea una paleta completa, o con comprobadores de contraste cuando el color mezclado deba cumplir WCAG frente al texto. Los autores que publican SDK pueden mapear hex y rgb directamente a selectores de color y tablas de tokens que estudiantes y diseñadores ya esperan.
Casos de integración
Pipelines de temas automatizados
Los scripts de sistemas de diseño llaman a la API prepago para fusionar dos colores semilla en tokens JSON bit-idénticos entre ejecuciones de CI.
Preguntas técnicas
¿Cómo mezclo dos colores hex con este mezclador?
Envíe JSON con color1, color2 y ratio (0–100). Ejemplo: color1 "#FF0000", color2 "#0000FF", ratio 50 devuelve la mezcla intermedia RGB como campos hex y rgb.
¿Qué significa el porcentaje de proporción?
Ratio es el porcentaje de color2 en la mezcla. 0 mantiene color1 puro, 100 produce color2 puro y 50 es una mezcla lineal pareja de cada canal RGB.