Genere una paleta de colores triádica desde un color hexadecimal
Escriba #336699 y obtenga sus dos compañeros triádicos, #993366 y #669933, girados 120 y 240 grados en la rueda de color. La saturación y la luminosidad no cambian, así que los tres colores se leen como una familia. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color
- #336699
- Color base
- #336699
- Colores triádicos
- #993366, #669933
- Paleta
- #336699, #993366, #669933
- Desfases de tono
- 120, 240
Este generador de paletas triádicas toma un color hexadecimal y calcula los dos tonos situados exactamente a 120 y 240 grados en la rueda cromática. Conserva la saturación y la luminosidad del color base para crear una familia equilibrada de tres colores, sin decisiones aleatorias ni cálculos manuales. Introduzca un valor hexadecimal estándar de tres o seis dígitos, con almohadilla inicial o sin ella. El resultado incluye la base normalizada, los dos colores complementarios generados, la paleta completa y los desplazamientos de tono. Los formatos no válidos producen un error de entrada claro, por lo que la herramienta resulta adecuada tanto para diseño interactivo como para procesos automatizados.
Cómo se genera una paleta triádica
Una paleta triádica contiene tres tonos distribuidos uniformemente en un modelo de color circular. Imagine los vértices de un triángulo equilátero sobre una rueda cromática: cada salto cubre 120 grados. El generador primero valida y normaliza el color hexadecimal.
La notación de tres caracteres se amplía a seis, de modo que #369 se convierte en #336699, y las letras pasan a minúsculas para ofrecer resultados previsibles. Después, los canales rojo, verde y azul se convierten en tono, saturación y luminosidad. Solo gira el tono: un color recibe 120 grados y el otro 240, con retorno correcto al superar 360.
La saturación y la luminosidad permanecen iguales, por lo que se conserva la intensidad general. Finalmente, los colores HSL vuelven a notación hexadecimal de seis dígitos. La respuesta separa los dos valores calculados de la paleta completa.
No intervienen azar, red, fecha ni estado guardado; la misma entrada siempre genera la misma salida.
Cómo elegir y aplicar los colores generados
Comience con un color base que ya tenga una función definida, como el primario de una marca, el tono principal de una ilustración o un acento de interfaz. Aunque los tres colores están equilibrados matemáticamente, no tienen que ocupar la misma superficie visual. Una composición práctica suele reservar el papel dominante para la base, emplear un compañero en elementos secundarios y dedicar el tercero a pequeños destacados.
Compruebe el contraste del texto por separado: la armonía de tonos no garantiza combinaciones legibles. Como los tres valores conservan la misma luminosidad HSL, su brillo percibido puede variar mucho, especialmente entre amarillos y azules. Por ello, conviene tratar la tríada como punto de partida y crear variantes más claras u oscuras para estados y superficies.
Si se parte de un gris, los compañeros también serán grises, pues una saturación nula no ofrece un tono visible que girar.
Formatos admitidos, errores y automatización
Se aceptan exactamente tres o seis dígitos hexadecimales, con almohadilla inicial opcional, por ejemplo #f06, f06, #ff0066 o FF0066. Los espacios exteriores se eliminan antes de validar. Se rechazan los nombres CSS, las funciones RGB o HSL, los valores hexadecimales con alfa, los prefijos 0x, las cadenas vacías, los números y cualquier carácter no hexadecimal.
Estas reglas estrictas evitan interpretaciones ambiguas. Después de generar, compruebe el contraste, el significado cultural y la jerarquía de marca según el contexto final.
Qué puede hacer con ella
Crear acentos para una marca
Convierta un color hexadecimal de marca en dos acentos equilibrados para campañas, ilustraciones y elementos secundarios de identidad.
Construir tokens de color de interfaz
Genere candidatos deterministas para tokens secundarios y terciarios a partir de un color principal durante la creación de temas.
Preparar colores para series de gráficos
Cree una paleta inicial de tres tonos para paneles y compruebe después el contraste y la accesibilidad de la visualización.
Preguntas frecuentes
¿Qué es una paleta de colores triádica?
Es un conjunto de tres tonos separados por 120 grados en la rueda cromática, lo que crea una relación uniforme.
¿Qué formatos de color se admiten?
Use notación hexadecimal de tres o seis dígitos, con almohadilla inicial o sin ella, como #369 o 336699.
¿Por qué una base gris produce compañeros grises?
El gris tiene saturación cero, así que girar su tono matemático no produce una diferencia de color visible.
¿Puedo escribir un nombre de color como rojo en lugar de un código?
No. Solo se aceptan códigos hexadecimales de tres o seis dígitos, con o sin almohadilla, como #f06 o #ff0066. Los nombres de color, las notaciones RGB o HSL y los códigos con transparencia se rechazan con un aviso claro.
¿Por qué la paleta empieza con mi propio color?
El color base va primero, normalizado, seguido de los dos compañeros a 120 y 240 grados. Para #336699 la paleta completa es #336699, #993366 y #669933, así su color actual queda intacto.
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/triadic-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#336699"}'const res = await fetch("https://api.kit.forhosting.com/color/triadic-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#336699"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/triadic-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#336699"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/triadic-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#336699"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#336699"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/triadic-palette", 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": "#336699"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.triadic_palette",
"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
Cómo elegir y aplicar los colores generados
Los desarrolladores pueden usar directamente palette o leer triadic_colors cuando el token base deba permanecer intacto.
Formatos admitidos, errores y automatización
Proporcione el color base en el campo color como cadena JSON. Una respuesta correcta contiene base_color, triadic_colors, palette y hue_offsets. La base aparece expandida y normalizada; triadic_colors contiene exactamente los dos colores generados; palette coloca primero la base y después los giros de 120 y 240 grados. Los datos no válidos reciben el código invalid_input en vez de una paleta supuesta. El navegador resulta útil para explorar y cada elemento correcto de la API cuesta $0.002 con el mismo algoritmo determinista.
Preguntas técnicas
¿El resultado incluye el color base?
Sí. palette contiene la base normalizada y ambos compañeros, mientras que triadic_colors contiene solo los dos colores generados.
¿Cuánto cuesta una llamada a la API?
Cada elemento procesado correctamente cuesta $0.002. La versión del navegador ejecuta localmente el mismo cálculo determinista.