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. 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. 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.

Cómo los claros y las sombras escalonan la luminosidad

Parta de un color hex CSS como hash tres tres seis seis c c o la forma corta hash tres seis c. 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. Las sombras no mezclan hacia el negro en RGB; solo bajan el porcentaje de luminosidad mientras el matiz y la saturación permanecen fijos.

Para el índice de paso k de uno al recuento de pasos elegido, cada sombra usa luminosidad igual a la luminosidad base multiplicada por uno menos k entre pasos, de modo que la sombra más lejana cae en negro puro con luminosidad cero y la más cercana queda justo por debajo de la base.

Los claros elevan la luminosidad hacia el blanco del mismo modo: la luminosidad pasa a ser la luminosidad base más la distancia restante hasta cien, escalada por k entre pasos, de modo que el claro más lejano es blanco puro. Tras conocer cada 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 de reloj ni llamadas de red, de modo que las mismas entradas siempre producen la misma escala ordenada. Las formas hex con alfa de cuatro u ocho dígitos se rechazan porque este contrato es solo RGB opaco. Los pasos no enteros o los valores fuera de uno a veinte fallan la validación para que los clientes no superen en silencio el rango permitido.

Qué envía y qué recibe de vuelta

Envíe dos campos: color como cadena hex y steps como entero entre uno y veinte inclusive. Cada muestra incluye role, index, step, hex, enteros r g b, números de matiz saturación luminosidad y cadenas imprimibles rgb y hsl. Role es shade para pasos más oscuros, base para el original y tint para pasos más claros; step es negativo para sombras, cero para la base y positivo para claros, de modo que los clientes pueden ordenar o filtrar sin rederivar la luminosidad.

Una cadena formula corta documenta las reglas de escalonado de L para documentación y soporte. Comprobaciones típicas: tres pasos sobre hash tres tres seis seis c c, cinco pasos sobre rojo puro y confirmar que un hex inválido falla la validación. Use el formulario gratuito del navegador para revisiones de diseño y rampas rápidas; invoque el mismo contrato desde scripts cuando necesite generación masiva de escalas de tokens.

Mantenga steps 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 las escalas de sombra en el trabajo real

Los diseñadores de producto construyen rampas completas de IU generando estados active más oscuros y fondos hover más claros a partir de un primario de marca sin desplazar el matiz, de modo que una escalera de CTA azul marino se mantiene azul marino desde el estado pulsado hasta la superficie suave. Los revisores de accesibilidad exploran compañeros de colores de texto o iconos a lo largo de una escalera de luminosidad y entregan candidatos a un verificador de contraste en lugar de adivinar tonos medios a ojo.

Los equipos de marketing producen pasteles de campaña y acentos profundos 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 para gráficos, chips, insignias y botones secundarios.

Si más adelante necesita solo un paso de aclarado, 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 sombras.