Generador de sombras de color
Un generador de sombras de color toma un hex CSS base y un número de pasos, y devuelve una escalera completa de sombras más oscuras y claros más luminosos moviendo solo el canal de luminosidad en el espacio HSL.
Ejecutar — gratis
Corre en su navegador. Gratis y sin límite: sus datos no salen de esta página.
El matiz y la saturación permanecen fijos, de modo que los azules de marca siguen siendo azules y los rojos de marca siguen siendo rojos mientras las superficies avanzan con suavidad desde casi negro, pasando por la base, hasta casi blanco. El recuento de pasos es el número de escalones a cada lado de la base: tres pasos producen tres sombras más oscuras, el color original y tres claros más luminosos, en total siete muestras ordenadas de la más oscura a la más clara. Las cadenas hex inválidas y los recuentos de pasos fuera del rango entero permitido se rechazan con un error de validación claro en lugar de recortar en silencio. La herramienta gratuita del navegador y la API de pago comparten una misma función isomorfa pura, de modo que los sistemas de diseño y la automatización coinciden siempre en la misma escala. Sin llamadas de red, sin semillas aleatorias ni deriva de modelo: el mismo color y los mismos pasos producen siempre el mismo JSON.
Cómo usarla
Ingrese sus datos en el formulario de arriba. La herramienta los revisa antes de calcular y muestra el resultado en la misma página.
Revise sus datos
Use las etiquetas y unidades indicadas en cada campo. Si falta algo o un valor está fuera del rango permitido, la página señala qué debe corregir.
Repita el cálculo o automatícelo
Use la herramienta web para comprobaciones individuales y la API cuando necesite integrar la misma capacidad en un flujo automatizado.
Qué puede hacer con ella
Obtenga una respuesta ahora
Ingrese un conjunto de valores y vea el resultado sin preparar una hoja de cálculo ni un script.
Compare escenarios
Cambie un valor a la vez y repita el cálculo para entender qué modifica el resultado.
Automatice el trabajo repetido
Use la API cuando necesite ejecutar el mismo cálculo dentro de su producto o flujo.
Preguntas frecuentes
¿Cómo uso esta capacidad?
Complete los campos de arriba y ejecútela en esta página. El formulario señala cualquier dato que deba corregir.
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/shades \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","steps":3}'const res = await fetch("https://api.kit.forhosting.com/color/shades", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"steps": 3
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/shades",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"steps": 3
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/shades", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","steps":3}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","steps":3}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/shades", 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",
"steps": 3
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.shades",
"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. |