Generador de Escala de Grises
Genera escalas de grises perfectas para tu sistema de diseño
Escala de Grises
Exportar Escala
Métodos de Distribución
Lineal: Distribución uniforme de luminosidad. Ideal para escalas matemáticas.
Perceptual: Más pasos en medios tonos. Mejor para UI y diseño visual.
Logarítmico: Más pasos en tonos oscuros. Útil para fondos y sombras.
Cómo funciona
Una escala de grises bien diseñada es fundamental para cualquier sistema de diseño.
Usos comunes
- Texto y tipografía
- Bordes y separadores
- Fondos y superficies
- Estados deshabilitados
- Sombras y overlays
💡 Ejemplos de uso prácticos
Caso 1: Sistema de diseño desde cero
Necesitas una escala de grises completa para tu design system.
→ Genera 11 pasos: 50, 100, 200... 900, 950
→ Añade un ligero tinte azul para sensación tech
Caso 2: Jerarquía de texto
Definir colores para títulos, cuerpo, texto secundario y placeholders.
→ Títulos: gray-900
→ Cuerpo: gray-700
→ Secundario: gray-500
→ Placeholder: gray-400
Caso 3: Modo oscuro consistente
Crear escala de grises para tema oscuro.
→ Invierte la escala: 900 para fondos, 100 para texto
→ Mantén el mismo tinte para consistencia