Fusione dos colores con el modo Superponer
Este mezclador combina un color base y un color de mezcla mediante la operación Superponer habitual en programas gráficos.
Ejecutar — gratis
Cada canal rojo, verde y azul se evalúa por separado: los canales oscuros de la base usan multiplicación y los claros usan trama. Introduzca colores hexadecimales de tres o seis dígitos y obtenga un resultado normalizado, canales RGB numéricos y una cadena RGB lista para CSS. El cálculo es determinista, no requiere cargar imágenes y valida ambas entradas antes de responder.
Cómo elige Superponer su fórmula
Superponer aumenta el contraste; no calcula el promedio de dos colores. La calculadora convierte primero cada componente hexadecimal en un valor entre cero y uno. Después examina por separado los componentes rojo, verde y azul del color base. Si el valor base es igual o inferior a la mitad, aplica la rama de multiplicación: dos por la base por la mezcla. Si supera la mitad, aplica la rama de trama: uno menos dos por las distancias restantes de ambos componentes respecto de uno. La decisión se toma para cada canal, por lo que un mismo resultado puede multiplicar el rojo y aplicar trama al azul. Finalmente, el valor normalizado vuelve al intervalo de 0 a 255 y se redondea al entero más próximo. Esta secuencia explícita ofrece resultados reproducibles y corresponde a la definición convencional sin alfa. El orden importa: intercambiar base y mezcla puede cambiar la rama elegida y producir otro color.
Introduzca los colores e interprete el resultado
Indique un color base y otro de mezcla en notación hexadecimal. Se aceptan tanto seis dígitos, por ejemplo #336699, como la forma abreviada de tres, por ejemplo #369. La almohadilla inicial es opcional, pero se rechazan canales alfa, nombres de color, funciones CSS y espacios entre los dígitos. Los valores abreviados se expanden antes del cálculo y las entradas aceptadas se devuelven con seis dígitos en mayúsculas, lo que mantiene uniformes los registros y las pruebas. La respuesta contiene el color combinado en hexadecimal, un objeto RGB con enteros y una cadena rgb(...) que puede pegar en CSS. También repite las entradas normalizadas e identifica el modo. La validación se completa antes de calcular. Si falta un campo, no es texto, contiene caracteres inválidos o tiene otra longitud, se devuelve un error de entrada inválida en vez de adivinar. Ese rigor resulta útil en automatizaciones donde un color plausible pero incorrecto sería difícil de detectar.
Use resultados deterministas en su flujo de diseño
Use esta calculadora cuando una especificación indique Superponer, pero usted necesite un color plano concreto y no un documento por capas. Sirve para generar variables de tema, comprobar resultados de un editor gráfico, crear valores esperados para pruebas de renderizado o preparar un color alternativo para sistemas que no conservan modos de fusión. Como la operación solo trabaja con canales, no examina píxeles, opacidad, perfiles de color, degradados ni elementos cercanos. Si una capa tiene transparencia, componga el alfa aparte o utilice un flujo de imágenes que comprenda todas las capas. El cálculo opera directamente sobre canales RGB codificados; no linealiza la luz sRGB ni mezcla en un espacio perceptual. Es una decisión intencionada para coincidir con la fórmula convencional esperada por diseñadores. El uso en el navegador es gratuito y cada solicitud automatizada a la API cuesta $0.002. Ambos canales ejecutan el mismo cálculo puro, sin red, azar ni reloj, de modo que entradas idénticas siempre generan la misma salida.
Qué puede hacer con ella
Aplane una variable de diseño
Convierta una base y una capa Superponer en un único color hexadecimal estable para su tema o biblioteca de componentes.
Compruebe un programa gráfico
Compare el resultado de una aplicación con un cálculo independiente por canal durante el control visual.
Cree datos para pruebas
Genere resultados RGB deterministas para pruebas unitarias de fusión y capturas multiplataforma.
Preguntas frecuentes
¿Cuánto cuesta una solicitud a la API?
Cada solicitud a la API cuesta $0.002. También puede ejecutar gratis el mismo cálculo en su navegador.
¿Importa el orden de entrada?
Sí. El color base decide si cada canal usa multiplicación o trama, por lo que invertir los colores puede cambiar el resultado.
¿Qué formatos de color se aceptan?
Se admiten colores RGB hexadecimales de tres o seis dígitos, con o sin # inicial. No se aceptan alfa, nombres ni funciones CSS.
¿Cómo se redondean los canales?
Cada resultado normalizado se multiplica por 255, se redondea al entero más próximo y se formatea como hexadecimal en mayúsculas.
¿Combina imágenes o transparencia?
No. Solo combina dos colores RGB opacos; las matrices de píxeles, el alfa, los degradados y los perfiles quedan fuera de esta capacidad.
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/overlay \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":"#336699","blend":"#FFCC00"}'const res = await fetch("https://api.kit.forhosting.com/color/overlay", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": "#336699",
"blend": "#FFCC00"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/overlay",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": "#336699",
"blend": "#FFCC00"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/overlay", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":"#336699","blend":"#FFCC00"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":"#336699","blend":"#FFCC00"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/overlay", 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
{
"base": "#336699",
"blend": "#FFCC00"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.overlay",
"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. |