Selector de Color de Material Design
Paleta fija de Material Design de 2014 (Material Design 2). Material 3 utiliza paletas tonales generadas.
Elige una familia de colores
La paleta de Material Design define 19 familias de colores, Rojo, Rosa, Púrpura hasta Gris y Gris Azulado, cada una con un rango desde el tono 50 (pálido) hasta el 900 (casi negro), además de tonos de acento opcionales A100–A700. Este selector presenta cada muestra en una cuadrícula y te permite copiar cualquier valor como HEX, RGB, HSL o nombre de token de Material para usar en Tailwind, variables CSS, UIColor de iOS o recursos de color de Android.
Cómo usar la paleta
-
1
Escanea la cuadrícula
Las familias están a la izquierda; los tonos se extienden en la parte superior de 50 a 900.
-
2
Toca una muestra
Verás HEX, RGB, HSL y el nombre de token de Material canónico (por ejemplo, Índigo 500).
-
3
Copia el formato que necesitas
Un clic copia la cadena exacta: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.
-
4
Verifica el contraste
El panel muestra la relación de contraste WCAG contra blanco y negro para elegir colores de texto accesibles.
La escalera de tonos
| Tono | Uso |
|---|---|
| 50 | Fondos de hover, superficies pálidas |
| 100 | Fondos de chips, rellenos de bajo énfasis |
| 200 | Estados deshabilitados, superficies secundarias |
| 300 | Bordes, separadores |
| 400 | Texto secundario en fondos claros |
| 500 | Color predeterminado / primario, la base |
| 600 | Estados interactivos (hover, presionado) |
| 700 | Encabezados, fuerte énfasis |
| 800 | Texto oscuro en fondos claros |
| 900 | Elemento de mayor contraste (casi negro) |
| A100 | Acento claro |
| A200 | Acento más claro que el predeterminado |
| A400 | Acento (a menudo el “brillante” destacado de la marca) |
| A700 | Acento profundo |
Familias en la paleta de Material
Rojo, Rosa, Púrpura, Púrpura Profundo, Índigo, Azul, Azul Claro, Cian, Verde Azulado, Verde, Verde Claro, Lima, Amarillo, Ámbar, Naranja, Naranja Profundo, Marrón, Gris, Gris Azulado.
Marrón, Gris y Gris Azulado no tienen tonos de acento, son las familias neutrales.
Seleccionando un primario
La especificación sugiere 500 como el color primario, 700 para la variante más oscura (usada en la barra de estado en Android), y un acento A200 o A400 para acciones secundarias. Esta es una convención, no una regla, el Material 3 moderno (color dinámico) deriva paletas de un solo color semilla en lugar de elegir de rampas fijas.
Punto de control de accesibilidad
- Texto del cuerpo: relación de contraste ≥ 4.5:1 contra su fondo (WCAG AA).
- Texto grande (18 pt+ negrita o 24 pt+ regular): ≥ 3:1.
- Componentes de UI y objetos gráficos: ≥ 3:1.
La paleta no es segura en contraste por defecto. Amarillo 500 sobre blanco falla gravemente en WCAG. Siempre verifica la relación antes de enviar una combinación, el selector lo muestra en línea.
Formatos soportados
- HEX:
#3F51B5(Índigo 500). - RGB:
rgb(63 81 181)(sintaxis moderna) orgb(63, 81, 181)(legado). - HSL:
hsl(231 48% 48%). - Token de Material:
Índigo 500, útil para documentos de diseño y Figma. - Tailwind:
indigo-500, inserta directamente en un atributo de clase si tu tema de Tailwind usa la escala de Material. - XML de color de Android:
<color name="indigo_500">#FF3F51B5</color>, formato ARGB. - UIColor de iOS:
UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).
Preguntas frecuentes
Esta herramienta reproduce la paleta fija de Material Design publicada por Google en 2014 y documentada después en el sitio de Material Design 2. No genera paletas tonales de Material 3 a partir de un color semilla. Úsala cuando necesites las muestras clásicas numeradas y de acento.
Marrón, Gris y Gris Azulado son neutrales y no participan en combinaciones de colores de acento. La especificación simplemente omite A100–A700 para ellos.
La paleta predeterminada de Tailwind está inspirada en Material pero no es idéntica. Si deseas colores de Material exactos, extiende theme.extend.colors con los valores de Material y refiérete a ellos como material-indigo-500 en tus nombres de clase.
La convención dice que sí, pero nada te impide usar 700 o un acento como primario. La convención 500 se trata de tener un tono base confiable con 8 pasos en cualquier dirección para variación.
Herramientas relacionadas
Creador de listas por niveles
Crea una lista privada con texto e imágenes locales, personaliza niveles, clasifica con arrastre o teclado y exporta JSON, PNG o SVG.
Comprimir GIF
Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.
WebP a JPG
Convierte imágenes WebP a JPG/JPEG directamente en el navegador. Elige la calidad, aplana la transparencia sobre un color de fondo y descarga sin subir archivos.
Vectorizador de PNG a SVG
Convierte imágenes raster PNG en rutas SVG desde el navegador. Ideal para logotipos, iconos y arte lineal. Controla el umbral, el número de colores y el suavizado.
Generador de códigos de barras
Crea en el navegador códigos de barras 1D en Code 128, EAN, UPC, ITF-14 y otros formatos compatibles. Descarga el resultado como SVG o PNG.
Generador de códigos QR
Genera un código QR localmente en el navegador a partir de una URL, texto plano o una carga QR correctamente formateada, y descárgalo como PNG.