Fusione dos colores con el modo Superponer
Superponer #FFCC00 sobre la base #336699 da #66A333, es decir rgb(102, 163, 51): los canales oscuros de la base se multiplican y los claros se tratan como trama, lo que añade contraste en lugar de promediar. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Base
- #336699
- Fusión
- #FFCC00
- Hex
- #66A333
- Cadena RGB
- rgb(102, 163, 51)
- Modo de cálculo
- overlay
Este mezclador combina un color base y un color de mezcla mediante la operación Superponer habitual en programas gráficos. 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.
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.
Preguntas frecuentes
¿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.
¿Por qué el modo superponer oscurece unos canales y aclara otros?
Cada canal de la base decide su propia regla. Si está en la mitad o por debajo se multiplica con el color de mezcla y se oscurece; si está por encima se trata como trama y se aclara. Por eso #336699 con #FFCC00 da #66A333.
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/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. |
Notas técnicas
Use resultados deterministas en su flujo de diseño
El uso en el navegador es gratuito y cada solicitud automatizada a la API cuesta $0.002.
Casos de integración
Cree datos para pruebas
Genere resultados RGB deterministas para pruebas unitarias de fusión y capturas multiplataforma.
Preguntas técnicas
¿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.