primary
#6750A4
rgb(103, 80, 164)
Light Schemeprimarytone role
Referência de cores do Material Design
Pesquise, filtre e copie tokens de cor do Material Design 3 para modo claro, modo escuro e paletas tonais do Material You. Encontre rapidamente os valores exatos dos tokens para Android, web e sistemas de UI multiplataforma, sem cadastro.
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 que usar nossa Referência de cores do Material Design?
- Pesquise qualquer token do Material: encontre tokens do Material Design 3 na hora por nome de papel, valor HEX, valor RGB, família ou modo.
- Visões clara, escura e tonal: alterne entre papéis do esquema claro, papéis do esquema escuro e tokens de paletas tonais do Material You em uma única referência.
- Copiar com um clique: copie nomes de tokens, valores HEX e valores RGB direto de cada cartão para agilizar a passagem do design para a implementação.
- Ferramenta privada só no navegador: toda a pesquisa, o filtro e a cópia rodam localmente no seu navegador, sem uploads, contas ou rastreamento.
Casos de uso comuns da Referência de cores do Material Design
- Temas de apps Android: mapeie rapidamente os papéis de cor do Compose MaterialTheme enquanto cria telas Android que seguem as diretrizes do Material Design 3.
- Tokens de design multiplataforma: consulte cores idênticas do Material You em implementações Android, Flutter e web para reduzir diferenças visuais.
- Entrega de design para código: converta os tokens escolhidos pelo designer em valores HEX e RGB prontos para copiar e usar direto no código e em variáveis de estilo.
- Auditoria de bibliotecas de componentes: verifique se cartões, diálogos e superfícies usam os pares de papéis corretos para fundos, contornos e texto sobre cor.
- Exploração de paletas de marca: navegue pelas paletas tonais de todas as famílias para escolher tons equilibrados para acentos de marca, estados e superfícies semânticas.
- Revisões de acessibilidade de UI: valide escolhas de papéis antes de implementar conferindo a legibilidade das combinações de tokens nos modos escuro e claro.
Perguntas frequentes
A Referência de cores do Material Design é uma busca de tokens de cor do Material Design 3. Ela inclui tokens de papel claros e escuros e valores de paletas tonais do Material You, para você encontrar rapidamente nomes oficiais de tokens e valores de cor.
Sim. A ferramenta inclui tokens de papel claros e escuros de referência, como primary, on-primary, surface, on-surface, outline, papéis de erro e variantes de contêiner usados nos sistemas MD3.
Sim. Você pode pesquisar por nome do token, valor HEX, valor RGB, rótulo de modo ou rótulo de família. Isso é útil ao converter especificações de design em tokens de implementação.
Sim. A referência inclui valores de paletas tonais nos principais passos de tom para as famílias primary, secondary, tertiary, error, neutral e neutral-variant.
Não. Esta página contém tokens de referência base do Material Design 3. Esquemas de cor dinâmicos gerados a partir de uma semente variam conforme a cor de entrada e o contexto de execução e ficam fora do escopo desta consulta estática.
Sim. A ferramenta é totalmente gratuita, sem cadastro, sem necessidade de conta e sem limites de uso.
Sim. Tudo roda localmente no seu navegador. A ferramenta não envia entradas, não armazena buscas nem manda consultas de cor para nenhum serviço.
Sim. Os tokens e valores são úteis para Android, web e sistemas de design multiplataforma. Você pode copiar nomes de tokens e valores de cor diretamente para documentação, tokens de design e código.