Buscador de color complementario
Encuentre en un paso el color opuesto al suyo en el círculo cromático: el rojo puro #FF0000 da el cian #00FFFF, con la misma saturación y luminosidad, en hexadecimal, RGB y HSL. Práctico para crear acentos a partir del color de una marca. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color de origen como hex
- #FF0000
- Hexadecimal
- #00FFFF
- Dígitos hex
- 00FFFF
- Resistencia (Ω)
- 0
- G
- 255
Diseñadores, desarrolladores front-end y equipos de marca suelen necesitar el color que queda justo frente a una muestra dada en la rueda de tonos: pares para botones y fondos, tokens de acento a partir de un primario de marca, o demostraciones didácticas de la teoría clásica del color. Este buscador de color complementario acepta un código hex como #FF0000 o la forma corta #f00, una cadena rgb(r,g,b) o los canales rojo, verde y azul por separado de cero a doscientos cincuenta y cinco; convierte el origen en tono, saturación y luminosidad, gira el tono exactamente ciento ochenta grados manteniendo fijas saturación y luminosidad, y devuelve el color complementario como hex, canales RGB, componentes HSL y cadenas CSS listas para pegar.
Cómo introducir un color y cómo se calcula el tono opuesto
La entrada hex admite tres o seis dígitos hexadecimales con o sin almohadilla inicial, de modo que funcionan tanto #FF0000 como FF0000, y las formas cortas #f00 y f00. Se ignora mayúsculas y minúsculas. También puede enviar una cadena rgb(...) o rgba(...), o un triple separado por comas como 255,0,0; si hay alfa, se ignora en el cálculo del complemento.
Tras resolver el origen a canales sRGB enteros, el motor convierte a HSL con la misma ruta max-min-croma usada en CSS y en pilas gráficas: la luminosidad es la mitad de la suma de los canales normalizados máximo y mínimo, la saturación es cero para grises y, en caso contrario, el croma escalado por la fórmula HSL estándar, y el tono es el ángulo de sector en grados de cero a trescientos sesenta.
El complemento se forma sumando ciento ochenta grados al tono módulo trescientos sesenta, dejando saturación y luminosidad sin cambio, y convirtiendo ese triple HSL de nuevo a enteros RGB y a un código hex de seis dígitos en mayúsculas.
Lectura del original, del complemento y de los campos de conveniencia
En caso de éxito la respuesta incluye un objeto original que describe el color de origen analizado y un objeto complement que describe el color opuesto. El campo source registra si el análisis usó hex, una cadena rgb o canales separados. El rojo puro #FF0000 produce cian #00FFFF; el verde puro complementa hacia magenta; el azul puro complementa hacia amarillo.
Los grises acromáticos conservan el mismo RGB tras la rotación porque la saturación es cero—solo avanza el ángulo de tono reportado en ciento ochenta grados.
Usos en diseño y límites prácticos
Llame al buscador de color complementario gratuito en el navegador para comprobar paletas, demos de clase y experimentos de acento de marca sin instalar una biblioteca de color. Prefiera este extremo cuando la intención de búsqueda sea específicamente color complementario u opuesto en la rueda de tonos; para solo hex a HSL use el convertidor dedicado hex a HSL, para RGB a HSL el convertidor RGB a HSL, y para conversión multiformato entre HEX, RGB, HSL, LAB y CMYK el convertidor de color más amplio del catálogo.
Combine complementos con verificadores de contraste al construir temas accesibles, o alimente acentos opuestos a canales de tokens que mantienen la luminosidad fija al invertir primarios de marca. Quienes publiquen SDKs pueden mapear hex y RGB de nivel superior directamente a controles de formulario o propiedades personalizadas CSS sin reimplementar el análisis de color y la rotación HSL en cada lenguaje.
Qué puede hacer con ella
Acentos de marca desde un hex primario
Convierta un primario de marca en un acento opuesto fiable para botones, gráficos y bloques de marketing sin elegir muestras a mano cada vez.
Preguntas frecuentes
¿Cómo hallo el color complementario de un código hex?
La respuesta incluye complement.hex (y hex de nivel superior) más RGB y HSL del tono opuesto.
¿Puedo enviar canales RGB en lugar de hex?
Sí. Proporcione r, g y b entre 0 y 255, o una cadena como rgb(255,0,0). Los tres canales son obligatorios al usar entrada por canales.
¿Qué ocurre si el valor de color no es válido?
Hex mal formado, longitud incorrecta, caracteres no hex, campos ausentes y canales fuera de 0–255 se rechazan y no se cobran.
¿Es gratuito el buscador de color complementario?
La herramienta del navegador se ejecuta gratis en su dispositivo.
¿Cuál es el color complementario del gris?
El gris no tiene saturación, así que su complementario conserva exactamente los mismos valores RGB. Solo el ángulo de tono indicado avanza 180 grados; lo que se ve en pantalla no cambia.
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/complementary \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#FF0000","hex":"valor-ejemplo"}'const res = await fetch("https://api.kit.forhosting.com/color/complementary", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#FF0000",
"hex": "valor-ejemplo"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/complementary",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#FF0000",
"hex": "valor-ejemplo"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/complementary", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#FF0000","hex":"valor-ejemplo"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#FF0000","hex":"valor-ejemplo"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/complementary", 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
{
"color": "#FF0000",
"hex": "valor-ejemplo"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.complementary",
"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
Los valores de color no válidos—hex mal formado, canales fuera de rango o un campo ausente—fallan con un error claro de invalid_input para que los datos erróneos nunca se recorten en silencio.
Cómo introducir un color y cómo se calcula el tono opuesto
Proporcione un campo de cadena llamado color (alias hex, value, colour e input) o los tres canales numéricos r, g y b (alias red, green y blue). La entrada por canales exige los tres componentes en el rango inclusivo de cero a doscientos cincuenta y cinco; los números pueden llegar como números JSON o cadenas numéricas. 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.
Lectura del original, del complemento y de los campos de conveniencia
Cada paquete lleva hex con almohadilla y seis dígitos en mayúsculas, hex_digits sin la almohadilla, canales r, g y b, h, s y l para tono en grados y saturación y luminosidad en por ciento, los nombres largos hue, saturation y lightness, un objeto hsl anidado y una cadena rgb_css como rgb(0, 255, 255). Para encadenar con rapidez, los mismos valores del complemento se repiten en el nivel superior como hex, r, g, b, h, s, l, hsl y rgb_css de modo que el código de interfaz y los evaluadores puedan leer una forma plana sin anidación. El campo hue_rotation_deg es siempre ciento ochenta, y method es siempre hue_rotate_180 para que los enrutadores puedan ramificar sin inspeccionar formas. Datos de color ausentes, basura no hex, longitud hex incorrecta y canales fuera de cero a doscientos cincuenta y cinco fallan con invalid_input y no se cobran tras el rechazo del motor.
Uso de la API, precios, flujos de diseño y límites prácticos
Envíe un cuerpo JSON con color igual a una cadena hex o rgb, o con r, g y b como valores de canal. Use la API prepago cuando un sistema de diseño, generador de temas, herramienta de variantes de comercio o canal de accesibilidad necesite un contrato estable bajo saldo KIT a $0.002 por ítem exitoso; los fallos de validación nunca consumen saldo tras el rechazo del motor.
Casos de integración
Temas y canales de tokens de diseño
La automatización que almacena colores como hex o RGB deriva tokens complementarios con JSON determinista para variantes de tema claro y oscuro.
Enseñanza de teoría del color y evaluación
Cursos y evaluaciones de código contrastan las respuestas complementarias del alumnado con fixtures estables, con invalid_input cuando el valor de color está mal formado.
Preguntas técnicas
¿Cómo se calcula el complemento?
El motor convierte el color a HSL, suma 180 grados al tono (módulo 360), mantiene saturación y luminosidad, y vuelve a RGB y hex. method es siempre hue_rotate_180.