Generador de paradas de color para degradados
Obtenga todas las paradas de color entre dos extremos: de #FF0000 a #0000FF en 5 paradas resultan #BF0040 al 25 %, #800080 al 50 % y #4000BF al 75 %, con ambos extremos incluidos. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
El generador de paradas de color para degradados convierte dos colores extremos en una secuencia completa y predecible para CSS, tokens de diseño, gráficos, canvas e ilustraciones programáticas. Indique un color inicial, uno final y el número total de paradas. El resultado incluye ambos extremos y todos los colores intermedios, cada uno con su posición porcentual.
Cree una lista completa a partir de dos colores extremos
Un degradado suele comenzar con una instrucción de diseño sencilla: pasar de un color de marca a otro mediante una cantidad concreta de pasos. Convertir esa indicación en datos reutilizables resulta tedioso cuando hay que calcular de forma coherente cada color intermedio y cada posición. Este generador recibe un color hexadecimal inicial, uno final y el número total de paradas que usted necesita.
Incluye el inicio en el cero por ciento y el final en el cien por ciento, y distribuye las demás paradas en intervalos porcentuales iguales. Cada resultado se normaliza a notación hexadecimal de seis dígitos en mayúsculas; por ello, una abreviatura como #f00 produce el valor estable #FF0000. La matriz devuelta se puede transformar directamente en degradados CSS, definiciones SVG, código canvas, configuraciones de gráficos o procesos de creación de tokens.
Como la cantidad incluye ambos extremos, solicitar cinco paradas genera posiciones de 0, 25, 50, 75 y 100 por ciento. Esta regla hace evidente el tamaño de la respuesta y evita elementos ocultos que alterarían los índices posteriores.
Comprenda el método de interpolación determinista
Los colores se interpolan por separado en los canales rojo, verde y azul. Para cada posición, el generador calcula la distancia proporcional entre el valor inicial y el final de cada canal y redondea el resultado al entero válido más cercano, entre 0 y 255. Este procedimiento se conoce habitualmente como interpolación RGB lineal.
Es deliberadamente simple y reproducible: no intervienen el azar, consultas de perfiles de color, dependencias del renderizado del navegador ni servicios externos. Las posiciones porcentuales se obtienen al dividir el índice de la parada por el número de intervalos; los decimales periódicos se redondean a seis posiciones. Así, una cantidad de cuatro muestra las paradas centrales en 33.333333 y 66.666667 por ciento sin exponer artefactos molestos de coma flotante.
RGB lineal no pretende ser un modelo de color perceptualmente uniforme; los pasos numéricos iguales pueden no parecer igual de luminosos.
Valide la entrada e integre las paradas obtenidas
Los dos campos de color aceptan tres o seis dígitos hexadecimales y pueden llevar una almohadilla inicial. Se elimina el espacio alrededor del valor, pero se rechazan los espacios internos, los canales alfa, los nombres de colores y cualquier carácter no hexadecimal. La cantidad debe ser un entero real entre 2 y 256.
Exigir al menos dos paradas garantiza que ambos extremos tengan posiciones significativas, mientras que el límite superior mantiene predecibles el tamaño de salida y el tiempo de ejecución. Una respuesta correcta repite los extremos normalizados, informa de la cantidad validada y proporciona una matriz stops cuyos registros contienen los campos color y percentage. Usted puede unir esos registros en un valor CSS linear-gradient, guardarlos como tokens de diseño, usarlos en una lista de paradas SVG o tratar los porcentajes como puntos de control normalizados en otro renderizador.
El mismo algoritmo acotado calcula los extremos y los valores intermedios, y la aritmética entera del numerador de cada canal reduce desviaciones innecesarias de coma flotante.
Qué puede hacer con ella
Construir declaraciones de degradado CSS
Genere colores hexadecimales normalizados y posiciones que se puedan unir en una declaración linear-gradient o radial-gradient repetible.
Crear escalas de tokens de diseño
Convierta colores extremos aprobados en una secuencia de longitud fija para temas, componentes o visualización de datos.
Completar ilustraciones SVG y canvas
Utilice cada pareja de color y porcentaje como parada determinista en ilustraciones, gráficos y efectos generados.
Preguntas frecuentes
¿Se incluyen los colores extremos?
Sí. La primera parada es el color inicial normalizado en el 0 por ciento y la última es el color final normalizado en el 100 por ciento.
¿Qué espacio de color utiliza la interpolación?
Utiliza interpolación lineal directa de los valores de los canales rojo, verde y azul, y redondea cada canal resultante al entero más cercano.
¿Puedo usar colores hexadecimales de tres dígitos?
Sí. Los valores como #f00 se amplían a seis dígitos antes de interpolar y todos los colores devueltos usan la notación #RRGGBB en mayúsculas.
¿Cuántas paradas puedo solicitar?
La cantidad debe ser un entero de 2 a 256, ambos incluidos. Representa la longitud completa del resultado, con los dos extremos.
¿Cómo creo un degradado de rojo a azul con cinco paradas?
Indique #FF0000 como inicio, #0000FF como final y 5 como cantidad. Obtendrá #FF0000 al 0 %, #BF0040 al 25 %, #800080 al 50 %, #4000BF al 75 % y #0000FF al 100 %.
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/gradient-stops \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"start_color":"#FF0000","end_color":"#0000FF","count":5}'const res = await fetch("https://api.kit.forhosting.com/color/gradient-stops", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"start_color": "#FF0000",
"end_color": "#0000FF",
"count": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/gradient-stops",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"start_color": "#FF0000",
"end_color": "#0000FF",
"count": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/gradient-stops", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"start_color":"#FF0000","end_color":"#0000FF","count":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"start_color":"#FF0000","end_color":"#0000FF","count":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/gradient-stops", 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
{
"start_color": "#FF0000",
"end_color": "#0000FF",
"count": 5
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.gradient_stops",
"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
max_stops | 256 |
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
La validación estricta detecta colores mal formados y cantidades no permitidas antes de que entren en un flujo de producción, mientras que la interpolación RGB determinista garantiza el mismo JSON para la misma entrada.
Valide la entrada e integre las paradas obtenidas
Para automatización, la API cuesta $0.002 por solicitud; el ejecutor del navegador resulta práctico para tareas puntuales.
Preguntas técnicas
¿Cuánto cuesta una solicitud de API?
El precio de la API es $0.002 por solicitud. El mismo cálculo determinista también se puede ejecutar gratis en el navegador desde esta página.