¿Qué es Selector de colores Material Design?

Material Design Color Picker pone a tu disposición la paleta completa de colores de Material Design con todos los colores primarios y sus variantes de tono (50 a 900). Pulsa cualquier muestra para copiar el valor en HEX, RGB o HSL y comprueba la accesibilidad con la herramienta de contraste WCAG integrada.

La paleta cubre los 19 tonos principales (de Red a Brown) con las tonalidades 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y los acentos A100, A200, A400, A700 cuando Google los define. Cada muestra indica el HEX exacto y el panel de colores seleccionados permite armar la paleta de un proyecto y copiarla o descargarla.

Cómo usar

1. Explora la cuadrícula de colores que muestra todos los colores primarios de Material Design: Rojo, Rosa, Púrpura, Púrpura Oscuro, Índigo, Azul y más.
2. Haz clic en un color primario para expandir sus variantes de tono, desde el más claro (50) hasta el más oscuro (900), incluidos los tonos de acento (A100–A700).
3. Pulsa cualquier tono para copiar su valor en el formato elegido (HEX, RGB o HSL), añade tonos al panel de Colores Seleccionados y descarga la paleta como CSS, SCSS, configuración de Tailwind o JSON para tu proyecto.

Cuándo usar

• Elegir un color principal, un contenedor más claro y un hover más oscuro dentro del mismo tono.
• Igualar una interfaz Android o Flutter con la paleta oficial de Google sin adivinar HEX.
• Armar una paleta coherente para una presentación o material gráfico.

Resultado

Estás construyendo un panel de control y necesitas el color exacto 'Indigo 500' (#3F51B5) de Material Design para tu botón principal e 'Indigo 50' (#E8EAF6) para el fondo al pasar el cursor.

Preguntas frecuentes

¿Qué diferencia hay entre las tonalidades principales y las de acento (A)?

Las tonalidades 50–900 son variaciones tonales del mismo color y sirven para fondos, superficies y texto. Las A100–A700 tienen más saturación y Google las reserva para elementos de acción como botones o insignias.

¿Por qué algunos colores no tienen acentos?

Brown y Grey son colores intencionalmente desaturados, por eso Google nunca publicó sus variantes A. La herramienta respeta la especificación original y no inventa valores que no existen en el sistema.

¿Qué tonalidad uso para el texto principal?

Material recomienda Grey 900 sobre fondos claros y Grey 50 o blanco sobre fondos oscuros. Las tonalidades medias (500–600) funcionan para texto secundario o iconos con menos contraste.

¿Son los mismos colores de Material 3 (Material You)?

No. Esta paleta es la del sistema original publicado por Google en 2014. Material 3 introdujo paletas tonales dinámicas generadas a partir de un color semilla, que es un algoritmo distinto.

¿Cómo compruebo el contraste entre dos tonalidades?

Añade ambos tonos al panel de Colores Seleccionados y desplázate hasta el comprobador de contraste. Elige uno como primer plano y otro como fondo, y el panel mostrará el ratio WCAG con insignias AA y AAA de pasa/falla para texto normal y grande.

Herramientas relacionadas