Generador de esquema de color tetrádico
Escriba #e74c3c y obtenga cuatro colores en dos parejas opuestas: el rojo con el cian #3cd7e7, y el lima #d7e73c con su propio opuesto, a 0, 60, 180 y 240 grados en la rueda de color. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Hex
- #e74c3c
- Hexadecimal de entrada
- #e74c3c
- Hexadecimales
- #e74c3c, #d7e73c, #3cd7e7, #4c3ce7
- Tonos
- 5,614035, 65,614035, 185,614035, 245,614035
- Desplazamientos
- 0, 60, 180, 240
Este generador de esquema de color tetrádico construye una paleta rectangular de cuatro colores a partir de un único código hexadecimal CSS. Usted introduce un color base como #e74c3c o la forma corta #f00; el motor lo convierte a HSL, mantiene fijas la saturación y la luminosidad, y rota el tono en cuatro pasos deterministas a cero, sesenta, ciento ochenta y doscientos cuarenta grados. Esos desplazamientos colocan dos pares complementarios en la rueda de color, de modo que las cuatro muestras forman un rectángulo tetrádico clásico, no un panel de inspiración aleatorio. Cada respuesta exitosa devuelve el hexadecimal de entrada normalizado, cuatro muestras detalladas con hexadecimal, RGB y HSL, además de arreglos planos hexes y hues para tokens de diseño y variables CSS.
Qué es un esquema tetrádico (rectángulo) y qué contiene la respuesta
Un esquema de color tetrádico, también llamado armonía rectangular, usa cuatro tonos dispuestos como dos pares complementarios en la rueda de color. Partiendo de su tono base h, este generador coloca colores en h más cero grados, h más sesenta grados, h más ciento ochenta grados, y h más doscientos cuarenta grados, y luego reconstruye cada color con la saturación y la luminosidad originales. Esa separación de sesenta grados entre pares crea un rectángulo en lugar de un cuadrado (que usaría pasos de noventa grados).
Los pares complementarios se sitúan uno frente al otro, de modo que la paleta equilibra la presión cálida y fría mientras sigue vinculada al color de marca que usted escribió.
Cómo se lee la entrada hexadecimal y cómo se mantienen reproducibles los cuatro tonos
Los valores pueden incluir u omitir la almohadilla inicial y pueden usar la forma corta de tres dígitos, como f00, que se expande dígito por dígito a ff0000 antes de cualquier conversión. Los dígitos no distinguen mayúsculas de minúsculas y siempre se normalizan a una salida de seis dígitos en minúsculas, para que los goldens y las variables CSS se mantengan estables entre ejecuciones.
Tras el análisis, los canales se convierten a HSL con las fórmulas sRGB estándar; el tono se toma en grados en el círculo de cero a trescientos sesenta, mientras que la saturación y la luminosidad siguen siendo fracciones unitarias que nunca cambian entre los cuatro pasos. Cada desplazamiento se aplica con módulo positivo para que los valores intermedios negativos no puedan filtrarse, y luego HSL se convierte de vuelta a RGB entero con limitación de canal y dos dígitos hexadecimales en minúsculas por canal.
Dónde encajan las paletas tetrádicas en el trabajo de producto, marca e interfaz
Los diseñadores recurren a esquemas tetrádicos cuando una marca necesita más de un solo acento pero debe seguir siendo armoniosa: sitios de marketing, gráficos de varias series, colores de estado de paneles, y sistemas de ilustración a menudo necesitan cuatro tonos relacionados que aun así se sientan intencionales. Los equipos de producto usan la disposición rectangular para derivar colores de hover, enfoque, gráficos y llamadas a la acción a partir de un único hexadecimal corporativo, sin inventar códigos hexadecimales ad hoc en una hoja de cálculo.
Los educadores y estudiantes de diseño lo usan para demostrar pares complementarios y geometría de tonos, sin aplicaciones de escritorio opacas que cambian de algoritmo entre versiones. Combínelo con verificadores de contraste cuando la accesibilidad sea el siguiente paso, y con convertidores de RGB o HSL cuando necesite formatos intermedios para otras herramientas de su stack.
Qué puede hacer con ella
Paletas de marca y marketing
Expanda un hexadecimal corporativo en cuatro colores de armonía rectangular, para campañas, conjuntos de ilustración y páginas de aterrizaje con varios acentos.
Acentos de gráficos y paneles
Derive cuatro colores de serie relacionados a partir de un tono de marca base, para que los gráficos de varias líneas se mantengan equilibrados sin ruido de hexadecimales elegidos a mano.
Preguntas frecuentes
¿Cuánto cuesta el generador de esquema de color tetrádico?
Es gratis en su navegador, en esta página.
¿Cómo se eligen los cuatro tonos?
A partir del tono base h, los colores se colocan en h+0°, h+60°, h+180° y h+240°, con la misma saturación y luminosidad. Esa es la disposición clásica rectangular (tetrádica): dos pares complementarios separados por 60°.
¿Qué formatos hexadecimales se aceptan?
Códigos hexadecimales CSS de tres y seis dígitos, con o sin una almohadilla inicial # (por ejemplo, #e74c3c, e74c3c, #f00, o f00).
¿Es esto lo mismo que un esquema de color cuadrado?
No. Un esquema cuadrado usa pasos de 90°. Este generador usa los desplazamientos rectangulares 0/60/180/240, para que los pares formen un rectángulo no cuadrado en la rueda.
¿La herramienta elige colores a partir de una imagen?
No. Solo rota el tono del hexadecimal que usted proporciona. Para colores dominantes de fotos, use en su lugar un extractor de paleta de imágenes.
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/tetradic \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#e74c3c"}'const res = await fetch("https://api.kit.forhosting.com/color/tetradic", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#e74c3c"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/tetradic",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#e74c3c"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/tetradic", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#e74c3c"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#e74c3c"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/tetradic", 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
{
"hex": "#e74c3c"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.tetradic",
"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.
Límites
hex_max_len | 7 |
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
Qué es un esquema tetrádico (rectángulo) y qué contiene la respuesta
La respuesta incluye input_hex como la forma normalizada de seis dígitos, un objeto base para la primera muestra, un arreglo colors de cuatro objetos cada uno con hex, r, g, b, h, s, l, hue_offset, y las cadenas rgb y hsl, además de arreglos de conveniencia hexes y hues, la lista offsets, scheme fijado a tetradic, el método hue_rotate_rectangle, y un breve recordatorio de la fórmula. No hay un modelo generativo ni muestreo de imagen: el motor construye cuatro muestras exactas a partir de un hexadecimal válido, o rechaza la solicitud con invalid_input. Los casos rechazados incluyen la falta de hexadecimal, valores que no son cadenas, tokens de más de siete caracteres, y cualquier cadena que no sea de tres o seis dígitos hexadecimales con una almohadilla inicial opcional.
Cómo se lee la entrada hexadecimal y cómo se mantienen reproducibles los cuatro tonos
El campo preferido es hex, pero se aceptan los alias color, base e input, de modo que formularios, cadenas de consulta y exportaciones de herramientas de diseño puedan reutilizar el mismo contrato sin renombrar columnas. Los campos opcionales en coma flotante como h, s y l se redondean a un número fijo de decimales, para que las comparaciones de JSON no diverjan en distintos motores de JavaScript. Combine la ejecución gratuita en el navegador de esta página con la API de pago cuando necesite la misma paleta dentro de un pipeline automatizado, un paso de publicación de paquete de tema, o un configurador multi-inquilino de marca blanca que no debe cambiar los tonos en silencio entre despliegues.
Dónde encajan las paletas tetrádicas en el trabajo de producto, marca e interfaz
En esta página el trabajo se ejecuta enteramente en su navegador; a través de la API cada consulta exitosa cuesta $0.002, la validación fallida no se cobra, y nada se almacena después de que se devuelve la respuesta. Esa separación —exploración interactiva gratuita y una API de pago idéntica— coincide con el resto del catálogo tier A del KIT y le permite pasar de una exploración en Figma a un archivo de tema de producción sin cambiar el resultado matemático.
Casos de integración
Tokens de diseño y temas CSS
Genere arreglos reproducibles de hexadecimales y tonos para variables CSS, mapas de Tailwind, y JSON de tokens de diseño registrados en git.