Oscurecer un color hex por porcentaje
Obtenga un tono más profundo de un color hexadecimal sin adivinar: #4A90D9 oscurecido un 20 % pasa a #2873C0, con el mismo tono y saturación y menos luminosidad. Con 0 % el color no cambia; con 100 % sale negro. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color
- #4A90D9
- Cantidad
- 20
- Original
- #4A90D9
- Hex
- #2873C0
Diseñadores, ingenieros de front-end y autores de sistemas de diseño necesitan constantemente tonos más oscuros de un color de marca para estados hover, bordes, sombras y texto accesible sobre fondos claros. Adivinar un hex nuevo a ojo es lento e inconsistente entre herramientas. Esta capacidad acepta un color hex y un porcentaje de oscurecido de cero a cien, convierte el color a HSL, multiplica la luminosidad por uno menos ese porcentaje y devuelve el hex más oscuro con desgloses en RGB y HSL. El cero por ciento conserva el color original; el cien por ciento produce negro.
Qué significa oscurecer por porcentaje en HSL
Los colores en la web se guardan a menudo como hex o RGB, pero los pasos de tono perceptivos son más fáciles en HSL: el matiz sostiene el tinte, la saturación la pureza y la luminosidad qué tan cerca se sitúa la muestra del negro o del blanco. Oscurecer por un porcentaje significa reducir la luminosidad manteniendo fijos el matiz y la saturación, así que un azul de marca sigue siendo azul, solo que más profundo. Esta herramienta multiplica la luminosidad actual por uno menos la cantidad sobre cien.
Al cero por ciento la luminosidad no cambia, de modo que la salida coincide con el hex de entrada normalizado. Al cincuenta por ciento la luminosidad se reduce a la mitad. Al cien por ciento la luminosidad se vuelve cero y el resultado es negro puro sin importar el matiz de partida.
Ese modelo relativo se ajusta a cómo muchos tokens de diseño escalan los estados interactivos: un único token base más un factor de oscurecido para hover o pressed. La resta absoluta de puntos de luminosidad puede pasarse de rosca en colores ya oscuros; el escalado relativo siempre se mantiene en rango y nunca inventa una luminosidad negativa.
Contrato de entrada: colores hex y la cantidad 0–100
Pase el color como cadena hex en forma corta o larga: #RGB o #RRGGBB, con o sin el numeral inicial. Las formas cortas se expanden canal a canal, así que #F0A se convierte en #FF00AA antes de convertirse. El campo de cantidad es obligatorio y debe ser un número finito entre cero y cien inclusive.
Valores como menos diez, ciento uno o texto no numérico se rechazan; la validación fallida no se factura. En caso de éxito, la respuesta incluye original como el hex normalizado de seis dígitos en mayúsculas, hex como el resultado oscurecido, la cantidad numérica que usted envió, rgb con canales enteros de cero a doscientos cincuenta y cinco, y hsl con el matiz en grados y la saturación y la luminosidad en escala de cero a cien tras el paso de oscurecido.
El redondeo es determinista, así que volver a ejecutar el mismo par no deriva. Use cantidad cero para normalizar y expandir un hex corto sin cambiar el tono, o cantidad cien cuando necesite un negro verdadero derivado de la misma ruta de código que los oscurecidos parciales.
Para una consulta rápida o una paleta entera
Para una comprobación puntual —confirmar que un azul primario se oscurece limpiamente para el hover de un botón, o que un paso del veinte por ciento aún cumple los objetivos de contraste sobre blanco— use la herramienta gratuita del navegador en esta página. No hay llamada de red dentro de la transformación, ni modelo, ni dependencia de reloj, así que los resultados son seguros en el borde y cacheables.
Cuando ya convierta formatos con un conversor de color aparte, consérvelo para los viajes de ida y vuelta HEX–RGB–HSL; use este oscurecedor cuando la intención de búsqueda sea específicamente un tono más oscuro por porcentaje. Combine ambos en una canalización si necesita exportar a CMYK tras oscurecer, pero el paso de oscurecido en sí solo necesita hex a la entrada y color estructurado a la salida.
Qué puede hacer con ella
Estados hover y pressed de la interfaz
Derive tonos más oscuros de botones y enlaces a partir de un único hex de marca para que los estilos hover y activo se mantengan coherentes entre componentes sin elegir cada muestra a mano.
Acentos de marca para correo y PDF
Precalcule hex de acento más oscuros para bordes y encabezados en plantillas que solo aceptan colores estáticos y no pueden calcular HSL al renderizar.
Preguntas frecuentes
¿Qué entradas acepta el oscurecedor de color?
Un color hex (#RGB o #RRGGBB, # opcional) y un porcentaje de cantidad de 0 a 100.
¿Cómo se calcula el color más oscuro?
El hex se convierte a HSL, la luminosidad se multiplica por (1 − cantidad/100), y luego se convierte de nuevo a hex, RGB y HSL. El matiz y la saturación se mantienen; una cantidad de 100 produce negro.
¿Qué contiene una respuesta exitosa?
original (hex de entrada normalizado), hex (resultado oscurecido), amount, rgb {r,g,b} y hsl {h,s,l} tras el oscurecido.
¿Es esto lo mismo que un conversor de formato de color?
No. Un conversor cambia la representación (HEX, RGB, HSL) sin desplazar el tono. Esta herramienta oscurece específicamente bajando la luminosidad un porcentaje.
¿Qué le hace un oscurecimiento del 20 % a #4A90D9?
Su luminosidad se reduce en una quinta parte mientras el tono y la saturación se mantienen, así que el resultado es #2873C0, es decir, RGB 40, 115, 192. El azul sigue siendo el mismo azul, solo más profundo.
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/darken \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#4A90D9","amount":20}'const res = await fetch("https://api.kit.forhosting.com/color/darken", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#4A90D9",
"amount": 20
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/darken",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#4A90D9",
"amount": 20
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/darken", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#4A90D9","amount":20}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#4A90D9","amount":20}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/darken", 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": "#4A90D9",
"amount": 20
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.darken",
"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
Las cantidades fuera del rango de cero a cien se rechazan con un error claro invalid_input. Use la herramienta gratuita del navegador para muestras rápidas, o la API a $0.002 por solicitud exitosa cuando genere paletas en una canalización.
Qué significa oscurecer por porcentaje en HSL
Como la conversión es matemática pura con redondeo fijo, el mismo hex y la misma cantidad siempre producen el mismo hex más oscuro en el navegador y en el borde de la API, lo que hace fiables las pruebas de referencia y las corridas multirregión para CI y tokens de diseño.
Contrato de entrada: colores hex y la cantidad 0–100
Los caracteres inválidos, las longitudes incorrectas, las cadenas vacías y los valores que no son cadenas fallan con invalid_input y un mensaje que nombra el campo. Se aceptan alias por comodidad: hex, from o text para el color, y percent, pct o percentage para la cantidad.
Dónde ejecutarlo: herramienta gratuita del navegador o API automatizada
La misma función pura impulsa la API cuando construye generadores de temas, exporta tokens de diseño a propiedades personalizadas de CSS o precalcula escaleras de tonos para plantillas de correo que no pueden ejecutar scripts de cliente. Cada llamada exitosa a la API cuesta $0.002; las cantidades inválidas fuera del rango de cero a cien y los hex mal formados no consumen saldo prepago. Coloque el endpoint en un puente de plugin de Figma, en un complemento de Storybook que previsualice colores de estado, o en un paso de servidor que materialice superficies de modo oscuro a partir de una paleta base clara.
Casos de integración
Escaleras de tonos de tokens de diseño
Genere variantes oscuras escalonadas para variables CSS o JSON de tema aplicando porcentajes de oscurecido fijos a los colores de la paleta base en CI.
Preguntas técnicas
¿Cuánto cuesta la API?
$0.002 por solicitud exitosa. La herramienta del navegador es gratuita. La entrada inválida no se cobra.