Generador de sombras: 10 tonos oscuros desde un HEX
Genera 10 sombras progresivamente más oscuras a partir de cualquier color hexadecimal. Copia valores HEX individuales o exporta todo como propiedades personalizadas CSS o un array de JavaScript, directamente en tu navegador.
Cómo usar esta herramienta
- Enter a base hex colour.
- The tool darkens it in ten progressive steps toward black.
- Copy individual shades, or export the set as CSS variables or a JS array.
Shade values
Acerca de Generador de tonos oscuros
El Generador de sombras toma cualquier color hexadecimal y produce a partir de él 10 sombras cada vez más oscuras. En lugar de oscurecer un color a mano probando valores uno por uno, obtienes de golpe una escala completa que va del color de partida a sus versiones progresivamente más profundas, perfecta para construir una rampa de color coherente.
Cada sombra de la escala se puede copiar de forma individual haciendo clic sobre su valor hexadecimal, así coges justo la que necesitas. Y si quieres llevarte toda la escala de una vez, puedes exportarla como propiedades personalizadas CSS (variables de color) o como un array de JavaScript, listo para integrar en tu hoja de estilos o en tu código sin tener que transcribir nada.
Es una herramienta muy útil para sistemas de diseño y temas, donde una misma base de color suele necesitar varios niveles de oscuridad para estados, fondos, bordes y texto. Todo el cálculo se ejecuta enteramente en tu navegador: nada se envía a un servidor y nada abandona tu dispositivo.
Preguntas frecuentes
- ¿Cuántas sombras genera?
- Genera 10 sombras progresivamente más oscuras a partir del color hexadecimal de partida.
- ¿Puedo copiar una sola sombra?
- Sí. Puedes hacer clic sobre cualquier valor hexadecimal de la escala para copiar esa sombra concreta de forma individual.
- ¿Cómo exporto toda la escala?
- Puedes exportar las sombras como propiedades personalizadas CSS (variables de color) o como un array de JavaScript, para integrarlas directamente en tu proyecto.
- ¿Para qué sirven estas sombras?
- Son ideales para sistemas de diseño y temas, donde una base de color necesita varios niveles de oscuridad para estados, fondos, bordes y texto.
- ¿Se procesa todo en mi navegador?
- Sí. El cálculo se ejecuta enteramente en tu navegador, nada se envía a un servidor y nada abandona tu dispositivo.