Generador de Escala de Grises
Genera escalas de grises profesionales con 3 métodos de distribución, grises con tinte, contraste WCAG y exportación a CSS/SCSS/Tailwind/JSON
Convierte colores a escala de grises con diferentes métodos.
Escala de Grises
Vista Previa de Texto
Cómo se ve el texto sobre cada gris
gray-50
The quick brown fox jumps
21.0:1
gray-100
The quick brown fox jumps
7.5:1
gray-200
The quick brown fox jumps
4.4:1
gray-300
The quick brown fox jumps
6.8:1
gray-400
The quick brown fox jumps
9.0:1
gray-500
The quick brown fox jumps
11.3:1
gray-600
The quick brown fox jumps
13.6:1
gray-700
The quick brown fox jumps
16.1:1
gray-800
The quick brown fox jumps
18.4:1
gray-900
The quick brown fox jumps
21.0:1
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 el pilar invisible de cualquier sistema de diseño. Define la jerarquía visual del texto, los fondos, los bordes y los estados de interacción. Esta herramienta te permite crear escalas personalizadas con 3 métodos de distribución, grises con tinte ajustable y verificación WCAG integrada en cada paso.
Funcionalidades de esta herramienta
- 3 métodos de distribución: Lineal (matemática), Perceptual (optimizada para UI) y Logarítmica (énfasis en oscuros)
- 3-15 pasos configurables: Desde escalas mínimas hasta sistemas completos tipo Tailwind
- Naming estilo Tailwind: Pasos nombrados automáticamente como gray-50, gray-100... gray-950
- 6 presets de tinte + custom: Gris puro, cálido, frío, rosa, salvia, pizarra o tu color personalizado
- Control de intensidad del tinte: Slider de 10% a 100% para ajuste fino
- Contraste WCAG en cada paso: Badges AAA/AA/Fail contra blanco y negro
- Vista previa de texto: Cómo se ve texto claro/oscuro sobre cada gris con ratio de contraste
- Copia en 3 formatos: HEX, RGB o HSL — clic en cualquier paso para copiar
- Copiar todo: Toda la escala en el formato seleccionado con un clic
- 4 exportaciones: CSS variables, SCSS variables, Tailwind config y JSON
Métodos de distribución: ¿cuál elegir?
- Lineal: Incrementos iguales de luminosidad. Ideal para escalas matemáticas o cuando necesitas pasos perfectamente equidistantes. Simple pero puede tener saltos perceptuales.
- Perceptual (recomendado): Distribución basada en raíz cuadrada que concentra más pasos en los tonos medios, donde el ojo humano distingue mejor las diferencias. La mejor opción para UI y diseño visual.
- Logarítmica: Concentra más pasos en los tonos oscuros (0-40% luminosidad). Perfecta para temas oscuros, fondos, sombras y overlays donde necesitas transiciones sutiles entre oscuros.
Grises con tinte: la diferencia profesional
Los grises puros (saturación 0%) pueden parecer planos, fríos o artificiales en interfaces. Los diseñadores profesionales usan grises con tinte — grises con una mínima cantidad de saturación cromática — para crear sensaciones más cálidas, frías o elegantes:
- Cálido (30°): Grises con tinte naranja/marrón. Sensación acogedora, orgánica. Ideal para branding cálido.
- Frío (220°): Grises con tinte azul. Sensación tech, limpia, moderna. El más popular para SaaS y dashboards.
- Rosa (350°): Grises con tinte rosado. Elegante, sofisticado. Usado en marcas de lujo y moda.
- Salvia (140°): Grises con tinte verde. Natural, ecológico. Para marcas sostenibles.
- Pizarra (215°): Grises con tinte azul-gris intenso. El más robusto, similar a Tailwind Slate.
Contraste WCAG en escalas de grises
Cada paso de la escala muestra su nivel WCAG contra blanco y negro. Esto te permite saber de un vistazo qué grises puedes usar como fondo para texto blanco (AAA, AA) y cuáles necesitan texto negro. La sección de vista previa de texto muestra el resultado real con el ratio exacto.
💡 Ejemplos de uso prácticos
Caso 1: Design system completo desde cero
Necesitas una escala de grises completa para tu design system corporativo.
→ Selecciona 10 pasos con distribución Perceptual
→ Elige tinte Frío o Pizarra para sensación tech
→ Exporta como Tailwind config para tu proyecto
→ Resultado: gray-50 a gray-900, listo para tailwind.config.js
Caso 2: Jerarquía tipográfica accesible
Definir colores para títulos, cuerpo, texto secundario y placeholders que cumplan WCAG.
→ Títulos: gray-900 (AAA vs blanco) — máximo contraste
→ Cuerpo: gray-700 (AA vs blanco) — legible y no agresivo
→ Secundario: gray-500 — verificar badge WCAG antes de usar
→ Placeholder: gray-400 — solo para texto no esencial
Caso 3: Modo oscuro consistente
Crear escala de grises para tema oscuro invirtiendo la semántica.
→ Fondo principal: gray-900 · Fondo elevado: gray-800
→ Bordes: gray-700 · Texto secundario: gray-400
→ Texto principal: gray-50 · Mantén el mismo tinte que el tema claro
→ Usa distribución Logarítmica para más matices en oscuros
Caso 4: Marca cálida y acogedora
Tu marca requiere una sensación orgánica, no fría ni tech.
→ Selecciona tinte Cálido con intensidad al 70%
→ Los grises tendrán un sutil tono marrón/arena
→ Exporta como CSS variables para tu proyecto vanilla
Caso 5: Escala mínima para landing page
No necesitas 11 grises — solo los esenciales para una landing.
→ Selecciona 5 pasos con distribución Perceptual
→ Obtendrás: gris muy claro, claro, medio, oscuro, muy oscuro
→ Copia individualmente cada uno en HEX