Generador Material Design
Genera paletas completas Material Design 3 con tonos 50-900, acentos A100-A700, roles de color MD3 y vista previa de UI
Genera paletas Material Design 3 completas: escala 50-900, acentos A100-A700, roles de color MD3 (Primary, Secondary, Tertiary, Surface), contraste WCAG, vista previa UI y exportación a CSS, Tailwind, Flutter, Android XML, SCSS y JSON.
Color Base
rgb(33, 150, 243)
Secundario
#f37e21
Terciario
#f32196
Presets Material Design
Tonos Primarios (50-900)
Colores de Acento (A100-A700)
Variantes vibrantes y saturadas para FABs, CTAs y elementos destacados
Ratios de Contraste (WCAG)
| Tono | HEX | vs Blanco | vs Negro | WCAG |
|---|---|---|---|---|
| 50 | #f0f3f5 | 1.11:1 | 18.84:1 | AAA |
| 100 | #dfe6ec | 1.26:1 | 16.67:1 | AAA |
| 200 | #b5cfe3 | 1.62:1 | 13.00:1 | AAA |
| 300 | #82b8e3 | 2.12:1 | 9.91:1 | AAA |
| 400 | #4ba2e7 | 2.76:1 | 7.62:1 | AAA |
| 500 | #2196f3 | 3.12:1 | 6.72:1 | AA |
| 600 | #0673d0 | 4.80:1 | 4.37:1 | AA |
| 700 | #015db1 | 6.56:1 | 3.20:1 | AA |
| 800 | #01488e | 9.06:1 | 2.32:1 | AAA |
| 900 | #032d59 | 13.78:1 | 1.52:1 | AAA |
| A100 | #a3d6ff | 1.54:1 | 13.62:1 | AAA |
| A200 | #4db0ff | 2.34:1 | 8.97:1 | AAA |
| A400 | #008eff | 3.33:1 | 6.31:1 | AA |
| A700 | #0072cc | 4.91:1 | 4.28:1 | AA |
Guía de Uso
Tonos
- • 50-200: Fondos claros, superficies elevadas
- • 300-500: Colores primarios, botones, enlaces
- • 600-900: Texto sobre fondos claros, énfasis
Recomendaciones
- • 500: Color principal de tu marca
- • 700: Estados hover y activos
- • 50-100: Fondos y superficies
Colores de Acento
- • A100: Acento suave, tooltips
- • A200: FABs, switches, sliders
- • A400-A700: CTAs fuertes, estados activos
Cómo funciona
Material Design es el sistema de diseño de Google utilizado en Android, Flutter, Angular Material y MUI (React). Este generador crea paletas completas compatibles con Material Design 3 (Material You), incluyendo la escala de tonos, colores de acento y los roles de color que define la especificación.
Estructura de una paleta Material Design
- 50-100: Tonos muy claros — fondos, superficies elevadas, containers
- 200-400: Tonos medios — elementos secundarios, bordes, estados disabled
- 500: Color base principal — tu color de marca o primary
- 600-700: Tonos para hover, estados activos y AppBar
- 800-900: Tonos oscuros — texto sobre fondos claros, énfasis fuerte
- A100-A700: Colores de acento vibrantes — FABs, CTAs, switches, sliders
Roles de Color en Material Design 3
Material Design 3 introduce un sistema de roles de color que va más allá de la simple escala de tonos:
- Primary / On Primary: Color principal y su texto legible
- Primary Container / On Primary Container: Fondos suaves con su texto
- Secondary: Color complementario generado automáticamente
- Tertiary: Color triádico para variedad visual
- Error: Rojo semántico para estados de error
- Surface / On Surface: Fondos y texto general (modo claro y oscuro)
- Outline: Bordes y divisores
💡 Casos de uso prácticos
Caso 1: App Android / Flutter con Material You
Tu app necesita un tema basado en el color corporativo #6366F1.
→ Genera la paleta 50-900 + acentos A100-A700
→ Usa la pestaña "Roles MD3" para obtener Primary, Secondary, Tertiary, Surface
→ Exporta directamente a Flutter (Dart) o Android XML
→ Previsualiza con la "Vista Previa" en modo claro y oscuro
Caso 2: React (MUI) / Angular Material
Configurar un tema personalizado con createTheme() en MUI o $mat-palette en Angular Material.
→ Exporta como CSS custom properties o SCSS map
→ Incluye automáticamente los roles MD3 como variables
→ Los colores secundario y terciario se generan automáticamente
Caso 3: Tailwind CSS con tokens Material
Necesitas integrar colores Material Design en tu proyecto Tailwind.
→ Exporta como config de Tailwind lista para copiar
→ Incluye primary (con todos los tonos), secondary, tertiary y error
→ Usa bg-primary-500, text-primary-900, etc.
Caso 4: Verificar accesibilidad WCAG
Necesitas asegurar que los colores de tu tema cumplen los estándares de contraste.
→ Cada tono muestra su nivel WCAG (AAA, AA, AA Large o Fail)
→ La tabla de contraste muestra ratios exactos vs blanco y vs negro
→ Identifica qué tonos son seguros para texto y cuáles para fondos
Formatos de exportación
Exporta tu paleta Material Design completa (14 tonos + roles MD3) a 6 formatos:
- CSS: Custom properties con variables MD3
- SCSS: Mapa Sass + variables de roles
- Tailwind: Config lista para
tailwind.config.js - Flutter: Clase Dart con constantes Color
- Android XML: Archivo
colors.xmlpara recursos Android - JSON: Datos completos con tonos y roles