Softonic

Generador de Sombras de Color

Paso 1 / 2
Resultados

Una sombra es el resultado de mezclar un color con negro, cada paso se oscurece. El generador toma un color base HEX y produce de 3 a 20 pasos (10 por defecto) de sombras cada vez más oscuras, además de los tintes más claros de la misma base. Útil para escaleras de paletas de sistemas de diseño (500 → 900), estados de botón presionado/activo, colores de texto que permanecen legibles y superposiciones de sombra. Cada paso se muestra como una muestra con su valor hex listo para copiar.

Cómo funciona la generación de sombras

  1. 1

    Elige un color base

    Usa el selector de color o, en el modo por pasos, pasa un valor hex por la URL de la página. La base queda entre el rango de tintes y el de sombras.

  2. 2

    Elige la cantidad de pasos

    De 3 a 20 pasos, 10 por defecto. Más pasos dan una escalera más suave; menos pasos, saltos más fuertes.

  3. 3

    Mezcla con negro en pasos uniformes

    Cada paso escala los canales rojo, verde y azul con el mismo factor, lo que equivale a mezclar con negro (o con blanco para los tintes) en pasos uniformes. Con 10 pasos, cada uno es alrededor de un 9 % más oscuro o más claro. El matiz se mantiene idéntico a la base.

  4. 4

    Lee la escala

    Cada muestra muestra su valor hex. Selecciona el texto para copiarlo en CSS, un tema de Tailwind o un archivo de design tokens.

Sombra, tinte y tono

  • Sombra (shade): color + negro → más oscuro.
  • Tinte (tint): color + blanco → más claro.
  • Tono (tone): color + gris → menos saturado.

Este generador produce tanto sombras como tintes a partir de la misma base. El par tinte+sombra generalmente forma una paleta de sistema de diseño (por ejemplo, brand-100 a brand-900 donde 500 es el base).

Escala de ejemplo: #3B82F6 (Tailwind blue-500)

Paso Hex Mezcla Rol en el sistema de diseño
0 #3B82F6 Base Marca principal (por ejemplo, blue-500)
1 #316CCD 17 % negro Estado de hover
2 #2756A4 33 % negro Estado presionado/activo (blue-600)
3 #1D417B 50 % negro blue-700
4 #132B52 67 % negro blue-800
5 #091528 83 % negro blue-900

La tabla muestra una escala de 5 pasos: cada paso es un sexto del camino hacia el negro.

Cómo se calculan los pasos

La herramienta escala los canales rojo, verde y azul de la base con el mismo factor en cada paso. Eso equivale a mezclar con negro en el rango de sombras y con blanco en el de tintes, en pasos uniformes. Con 10 pasos, cada uno es alrededor de un 9 % más oscuro o más claro que el anterior.

Como todos los canales se escalan por igual, el matiz de la base se conserva exactamente: una base azul sigue siendo azul y una base verde sigue siendo verde. Mezclar con negro también reduce la saturación junto con la claridad, de modo que los pasos oscuros se ven naturales en lugar de brillantes. Reducir solo la claridad, sin tocar la saturación, deja los colores oscuros sobresaturados.

Usando sombras en UI

  • Botón: base para el estado normal, 1-2 pasos más oscuros para hover, 2-3 pasos más oscuros para activo/presionado.
  • Texto del cuerpo: 2-3 pasos más oscuros que el base aseguran legibilidad sobre blanco; más claro para texto secundario.
  • Borde / divisor: 1-2 pasos más oscuros que el fondo, suficiente para delinear sin abrumar.
  • Sombras: paso más oscuro (o más oscuro) con alfa reducido en lugar de un nuevo gris.
  • Visualización de datos: usa sombras de un solo matiz para una escala secuencial (magnitudes de valor), o empareja sombras de dos matices para escalas divergentes (positivo y negativo).

Errores comunes

  • Demasiados pasos se aplastan en bandas indistinguibles. Las escalas de 10 pasos funcionan bien porque cada paso es alrededor de un 9 % más oscuro; con 20 pasos las diferencias se vuelven sutiles. Para contrastes fuertes, prefiere 3-5 pasos.
  • Aquí no hay deriva de matiz: cada paso escala todos los canales por igual, así que un rojo sigue siendo rojo y un verde sigue siendo verde. La deriva de matiz aparece al interpolar entre dos colores distintos, algo que esta herramienta no hace.
  • Ignorar la accesibilidad: sombras que parecen armoniosas pueden fallar en el contraste WCAG contra el fondo. Siempre verifica el contraste en cada paso.
  • Las escalas solo de sombra se sienten opresivas en fondos oscuros. Empareja con una escala de tinte para un modo oscuro utilizable.

Preguntas frecuentes

Para un sistema de diseño, 5 pasos de sombra + 5 pasos de tinte (10 en total alrededor del base) es la convención común. Para colores de estado de UI rápidos (hover, activo), 3 pasos son suficientes.

La mezcla uniforme que se usa aquí mantiene cada paso en línea recta entre la base y el negro, así que los pasos intermedios se ven limpios. Una parte media turbia suele venir de una herramienta que interpola entre dos colores distintos, o que reduce la claridad sin reducir la saturación.

Los colores oscuros ya tienen poco margen para oscurecerse antes de volverse negros, una base de púrpura oscuro solo produce 2-3 pasos distintivos antes de que la escala colapse. Elige una base de media claridad para escalas más ricas.

Similar en intención, pero mezclar con negro reduce la saturación junto con la claridad, lo que generalmente se ve más natural. La reducción pura de claridad mantiene la saturación alta y puede resultar en colores oscuros sobresaturados.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Simplificador de Álgebra Booleana

Evalúa una expresión booleana para cada combinación de entradas y muestra la tabla de verdad completa. Admite hasta cinco variables y los operadores &, |, ! y ^.