Generador de colores análogos
Indique un color base y un ángulo y obtendrá sus dos vecinos en el círculo cromático: #3366cc con 30 grados da #33b2cc y #4c33cc, con la misma saturación y luminosidad. Una familia de tres colores armónica para interfaces y marcas. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color base en hexadecimal
- #3366cc
- Ángulo
- 30
- Paleta
- #33b2cc, #3366cc, #4c33cc
Los colores análogos se sitúan uno junto a otro en el círculo de tono, por lo que comparten una familia de matices y resultan naturalmente armoniosos en interfaces, sistemas de marca e ilustración. Este generador toma un color base hex CSS y un ángulo positivo de giro de tono en grados, convierte el base a HSL y luego construye los dos vecinos restando y sumando ese ángulo mientras mantiene fijas la saturación y la luminosidad. El resultado es una paleta de tres muestras —menos, base y más— devuelta como hex, enteros RGB, componentes HSL y un array palette listo para usar. La práctica clásica del diseño usa treinta grados para una familia cerrada y pasos mayores cuando se desea más separación sin saltar al contraste complementario. Los códigos hex no válidos y los ángulos fuera de rango fallan con un error de validación claro en lugar de inventar una paleta.
Cómo funcionan los giros de tono análogos
Comience con un color base escrito como cadena hex CSS, por ejemplo #3366cc o la forma corta #36c. El resolvedor expande el hex de tres dígitos, analiza los canales rojo, verde y azul en el rango de cero a doscientos cincuenta y cinco, y convierte esa tripleta RGB a HSL usando las fórmulas estándar de CSS y W3C, de modo que el tono vive en grados sobre un círculo de cero a trescientos sesenta mientras la saturación y la luminosidad son porcentajes.
El parámetro angle es un número positivo de grados estrictamente mayor que cero y como máximo ciento ochenta. Los dos vecinos análogos se forman moviendo el tono a tono base menos ángulo y tono base más ángulo, envolviendo a través de cero cuando el recorrido cruza el borde rojo de la rueda, y dejando intactas la saturación y la luminosidad para que la familia permanezca en la misma banda de croma y valor.
Cada tripleta HSL resultante se convierte de vuelta a RGB entero con el mismo recorrido de tono a RGB usado por los módulos de color del navegador, y luego se formatea como hex en minúsculas, una cadena rgb() y una cadena hsl().
Qué envía y qué recibe
Envíe un campo color obligatorio como cadena hex y un campo angle obligatorio como número finito de grados. Las formas de color válidas son tres o seis dígitos hexadecimales con almohadilla inicial opcional; las mayúsculas se ignoran y la salida siempre se normaliza a una almohadilla de seis dígitos en minúsculas. El ángulo debe ser mayor que cero y como máximo ciento ochenta para que los dos vecinos sigan siendo distintos y no colapsen en un giro de ciento ochenta de estilo complementario que sería una intención de armonía diferente.
Las comprobaciones típicas incluyen un azul medio #3366cc con un ángulo de treinta grados para una familia fría clásica, rojo puro #ff0000 con treinta grados para vecinos naranja cálido y magenta, y un hex corto de tres dígitos para confirmar la expansión.
Dónde aparecen las paletas análogas en el trabajo real
Los diseñadores de producto construyen estados de componentes, series de gráficos y degradados de cabecera de marketing que necesitan tonos emparentados sin la alta tensión de los pares complementarios; un ángulo fijo mantiene los tokens reproducibles entre sistemas de diseño. Los equipos de marca derivan colores de marca secundarios y terciarios a partir de un hex primario cuando la guía de estilo solo publica una muestra oficial y aun así quiere una familia controlada para ilustración y plantillas sociales.
Los ingenieros de frontend generan propiedades personalizadas CSS y mapas de tokens al estilo Tailwind a partir de un único color semilla para que los temas claro y oscuro permanezcan en la misma espina de tono mientras solo cambia la luminosidad en otras partes. Los autores de visualización de datos asignan colores de series que permanecen distinguibles y cohesionados en gráficos categóricos donde los choques complementarios implicarían oposición en lugar de agrupación.
Los facilitadores de cursos y talleres enseñan teoría del color con ejemplos en vivo: los estudiantes introducen su hex favorito, prueban treinta frente a cuarenta y cinco frente a sesenta grados, y ven de inmediato cuánto recorre la familia alrededor de la rueda. Si más adelante necesita esquemas complementarios o triádicos, solo conversión de HSL a RGB, búsqueda del color con nombre CSS más cercano o comprobaciones de contraste WCAG, trátelos como intenciones de búsqueda y páginas separadas en lugar de sobrecargar esta página del generador de análogos.
Qué puede hacer con ella
Tokens de marca secundarios y terciarios
Derive dos tonos de marca vecinos a partir de un hex primario y un ángulo fijo para que las guías de estilo y los sistemas de diseño se mantengan coherentes entre marketing y la interfaz de producto.
Paletas para temas de interfaz y series de gráficos
Genere variables CSS cohesionadas o colores de series de gráficos a partir de una única semilla sin la tensión de alto contraste de los pares complementarios.
Ejercicios y talleres de teoría del color
Permita que los estudiantes introduzcan un hex y prueben giros de 30°, 45° y 60° para ver cómo las familias análogas recorren la rueda con saturación y luminosidad fijas.
Preguntas frecuentes
¿Qué es una paleta de colores análogos?
Una paleta análoga son tres (o más) colores que se sitúan uno junto a otro en la rueda de tono. Esta herramienta construye exactamente dos vecinos de su base girando el tono ±ángulo mientras mantiene fijas la saturación y la luminosidad.
¿Qué ángulo debo usar?
Treinta grados es la familia cerrada clásica usada en muchos sistemas de diseño. Valores mayores como 45 o 60 abren más separación; el rango aceptado es mayor que 0 y como máximo 180 grados.
¿Qué formatos de color se aceptan?
Solo hex CSS: #rgb o #rrggbb, con o sin la almohadilla inicial.
¿El generador cambia la saturación o la luminosidad?
No. Solo el tono se mueve en ±ángulo. La saturación y la luminosidad de la base se conservan en ambos vecinos para que la familia permanezca en la misma banda de croma y valor.
¿Cuánto cuesta?
La herramienta del navegador es gratuita y se ejecuta localmente.
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/analogous \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","angle":30}'const res = await fetch("https://api.kit.forhosting.com/color/analogous", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"angle": 30
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/analogous",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"angle": 30
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/analogous", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","angle":30}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","angle":30}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/analogous", 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": "#3366cc",
"angle": 30
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.analogous",
"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 funcionan los giros de tono análogos
La respuesta también repite el color base limpio, el ángulo numérico, muestras con nombre para base, analogous_minus y analogous_plus, un array palette de tres elementos ordenado del menos más frío al más más cálido respecto a la dirección del giro, y un campo formula compacto para documentación y depuración. La canalización es aritmética pura determinista de punto flotante: sin semillas aleatorias, sin marcas de reloj, sin llamadas de red y sin deriva de modelo, de modo que entradas idénticas producen siempre JSON idéntico. Las formas hex con alfa, los caracteres no hex, el color ausente, el ángulo ausente, NaN, Infinity, el ángulo cero y los ángulos por encima de ciento ochenta se rechazan con invalid_input.
Qué envía y qué recibe
El campo color también acepta los alias hex y base, de modo que el JSON de temas existente que guarda claves hex o base puede llamar al mismo contrato sin paso de renombrado. En caso de éxito, la carga útil incluye color como el hex base normalizado, angle limpio para un JSON estable, base con rol hex r g b h s l rgb y hsl, analogous_minus y analogous_plus con la misma forma de muestra, palette como tres cadenas hex, palette_hsl como tres objetos h s l, y formula describiendo el recorrido RGB a HSL a giro. El precio de las llamadas API exitosas es la base publicada de $0.002 por artículo; los fallos de validación no consumen saldo prepagado.
Dónde aparecen las paletas análogas en el trabajo real
Como esta capacidad es un motor parse puro, el precio de la API es la base publicada de $0.002 por artículo exitoso y la validación fallida no consume saldo.