Cómo Generar Tonos de Color: Crea Paletas Consistentes a Partir de Un Color

Un solo color de marca no es suficiente. Necesitas versiones más claras para fondos y estados de hover, y versiones más oscuras para texto, bordes y estados presionados. Elegir manualmente cada paso es tedioso y a menudo inconsistente.

Sombras de color — variaciones de un color cambiando solo la luminosidad — te dan una escala completa y consistente a partir de una sola decisión. Aquí te mostramos cómo generarlas y usarlas en sistemas de diseño, paletas al estilo Tailwind y CSS.

---

¿Qué Son las Sombras de Color?

Sombras son variaciones de un solo color hechas al cambiar solo la luminosidad (en HSL). El matiz y la saturación permanecen iguales, por lo que obtienes una familia coherente desde muy clara hasta muy oscura.

A diferencia de los tonos (añadiendo blanco) o matices (añadiendo gris), generar sombras a través de la luminosidad HSL mantiene el carácter del color a lo largo de la escala y evita un aspecto deslavado en los pasos más claros.

Eso hace que las sombras sean ideales para:

• Escalas de sistemas de diseño (por ejemplo, primary-50 a primary-900)
• Paletas al estilo Tailwind
• Propiedades personalizadas de CSS para tematización
• Botones, tarjetas y componentes de UI

---

¿Por Qué Usar un Generador de Sombras?

Construir una escala a mano es lento y fácil de errar. Tienes que:

• Mantener el matiz y la saturación idénticos
• Espaciar los pasos de luminosidad de manera uniforme
• Exportar hex, RGB, HSL o CSS para desarrollo

El Generador de Sombras de Color Tooladex hace esto automáticamente: eliges un color base y cuántos pasos deseas (por ejemplo, 9 u 11), y produce una escala completa con tu base en el medio. Puedes copiar hex, RGB, HSL o un bloque de variables CSS :root listo para pegar.

---

Ejemplo: Construyendo una Paleta de Botones

Comienza con un azul de marca como #3B82F6. El generador te da:

• Sombras más claras (50–400) — Fondos, estados de hover, botones deshabilitados
• Tu color base (500) — Acciones primarias y estado por defecto
• Sombras más oscuras (600–900) — Estados presionados, bordes, texto sobre fondos claros

Una decisión de color se convierte en una paleta completa de componentes. Usa el mismo enfoque para colores secundarios, de acento o semánticos (éxito, advertencia, error).

---

¿Cuántas Sombras Deberías Generar?

La mayoría de los sistemas de diseño utilizan 9–11 pasos. Tailwind utiliza 10 (50, 100, 200…900). Menos pasos (5–7) funcionan para proyectos más simples; más pasos dan un control más fino pero pueden ser excesivos.

La herramienta Tooladex admite 3, 5, 7, 9, 11 o 15 sombras. Para configuraciones similares a Tailwind, elige 9 (etiquetas 100–900) o 11 (50–950).

---

Formatos de Salida

Puedes copiar sombras en varios formatos:

• Hex — por ejemplo, #EFF6FF, #DBEAFE — para herramientas de diseño y estilos en línea
• RGB — por ejemplo, rgb(239, 246, 255) — para uso programático
• HSL — por ejemplo, hsl(214, 100%, 97%) — para ajustes en código
• Variables CSS — Un bloque :root { --color-100: #...; --color-200: #...; } que puedes insertar en tu hoja de estilos

Usa la opción “Copiar como variables CSS” con un nombre base (por ejemplo, --color-primary) para obtener una escala completa lista para tematización.

---

Consejos para Mejores Resultados

• Trata tu base como el medio — Piensa en el color base como el paso 500, no el más oscuro. El generador lo coloca en el centro y construye más claro y más oscuro a partir de ahí.
• Verifica el contraste temprano — Usa sombras más claras (50–200) para fondos con texto oscuro; usa sombras más oscuras (700–900) para texto sobre fondos claros para cumplir con las pautas de accesibilidad.
• Evita el negro o blanco puro como base — Comienza con un color que tenga algo de saturación (por ejemplo, 10%+). Las escalas de gris puro pueden verse planas; un toque de matiz mantiene la escala más usable y natural.

Si una escala se ve extraña (por ejemplo, demasiado plana o demasiado dura), intenta ajustar ligeramente la saturación del color base. La luminosidad HSL funciona mejor con saturación moderada (alrededor del 20–80%).

---

Prueba el Generador de Sombras de Color

El Generador de Sombras de Color Tooladex funciona completamente en tu navegador: elige un color base, selecciona el número de sombras y copia hex, RGB, HSL o variables CSS. Sin cuenta, sin datos enviados a un servidor — solo una paleta completa a partir de un color.