Paleta de matices equidistantes
Cinco colores a partir del matiz 200° quedan separados 72°: el primero es #269dd9 y el último #26d93e. La saturación y la luminosidad no cambian, así ninguna zona de la rueda domina su gráfico. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Hue
- 200
- Cantidad
- 5
- Saturación
- 70
- Luminosidad
- 50
- Paso (°)
- 72
- Esquema
- #269dd9, #8526d9, #d92656, #d9cd26, #26d93e
- Tonos
- 200, 272, 344, 56, 128
Un generador de paleta de matices equidistantes coloca N colores a pasos angulares iguales alrededor de la rueda de color, partiendo del matiz base que usted elija y manteniendo constantes la saturación y la luminosidad. Introduzca un matiz inicial en grados, un recuento entre dos y treinta y seis, y los porcentajes de saturación y luminosidad que deben permanecer iguales en cada muestra; la herramienta calcula el paso como trescientos sesenta dividido entre N, envuelve cada matiz sucesivo en el intervalo semiabierto de cero a trescientos sesenta, convierte cada triplete HSL a sRGB y hexadecimal en minúsculas, y devuelve un array scheme, una lista de matices y objetos ricos por color con desgloses RGB, CSS y HSL. Los equipos de marca que montan series de gráficos multipaso, los desarrolladores front-end que construyen tokens de tema para paneles y los estudiantes de diseño que estudian el espaciado equidistante de matices necesitan ese mismo mapa determinista sin abrir una suite de diseño completa.
Qué es una paleta de matices equidistantes y por qué importan los pasos iguales
El espaciado angular igual en el círculo de matiz es la forma clásica de construir una serie multicolor que no favorece ningún sector de la rueda. Los esquemas complementarios usan ciento ochenta grados, los triádicos ciento veinte y los tetrádicos noventa; esta capacidad generaliza esa idea a cualquier entero N de dos a treinta y seis fijando el paso en trescientos sesenta dividido entre N y avanzando desde su matiz base.
La saturación y la luminosidad se mantienen fijas a propósito: la intención de búsqueda de una paleta de matices equidistantes es la rotación equilibrada del matiz, no inventar rampas de valor o croma, de modo que un inicio vivo de luminosidad media produce compañeros vivos de luminosidad media y un inicio pastel produce compañeros pastel. Cuando la saturación es cero, cada miembro colapsa hacia el gris porque los colores acromáticos no tienen un matiz significativo que rotar; es física del color correcta, no un error.
Los docentes suelen emparejar esta herramienta con generadores de esquemas fijos para que los alumnos vean cómo cambiar N altera la tensión visual y cómo el mismo matiz base puede alimentar una serie de gráficos de cinco paradas o un mapa cualitativo de doce. Los sistemas de diseño usan esta estructura cuando un producto necesita una paleta categórica que escale con el recuento de series en lugar de codificar tres o cuatro acentos de marca.
Consejos prácticos, límites y búsquedas relacionadas
Parta del matiz de marca o de interfaz en el que ya confía en lugar de una elección arbitraria en la rueda; el primer miembro es siempre el matiz base en el desplazamiento cero tras el envoltorio, de modo que el índice cero es su color de identidad en términos HSL. Prefiera recuentos enteros que coincidan con el tamaño de su serie de gráficos o leyenda; cinco paradas dan pasos de setenta y dos grados, seis dan sesenta, ocho dan cuarenta y cinco y doce dan treinta.
Mantenga la saturación y la luminosidad dentro de los rangos que su pipeline de accesibilidad ya valida—el espaciado equidistante de matices no garantiza contraste WCAG frente a un fondo fijo, así que combine esta paleta con un comprobador de contraste cuando el texto se asiente sobre rellenos sólidos. No espere salida solo complementaria o solo triádica en esta página: esos esquemas fijos son herramientas separadas con su propia intención SEO; use esta capacidad cuando N sea un parámetro que usted controla.
Los colores CSS con nombre y las cadenas hex quedan fuera de alcance aquí; conviértalos primero a matiz, saturación y luminosidad si parte de un hex de token. Al escribir pruebas, cubra al menos un caso multipaso vívido, un count de dos (división de ciento ochenta grados), una saturación casi gris y un count inválido deliberado para que queden fijadas tanto la matemática del espaciado como la validación.
Esta página se dirige a quienes buscan una paleta de matices equidistantes, un generador de rueda de matiz igual o una herramienta gratuita de N colores en la rueda en línea; no es un extractor de paleta de imagen ni un convertidor multi-espacio completo.
Qué puede hacer con ella
Series categóricas de gráficos y paneles
Los equipos de datos eligen un matiz base de marca y un recuento N de series, luego insertan la lista hex del scheme en bibliotecas de gráficos para colores categóricos equidistantes.
Andamiaje de tokens de diseño para temas
Los desarrolladores front-end generan N propiedades personalizadas CSS desde un matiz base con saturación y luminosidad fijas para kits de interfaz multiacento.
Preguntas frecuentes
¿Qué es una paleta de matices equidistantes?
N colores situados a pasos angulares iguales en el círculo de matiz.
¿Es lo mismo que esquemas triádicos o complementarios?
Esta capacidad generaliza a cualquier N permitido que usted elija.
¿Es gratuita la herramienta de paleta de matices equidistantes?
La herramienta del navegador es gratuita y se ejecuta en local.
¿Cuántos grados separan cada color de la paleta?
El paso es 360 grados dividido entre el número de colores. Con cinco colores el paso es de 72°, de modo que un matiz base de 200° sigue en 272°, 344°, 56° y 128°, dando la vuelta a la rueda.
¿Por qué todos los colores me salen grises?
Porque la saturación está en 0. Un color sin saturación no tiene matiz que girar, así que todas las muestras se reducen al mismo gris. Suba la saturación, por ejemplo al 70 %, y los matices vuelven a separarse.
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/hue-wheel \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":200,"count":5,"saturation":70,"lightness":50}'const res = await fetch("https://api.kit.forhosting.com/color/hue-wheel", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hue-wheel",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hue-wheel", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":200,"count":5,"saturation":70,"lightness":50}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":200,"count":5,"saturation":70,"lightness":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hue-wheel", 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
{
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hue_wheel",
"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
Una entrada no válida—campos ausentes, recuento no entero, recuento fuera del rango permitido, saturación o luminosidad fuera de cero a cien—falla con un error invalid_input claro en lugar de inventar una paleta. La ruta es aritmética pura—sin red, sin semillas aleatorias, sin dependencia del reloj—de modo que el ejecutor gratuito del navegador y la API de prepago devuelven el mismo JSON cada vez que la invoca.
Qué es una paleta de matices equidistantes y por qué importan los pasos iguales
La respuesta siempre indexa los miembros desde cero e informa offset_deg y hue para que la documentación, los tokens de diseño y las pruebas automatizadas puedan afirmar posiciones exactas en la rueda sin reordenar a mano.
Cómo invocar la API y qué recibe de vuelta
Envíe un cuerpo JSON con cuatro números finitos obligatorios: hue como el ángulo base en grados (se acepta cualquier valor finito y se envuelve en el intervalo semiabierto de cero a trescientos sesenta), count como entero de dos a treinta y seis, saturation como porcentaje de cero a cien, y lightness como porcentaje de cero a cien. Las cadenas numéricas se aceptan igual que los números JSON. En caso de éxito la respuesta devuelve el matiz normalizado, el recuento eco, la saturación y la luminosidad redondeadas, step_deg igual a trescientos sesenta dividido entre count con redondeo decimal fijo, un array scheme de cadenas #rrggbb en minúsculas en orden de recorrido, un array hues de los ángulos de cada miembro, un array colors de objetos ricos cada uno con index, offset_deg, hue, hex, hex6, r, g, b, rgb, css y hsl, más un mensaje breve en inglés y un array steps que documenta la normalización, el tamaño del paso y cada conversión. La validación fallida—campo ausente, valor no finito, count no entero, count fuera de dos a treinta y seis, o saturación o luminosidad fuera de cero a cien—devuelve invalid_input y no se cobra. El precio es un fijo de $0.002 por petición exitosa con unidad item.
Consejos prácticos, límites y búsquedas relacionadas
Las tareas fallidas que devuelven invalid_input no consumen saldo prepago, lo que mantiene baratos los scripts de diseño exploratorio y la validación de formularios mientras se pegan valores imperfectos.
Casos de integración
Ejercicios de rueda de color en el aula
Los estudiantes comparan sectores iguales dibujados a mano con step_deg determinista y afirman arrays hues en deberes o katas de programación.
Preguntas técnicas
¿Qué entradas son obligatorias?
Cuatro números: hue (grados, envuelto en [0, 360)), count (entero 2–36), saturation (0–100%) y lightness (0–100%). Los valores no válidos devuelven invalid_input.
¿Cómo se calcula el tamaño del paso?
step_deg = 360 / count con redondeo decimal estable. El miembro i usa hue wrap(base + i × step_deg).