primary
#6750A4
rgb(103, 80, 164)
Light Schemeprimarytone role
Referencia de colores de Material Design
Busca, filtra y copia tokens de color de Material Design 3 para modo claro, modo oscuro y paletas tonales de Material You. Encuentra al instante los valores exactos de los tokens para Android, web y sistemas de UI multiplataforma, sin registro.
Material Design Color Reference
Search and filter Material Design 3 color tokens from light and dark role schemes plus full Material You tonal palettes. Copy token names, HEX, and RGB values instantly.
Showing 156 of 156 Material Design 3 tokens
Material You baseline palette
on-primary
#FFFFFF
rgb(255, 255, 255)
Light Schemeprimarytone role
primary-container
#EADDFF
rgb(234, 221, 255)
Light Schemeprimarytone role
on-primary-container
#21005D
rgb(33, 0, 93)
Light Schemeprimarytone role
secondary
#625B71
rgb(98, 91, 113)
Light Schemesecondarytone role
on-secondary
#FFFFFF
rgb(255, 255, 255)
Light Schemesecondarytone role
secondary-container
#E8DEF8
rgb(232, 222, 248)
Light Schemesecondarytone role
on-secondary-container
#1D192B
rgb(29, 25, 43)
Light Schemesecondarytone role
tertiary
#7D5260
rgb(125, 82, 96)
Light Schemetertiarytone role
on-tertiary
#FFFFFF
rgb(255, 255, 255)
Light Schemetertiarytone role
tertiary-container
#FFD8E4
rgb(255, 216, 228)
Light Schemetertiarytone role
on-tertiary-container
#31111D
rgb(49, 17, 29)
Light Schemetertiarytone role
error
#B3261E
rgb(179, 38, 30)
Light Schemeerrortone role
on-error
#FFFFFF
rgb(255, 255, 255)
Light Schemeerrortone role
error-container
#F9DEDC
rgb(249, 222, 220)
Light Schemeerrortone role
on-error-container
#410E0B
rgb(65, 14, 11)
Light Schemeerrortone role
background
#FFFBFE
rgb(255, 251, 254)
Light Schemesurfacetone role
on-background
#1C1B1F
rgb(28, 27, 31)
Light Schemesurfacetone role
surface
#FFFBFE
rgb(255, 251, 254)
Light Schemesurfacetone role
on-surface
#1C1B1F
rgb(28, 27, 31)
Light Schemesurfacetone role
surface-variant
#E7E0EC
rgb(231, 224, 236)
Light Schemesurfacetone role
on-surface-variant
#49454F
rgb(73, 69, 79)
Light Schemesurfacetone role
outline
#79747E
rgb(121, 116, 126)
Light Schemeutilitytone role
outline-variant
#CAC4D0
rgb(202, 196, 208)
Light Schemeutilitytone role
shadow
#000000
rgb(0, 0, 0)
Light Schemeutilitytone role
scrim
#000000
rgb(0, 0, 0)
Light Schemeutilitytone role
inverse-surface
#313033
rgb(49, 48, 51)
Light Schemesurfacetone role
inverse-on-surface
#F4EFF4
rgb(244, 239, 244)
Light Schemesurfacetone role
inverse-primary
#D0BCFF
rgb(208, 188, 255)
Light Schemeprimarytone role
surface-dim
#DED8E1
rgb(222, 216, 225)
Light Schemesurfacetone role
surface-bright
#FFFBFE
rgb(255, 251, 254)
Light Schemesurfacetone role
surface-container-lowest
#FFFFFF
rgb(255, 255, 255)
Light Schemesurfacetone role
surface-container-low
#F7F2FA
rgb(247, 242, 250)
Light Schemesurfacetone role
surface-container
#F3EDF7
rgb(243, 237, 247)
Light Schemesurfacetone role
surface-container-high
#ECE6F0
rgb(236, 230, 240)
Light Schemesurfacetone role
surface-container-highest
#E6E0E9
rgb(230, 224, 233)
Light Schemesurfacetone role
primary
#D0BCFF
rgb(208, 188, 255)
Dark Schemeprimarytone role
on-primary
#381E72
rgb(56, 30, 114)
Dark Schemeprimarytone role
primary-container
#4F378B
rgb(79, 55, 139)
Dark Schemeprimarytone role
on-primary-container
#EADDFF
rgb(234, 221, 255)
Dark Schemeprimarytone role
secondary
#CCC2DC
rgb(204, 194, 220)
Dark Schemesecondarytone role
on-secondary
#332D41
rgb(51, 45, 65)
Dark Schemesecondarytone role
secondary-container
#4A4458
rgb(74, 68, 88)
Dark Schemesecondarytone role
on-secondary-container
#E8DEF8
rgb(232, 222, 248)
Dark Schemesecondarytone role
tertiary
#EFB8C8
rgb(239, 184, 200)
Dark Schemetertiarytone role
on-tertiary
#492532
rgb(73, 37, 50)
Dark Schemetertiarytone role
tertiary-container
#633B48
rgb(99, 59, 72)
Dark Schemetertiarytone role
on-tertiary-container
#FFD8E4
rgb(255, 216, 228)
Dark Schemetertiarytone role
error
#F2B8B5
rgb(242, 184, 181)
Dark Schemeerrortone role
on-error
#601410
rgb(96, 20, 16)
Dark Schemeerrortone role
error-container
#8C1D18
rgb(140, 29, 24)
Dark Schemeerrortone role
on-error-container
#F9DEDC
rgb(249, 222, 220)
Dark Schemeerrortone role
background
#1C1B1F
rgb(28, 27, 31)
Dark Schemesurfacetone role
on-background
#E6E1E5
rgb(230, 225, 229)
Dark Schemesurfacetone role
surface
#1C1B1F
rgb(28, 27, 31)
Dark Schemesurfacetone role
on-surface
#E6E1E5
rgb(230, 225, 229)
Dark Schemesurfacetone role
surface-variant
#49454F
rgb(73, 69, 79)
Dark Schemesurfacetone role
on-surface-variant
#CAC4D0
rgb(202, 196, 208)
Dark Schemesurfacetone role
outline
#938F99
rgb(147, 143, 153)
Dark Schemeutilitytone role
outline-variant
#49454F
rgb(73, 69, 79)
Dark Schemeutilitytone role
shadow
#000000
rgb(0, 0, 0)
Dark Schemeutilitytone role
scrim
#000000
rgb(0, 0, 0)
Dark Schemeutilitytone role
inverse-surface
#E6E1E5
rgb(230, 225, 229)
Dark Schemesurfacetone role
inverse-on-surface
#313033
rgb(49, 48, 51)
Dark Schemesurfacetone role
inverse-primary
#6750A4
rgb(103, 80, 164)
Dark Schemeprimarytone role
surface-dim
#141218
rgb(20, 18, 24)
Dark Schemesurfacetone role
surface-bright
#3B383E
rgb(59, 56, 62)
Dark Schemesurfacetone role
surface-container-lowest
#0F0D13
rgb(15, 13, 19)
Dark Schemesurfacetone role
surface-container-low
#1D1B20
rgb(29, 27, 32)
Dark Schemesurfacetone role
surface-container
#211F26
rgb(33, 31, 38)
Dark Schemesurfacetone role
surface-container-high
#2B2930
rgb(43, 41, 48)
Dark Schemesurfacetone role
surface-container-highest
#36343B
rgb(54, 52, 59)
Dark Schemesurfacetone role
primary0
#000000
rgb(0, 0, 0)
Tonal Paletteprimarytone 0
primary10
#21005D
rgb(33, 0, 93)
Tonal Paletteprimarytone 10
primary20
#381E72
rgb(56, 30, 114)
Tonal Paletteprimarytone 20
primary30
#4F378B
rgb(79, 55, 139)
Tonal Paletteprimarytone 30
primary40
#6750A4
rgb(103, 80, 164)
Tonal Paletteprimarytone 40
primary50
#7F67BE
rgb(127, 103, 190)
Tonal Paletteprimarytone 50
primary60
#9A82DB
rgb(154, 130, 219)
Tonal Paletteprimarytone 60
primary70
#B69DF8
rgb(182, 157, 248)
Tonal Paletteprimarytone 70
primary80
#D0BCFF
rgb(208, 188, 255)
Tonal Paletteprimarytone 80
primary90
#EADDFF
rgb(234, 221, 255)
Tonal Paletteprimarytone 90
primary95
#F6EDFF
rgb(246, 237, 255)
Tonal Paletteprimarytone 95
primary98
#FEF7FF
rgb(254, 247, 255)
Tonal Paletteprimarytone 98
primary99
#FFFBFE
rgb(255, 251, 254)
Tonal Paletteprimarytone 99
primary100
#FFFFFF
rgb(255, 255, 255)
Tonal Paletteprimarytone 100
secondary0
#000000
rgb(0, 0, 0)
Tonal Palettesecondarytone 0
secondary10
#1D192B
rgb(29, 25, 43)
Tonal Palettesecondarytone 10
secondary20
#332D41
rgb(51, 45, 65)
Tonal Palettesecondarytone 20
secondary30
#4A4458
rgb(74, 68, 88)
Tonal Palettesecondarytone 30
secondary40
#625B71
rgb(98, 91, 113)
Tonal Palettesecondarytone 40
secondary50
#7A7289
rgb(122, 114, 137)
Tonal Palettesecondarytone 50
secondary60
#958DA5
rgb(149, 141, 165)
Tonal Palettesecondarytone 60
secondary70
#B0A7C0
rgb(176, 167, 192)
Tonal Palettesecondarytone 70
secondary80
#CCC2DC
rgb(204, 194, 220)
Tonal Palettesecondarytone 80
secondary90
#E8DEF8
rgb(232, 222, 248)
Tonal Palettesecondarytone 90
secondary95
#F6EDFF
rgb(246, 237, 255)
Tonal Palettesecondarytone 95
secondary98
#FEF7FF
rgb(254, 247, 255)
Tonal Palettesecondarytone 98
secondary99
#FFFBFE
rgb(255, 251, 254)
Tonal Palettesecondarytone 99
secondary100
#FFFFFF
rgb(255, 255, 255)
Tonal Palettesecondarytone 100
tertiary0
#000000
rgb(0, 0, 0)
Tonal Palettetertiarytone 0
tertiary10
#31111D
rgb(49, 17, 29)
Tonal Palettetertiarytone 10
tertiary20
#492532
rgb(73, 37, 50)
Tonal Palettetertiarytone 20
tertiary30
#633B48
rgb(99, 59, 72)
Tonal Palettetertiarytone 30
tertiary40
#7D5260
rgb(125, 82, 96)
Tonal Palettetertiarytone 40
tertiary50
#986977
rgb(152, 105, 119)
Tonal Palettetertiarytone 50
tertiary60
#B58392
rgb(181, 131, 146)
Tonal Palettetertiarytone 60
tertiary70
#D29DAC
rgb(210, 157, 172)
Tonal Palettetertiarytone 70
tertiary80
#EFB8C8
rgb(239, 184, 200)
Tonal Palettetertiarytone 80
tertiary90
#FFD8E4
rgb(255, 216, 228)
Tonal Palettetertiarytone 90
tertiary95
#FFECF1
rgb(255, 236, 241)
Tonal Palettetertiarytone 95
tertiary98
#FFF8F8
rgb(255, 248, 248)
Tonal Palettetertiarytone 98
tertiary99
#FFFBFA
rgb(255, 251, 250)
Tonal Palettetertiarytone 99
tertiary100
#FFFFFF
rgb(255, 255, 255)
Tonal Palettetertiarytone 100
error0
#000000
rgb(0, 0, 0)
Tonal Paletteerrortone 0
error10
#410E0B
rgb(65, 14, 11)
Tonal Paletteerrortone 10
error20
#601410
rgb(96, 20, 16)
Tonal Paletteerrortone 20
error30
#8C1D18
rgb(140, 29, 24)
Tonal Paletteerrortone 30
error40
#B3261E
rgb(179, 38, 30)
Tonal Paletteerrortone 40
error50
#DC362E
rgb(220, 54, 46)
Tonal Paletteerrortone 50
error60
#E46962
rgb(228, 105, 98)
Tonal Paletteerrortone 60
error70
#EC928E
rgb(236, 146, 142)
Tonal Paletteerrortone 70
error80
#F2B8B5
rgb(242, 184, 181)
Tonal Paletteerrortone 80
error90
#F9DEDC
rgb(249, 222, 220)
Tonal Paletteerrortone 90
error95
#FCEEEE
rgb(252, 238, 238)
Tonal Paletteerrortone 95
error98
#FFF8F7
rgb(255, 248, 247)
Tonal Paletteerrortone 98
error99
#FFFBF9
rgb(255, 251, 249)
Tonal Paletteerrortone 99
error100
#FFFFFF
rgb(255, 255, 255)
Tonal Paletteerrortone 100
neutral0
#000000
rgb(0, 0, 0)
Tonal Paletteneutraltone 0
neutral10
#1C1B1F
rgb(28, 27, 31)
Tonal Paletteneutraltone 10
neutral20
#313033
rgb(49, 48, 51)
Tonal Paletteneutraltone 20
neutral30
#484649
rgb(72, 70, 73)
Tonal Paletteneutraltone 30
neutral40
#605D62
rgb(96, 93, 98)
Tonal Paletteneutraltone 40
neutral50
#787579
rgb(120, 117, 121)
Tonal Paletteneutraltone 50
neutral60
#939094
rgb(147, 144, 148)
Tonal Paletteneutraltone 60
neutral70
#AEAAAE
rgb(174, 170, 174)
Tonal Paletteneutraltone 70
neutral80
#C9C5CA
rgb(201, 197, 202)
Tonal Paletteneutraltone 80
neutral90
#E6E1E5
rgb(230, 225, 229)
Tonal Paletteneutraltone 90
neutral95
#F4EFF4
rgb(244, 239, 244)
Tonal Paletteneutraltone 95
neutral98
#FDF8FD
rgb(253, 248, 253)
Tonal Paletteneutraltone 98
neutral99
#FFFBFE
rgb(255, 251, 254)
Tonal Paletteneutraltone 99
neutral100
#FFFFFF
rgb(255, 255, 255)
Tonal Paletteneutraltone 100
neutral-variant0
#000000
rgb(0, 0, 0)
Tonal Paletteneutral-varianttone 0
neutral-variant10
#1D1A22
rgb(29, 26, 34)
Tonal Paletteneutral-varianttone 10
neutral-variant20
#322F37
rgb(50, 47, 55)
Tonal Paletteneutral-varianttone 20
neutral-variant30
#49454F
rgb(73, 69, 79)
Tonal Paletteneutral-varianttone 30
neutral-variant40
#605D66
rgb(96, 93, 102)
Tonal Paletteneutral-varianttone 40
neutral-variant50
#79747E
rgb(121, 116, 126)
Tonal Paletteneutral-varianttone 50
neutral-variant60
#938F99
rgb(147, 143, 153)
Tonal Paletteneutral-varianttone 60
neutral-variant70
#AEA9B4
rgb(174, 169, 180)
Tonal Paletteneutral-varianttone 70
neutral-variant80
#CAC4D0
rgb(202, 196, 208)
Tonal Paletteneutral-varianttone 80
neutral-variant90
#E7E0EC
rgb(231, 224, 236)
Tonal Paletteneutral-varianttone 90
neutral-variant95
#F5EEFA
rgb(245, 238, 250)
Tonal Paletteneutral-varianttone 95
neutral-variant98
#FEF7FF
rgb(254, 247, 255)
Tonal Paletteneutral-varianttone 98
neutral-variant99
#FFFBFE
rgb(255, 251, 254)
Tonal Paletteneutral-varianttone 99
neutral-variant100
#FFFFFF
rgb(255, 255, 255)
Tonal Paletteneutral-varianttone 100
¿Por qué usar nuestra Referencia de colores de Material Design?
- Busca cualquier token de Material: encuentra tokens de Material Design 3 al instante por nombre de rol, valor HEX, valor RGB, familia o modo.
- Vistas clara, oscura y tonal: alterna entre roles del esquema claro, roles del esquema oscuro y tokens de paletas tonales de Material You desde una sola referencia.
- Copia con un clic: copia nombres de tokens, valores HEX y valores RGB directamente desde cada tarjeta para agilizar el traspaso entre diseño e implementación.
- Herramienta privada solo en el navegador: toda la búsqueda, el filtrado y la copia se ejecutan localmente en tu navegador, sin subidas, cuentas ni dependencias de seguimiento.
Casos de uso habituales de la Referencia de colores de Material Design
- Temas de apps Android: asigna rápidamente los roles de color de Compose MaterialTheme mientras creas pantallas Android que siguen la guía de Material Design 3.
- Tokens de diseño multiplataforma: consulta colores idénticos de Material You en implementaciones Android, Flutter y web para reducir diferencias visuales.
- Traspaso de diseño a código: convierte los tokens elegidos por el diseñador en valores HEX y RGB listos para copiar y usar directamente en código y variables de estilo.
- Auditoría de librerías de componentes: comprueba que tarjetas, diálogos y superficies usan los pares de roles correctos para fondos, contornos y texto sobre color.
- Exploración de paletas de marca: recorre paletas tonales de todas las familias para elegir tonos equilibrados para acentos de marca, estados y superficies semánticas.
- Revisiones de accesibilidad de UI: valida las combinaciones de tokens antes de implementar comprobando la legibilidad en modo claro y oscuro.
Preguntas frecuentes
La Referencia de colores de Material Design es un buscador de tokens de color de Material Design 3. Incluye tokens de rol claros y oscuros y valores de paletas tonales de Material You, para que encuentres rápidamente nombres oficiales de tokens y valores de color.
Sí. La herramienta incluye tokens de rol claros y oscuros de referencia, como primary, on-primary, surface, on-surface, outline, roles de error y variantes de contenedor usadas en los sistemas MD3.
Sí. Puedes buscar por nombre de token, valor HEX, valor RGB, etiqueta de modo o etiqueta de familia. Es útil al convertir especificaciones de diseño en tokens de implementación.
Sí. La referencia incluye valores de paletas tonales en los principales pasos de tono para las familias primary, secondary, tertiary, error, neutral y neutral-variant.
No. Esta página contiene tokens de referencia base de Material Design 3. Los esquemas de color dinámicos generados a partir de una semilla varían según el color de entrada y el contexto de ejecución, y quedan fuera del alcance de esta consulta estática.
Sí. La herramienta es totalmente gratuita, sin registro, sin cuentas y sin límites de uso.
Sí. Todo se ejecuta localmente en tu navegador. La herramienta no sube la entrada, no guarda búsquedas ni envía consultas de color a ningún servicio.
Sí. Los tokens y valores son útiles para Android, web y sistemas de diseño multiplataforma. Puedes copiar nombres de tokens y valores de color directamente en documentación, tokens de diseño y código.