Aclarador de color
Aclarar #3366cc un 20 % da #5c85d6: la luminosidad sube del 50 % al 60 % y el azul conserva su matiz y su saturación. Cree tonos más suaves de su color de marca sin que se vuelva grisáceo. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color hex
- #3366cc
- Cantidad
- 20
- Cód. hex
- #5c85d6
- Luminosidad antes
- 50
- Luminosidad después
- 60
Un aclarador de color toma un código hex CSS y un porcentaje, y devuelve una versión más clara elevando solo el canal de luminosidad en el espacio HSL. El matiz y la saturación se mantienen, de modo que los azules de marca siguen siendo azules y los rojos siguen siendo rojos, mientras la superficie se suaviza para estados hover, fondos y tintes accesibles. La cantidad es un porcentaje del margen restante entre la luminosidad actual y el blanco puro: cero por ciento deja la muestra sin cambios, cien por ciento produce blanco puro, y los valores intermedios escalan de forma suave. Las cadenas hex inválidas y los porcentajes fuera de cero a cien se rechazan con un error de validación claro en lugar de recortar en silencio.
Cómo funciona el aclarado en HSL
Parta de un color hex CSS como #3366cc o la forma corta #36c. El analizador expande códigos de tres dígitos, pasa los dígitos a minúsculas y convierte cada par en enteros de rojo, verde y azul de cero a doscientos cincuenta y cinco.
Esos canales se mapean a matiz, saturación y luminosidad con las fórmulas estándar CSS y W3C: la luminosidad es la media de las fracciones máxima y mínima del canal, la saturación depende de esa luminosidad y el matiz se mide en grados alrededor de la rueda de color, con grises acromáticos que reportan matiz cero. Aclarar no mezcla el color hacia el blanco en RGB; solo eleva el porcentaje de luminosidad mientras el matiz y la saturación permanecen fijos.
La nueva luminosidad es la antigua más la distancia restante hasta cien, escalada por la cantidad entre cien. Con cantidad cero la fórmula es identidad pura; con cantidad cien el resultado es blanco puro con luminosidad cien; con cantidad veinte un azul de tono medio avanza un veinte por ciento desde su luminosidad actual hacia el blanco. Tras conocer la nueva luminosidad, la misma ruta CSS de matiz a RGB convierte HSL de nuevo a canales enteros y un código hex de seis dígitos en minúsculas.
No hay semillas aleatorias, marcas de tiempo ni llamadas de red, de modo que las mismas entradas siempre producen la misma salida. Las formas hex con alfa de cuatro u ocho dígitos se rechazan porque este contrato es solo RGB opaco. Los porcentajes por debajo de cero o por encima de cien fallan la validación para que los clientes no se salgan en silencio del rango permitido.
Qué envía y qué recibe de vuelta
Envíe dos campos: color como cadena hex y amount como número finito entre cero y cien inclusive. En caso de éxito la respuesta repite el color normalizado de seis dígitos y la cantidad limpia, y luego ofrece muestras original y result. Cada muestra incluye role, hex, enteros r g b, números de matiz saturación luminosidad y cadenas imprimibles rgb y hsl.
Una cadena formula corta documenta la regla L prima para documentación y soporte. Comprobaciones típicas: aclarar #3366cc un veinte por ciento, aclarar rojo puro un cincuenta por ciento y confirmar que amount cero devuelve el hex original. Use el formulario gratuito del navegador para revisiones de diseño y tintes rápidos; invoque el mismo contrato desde scripts cuando necesite generación masiva de tokens hover o escalas de tema.
Mantenga amount en el rango documentado en lugar de confiar en recortes silenciosos: esta herramienta falla de forma explícita para que los sistemas de diseño sigan siendo predecibles.
Dónde aparecen los aclaradores de color en el trabajo real
Los diseñadores de producto construyen estados hover y active aclarando primarios de marca sin desplazar el matiz, de modo que un aclarado del veinte por ciento de un CTA azul marino sigue siendo azul marino en lugar de lavarse hacia gris o cian. Los revisores de accesibilidad exploran compañeros más claros de colores de texto o iconos al combinarlos con fondos oscuros, y entregan los candidatos a un verificador de contraste en lugar de adivinar tonos medios a ojo.
Los equipos de marketing producen muestras pastel de campaña a partir de logotipos saturados para banners sociales y cabeceras de correo preservando la identidad de matiz de la marca. Los ingenieros frontend programan rampas de sombra en integración continua para que un solo color de marca rinda una escalera documentada de pasos más claros para gráficos, chips y botones secundarios.
Si más adelante necesita oscurecer un color, convertir HSL a RGB, construir una paleta análoga o comprobar contraste WCAG, trátelos como intenciones de búsqueda y aterrizajes separados en lugar de sobrecargar esta página de aclarado.
Qué puede hacer con ella
Tintes hover y active de la IU
Obtenga fondos hover más claros a partir de tokens hex de marca manteniendo estables el matiz y la saturación para estados de componente coherentes.
Rampas de sombra con tokens de diseño
Genere pasos pastel y de superficie suave desde un color base para temas, variables CSS y sistemas multi-marca.
Pasteles de marketing desde logotipos
Produzca muestras más claras listas para campaña a partir de colores de logo saturados para banners, diapositivas y creatividades sociales.
Preguntas frecuentes
¿Cómo cambia este aclarador de color mi hex?
Convierte hex a HSL, eleva la luminosidad con L' = L + (100 − L) × (amount / 100), mantiene fijos matiz y saturación, y vuelve a convertir a hex y RGB.
¿Qué rango de cantidad se permite?
Amount debe ser un número finito de 0 a 100 inclusive.
¿Qué ocurre al 0% y al 100%?
0% deja el color sin cambios. 100% produce blanco puro (luminosidad 100) informando el matiz y la saturación fijos del color original.
¿Qué formatos hex se aceptan?
Hex CSS de tres y seis dígitos, con o sin almohadilla inicial. Las formas con alfa (#rgba / #rrggbbaa) y los caracteres no hex se rechazan.
¿Cuánto cuesta?
La herramienta del navegador es gratuita y se ejecuta en local.
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/lighten \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","amount":20}'const res = await fetch("https://api.kit.forhosting.com/color/lighten", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"amount": 20
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/lighten",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"amount": 20
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/lighten", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","amount":20}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","amount":20}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/lighten", 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",
"amount": 20
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.lighten",
"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
Sin llamadas de red, sin semillas aleatorias ni deriva de modelo: el mismo color y cantidad siempre producen el mismo JSON.
Qué envía y qué recibe de vuelta
Color también acepta los alias hex y base; amount acepta percent y pct. Campos ausentes, caracteres no hex, longitudes incorrectas, NaN, Infinity y cantidades fuera del intervalo cerrado fallan con invalid_input y no se cobran. El hex de nivel superior es el color aclarado para clientes de una línea; lightness_before y lightness_after hacen auditable el paso porcentual sin rederivar HSL. El precio de las llamadas API exitosas es la base publicada de $0.002 por elemento; los fallos de validación no consumen saldo prepago.
Dónde aparecen los aclaradores de color en el trabajo real
Los pipelines de tokens de diseño generan tintes suaves de fondo a partir de un único hex base y guardan el hex derivado en JSON o variables CSS para superficies en modo claro. Como esta capacidad es un motor de parse puro, el precio de la API es la base publicada de $0.002 por elemento exitoso y la validación fallida no consume saldo.