# Generador de Sombras de Color Genere variaciones más oscuras de un color agregando negro, creando sombras ricas para profundidad y contraste en el diseño > Página canónica: https://elysiatools.com/es/tools/color-shade - **Categoría:** Design - **Palabras clave:** color, sombra, oscurecer, negro, profundidad, contraste, variaciones, más oscuro, sombra, matiz ## Descripción general El Generador de Sombras de Color permite crear variaciones más oscuras de cualquier tono base añadiendo negro de forma precisa, ideal para añadir profundidad, jerarquía visual y contraste profesional a tus proyectos de diseño. ## Entradas - **Color Base** (color) - **Método de Sombra** (select) - **Número de Sombras** (number): Cuántas variaciones de sombra generar - **Intensidad de Sombra** (number): Máxima oscuridad (0.1-1.0) - **Distribución de Pasos** (select) - **Valores de Pasos Personalizados** (text): Valores separados por comas (ej: 0.1,0.3,0.5,0.7,0.9) - **Incluir Color Original** (checkbox) - **Mostrar Códigos HEX** (checkbox) - **Mostrar Valores RGB** (checkbox) - **Mostrar Valores HSL** (checkbox) - **Generar Paleta Extendida** (checkbox) ## Cuándo usarlo - Cuando necesitas crear una paleta de colores coherente con diferentes niveles de luminosidad. - Al diseñar elementos de interfaz como botones o tarjetas que requieren estados de 'hover' o 'active' más oscuros. - Para generar sombras naturales que complementen un color principal en ilustraciones o gráficos. ## Cómo funciona - Selecciona tu color base utilizando el selector de color o ingresando su código HEX. - Elige el método de sombreado, como el lineal, HSL o el espacio de color LAB, para obtener el resultado deseado. - Ajusta el número de variaciones y la intensidad de la sombra para controlar qué tan oscuro será el degradado final. - Visualiza los resultados con sus respectivos códigos HEX, RGB y HSL para integrarlos directamente en tu código o software de diseño. ## Casos de uso - Creación de sistemas de diseño con escalas de color consistentes para interfaces web. - Generación de paletas para ilustraciones vectoriales que requieren sombras ricas y profundas. - Desarrollo de estados interactivos para componentes de UI, como botones que se oscurecen al hacer clic. ## Preguntas frecuentes ### ¿Qué método de sombreado debería elegir? El método lineal es ideal para una transición simple, mientras que el espacio de color LAB o HSL ofrecen resultados más naturales y perceptualmente precisos. ### ¿Puedo obtener los valores en formato RGB? Sí, al activar la opción 'Mostrar Valores RGB' en la configuración, obtendrás los valores exactos junto a cada sombra generada. ### ¿Cuántas sombras puedo generar a la vez? Puedes generar entre 2 y 12 variaciones de sombra dependiendo de tus necesidades de diseño. ### ¿Es posible incluir el color original en la lista? Sí, simplemente marca la casilla 'Incluir Color Original' para que el color base aparezca como el primer elemento de tu lista. ### ¿Qué hace la distribución de pasos exponencial? La distribución exponencial acelera el oscurecimiento, creando sombras que se vuelven más intensas rápidamente hacia el final de la serie. ## Herramientas relacionadas - [Colores Análogos](https://elysiatools.com/es/tools/color-analogous): Generar esquemas de colores análogos armoniosos con colores adyacentes en la rueda de color, creando combinaciones unificadas y pacíficas - [Generador de Gradiente de Color](https://elysiatools.com/es/tools/color-gradient-generator): Genera gradientes de color suaves entre múltiples colores con pasos y formatos personalizables - [Desplazador de Matiz de Color](https://elysiatools.com/es/tools/color-hue-shifter): Desplaza matices de colores y crea variaciones con controles de rotación horaria/antihoraria - [Aclarar/Oscurecer Color](https://elysiatools.com/es/tools/color-lighten-darken): Ajusta el brillo de los colores y crea variaciones - [Saturar/Desaturar Color](https://elysiatools.com/es/tools/color-saturate-desaturate): Ajusta la saturación del color y crea variaciones de saturación - [Generador de Esquemas de Color](https://elysiatools.com/es/tools/color-scheme-generator): Genera esquemas de color y paletas profesionales para proyectos de diseño - [Herramienta de Colores Complementarios Divididos](https://elysiatools.com/es/tools/color-split-complement): Crear contraste harmonioso con esquemas de colores complementarios divididos usando un color base y dos colores adyacentes a su complemento - [Herramienta de Tétrade de Color](https://elysiatools.com/es/tools/color-tetrad): Generar esquemas de color tétricos con cuatro colores dispuestos en patrones rectangulares en la rueda de color, creando relaciones de color ricas y complejas ## Ejemplos - [Ejemplos de Códigos de Color](https://elysiatools.com/es/samples/color-code): Colección de códigos de color en varios formatos (Hex, RGB, HSL, colores con nombre) para pruebas de validación - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato ## Contenido relacionado - [Herramientas para sistemas de color accesibles](https://elysiatools.com/es/hubs/color-design-tools): Crea un sistema de color reutilizable transformando colores, generando armonías, comprobando contraste y visión cromática, y documentando tokens. - [Flujo de sistema de color y efectos CSS](https://elysiatools.com/es/hubs/design-generate): Extrae una paleta, construye relaciones accesibles, genera tokens y aplica efectos CSS coherentes en estados reales de interfaz.