primary
#6750A4
rgb(103, 80, 164)
Light Schemeprimarytone role
Référence de couleurs Material Design
Recherchez, filtrez et copiez les jetons de couleur Material Design 3 pour le mode clair, le mode sombre et les palettes tonales Material You. Trouvez rapidement les valeurs exactes des jetons pour Android, le web et les systèmes d'interface multiplateformes, sans inscription.
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
Pourquoi utiliser notre Référence de couleurs Material Design ?
- Recherchez tous les jetons Material : trouvez instantanément les jetons Material Design 3 par nom de rôle, valeur HEX, valeur RVB, famille ou mode.
- Vues claire, sombre et tonale : passez des rôles du schéma clair aux rôles du schéma sombre et aux jetons des palettes tonales Material You depuis une seule référence.
- Copie en un clic : copiez les noms de jetons, les valeurs HEX et les valeurs RVB directement depuis chaque carte pour accélérer le passage du design à l'implémentation.
- Outil privé dans le navigateur : toute la recherche, le filtrage et la copie s'exécutent localement dans votre navigateur, sans téléversement, compte ni suivi.
Cas d'usage courants de la Référence de couleurs Material Design
- Thématisation d'applications Android : associez rapidement les rôles de couleur de Compose MaterialTheme en créant des écrans Android conformes aux recommandations Material Design 3.
- Jetons de design multiplateformes : référencez des couleurs Material You identiques sur Android, Flutter et le web pour réduire les écarts visuels.
- Passage du design au code : convertissez les jetons choisis par le designer en valeurs HEX et RVB prêtes à copier pour un usage direct dans le code et les variables de style.
- Audit de bibliothèque de composants : vérifiez que les cartes, les boîtes de dialogue et les surfaces utilisent les bonnes paires de rôles pour les fonds, les contours et le texte sur couleur.
- Exploration des palettes de marque : parcourez les palettes tonales de toutes les familles pour choisir des tons équilibrés pour les accents de marque, les états et les surfaces sémantiques.
- Revues d'accessibilité des interfaces : validez les choix de rôles avant l'implémentation en vérifiant la lisibilité des combinaisons de jetons en mode sombre et clair.
Foire aux questions
La Référence de couleurs Material Design est un moteur de recherche de jetons de couleur Material Design 3. Elle inclut les jetons de rôle clairs et sombres ainsi que les valeurs des palettes tonales Material You, pour retrouver rapidement les noms officiels des jetons et les valeurs de couleur.
Oui. L'outil inclut les jetons de rôle clairs et sombres de référence, comme primary, on-primary, surface, on-surface, outline, les rôles d'erreur et les variantes de conteneur utilisés dans les systèmes MD3.
Oui. Vous pouvez rechercher par nom de jeton, valeur HEX, valeur RVB, libellé de mode ou libellé de famille. C'est utile pour convertir des spécifications de design en jetons d'implémentation.
Oui. La référence inclut les valeurs des palettes tonales sur les principaux paliers de teinte pour les familles primary, secondary, tertiary, error, neutral et neutral-variant.
Non. Cette page contient les jetons de référence de base de Material Design 3. Les schémas de couleurs dynamiques générés à partir d'une graine varient selon la couleur d'entrée et le contexte d'exécution, et sortent du cadre de cette recherche statique.
Oui. L'outil est entièrement gratuit, sans inscription, sans compte et sans limite d'utilisation.
Oui. Tout s'exécute localement dans votre navigateur. L'outil ne téléverse aucune saisie, ne stocke pas les recherches et n'envoie aucune requête de couleur à un service distant.
Oui. Les jetons et les valeurs sont utiles pour Android, le web et les systèmes de design multiplateformes. Vous pouvez copier les noms de jetons et les valeurs de couleur directement dans la documentation, les jetons de design et le code.