primary
#6750A4
rgb(103, 80, 164)
Light Schemeprimarytone role
Material Design Farbreferenz
Durchsuche, filtere und kopiere Material Design 3 Farb-Tokens für Light Mode, Dark Mode und Material You Tonpaletten. Finde exakte Token-Werte schnell für Android, Web und plattformübergreifende UI-Systeme, ohne Registrierung.
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
Warum unsere Material Design Farbreferenz nutzen?
- Jedes Material-Token finden: Finde Material Design 3 Tokens sofort nach Rollenname, HEX-Wert, RGB-Wert, Familie oder Modus.
- Helle, dunkle und tonale Ansicht: Wechsle zwischen Rollen des hellen Schemas, Rollen des dunklen Schemas und Tokens der Material You Tonpaletten in einer einzigen Referenz.
- Kopieren mit einem Klick: Kopiere Token-Namen, HEX-Werte und RGB-Werte direkt aus jeder Karte für eine schnellere Übergabe von Design zu Implementierung.
- Privates Tool nur im Browser: Suche, Filterung und Kopieren laufen lokal in deinem Browser, ohne Uploads, Konten oder Tracking.
Typische Anwendungsfälle der Material Design Farbreferenz
- Theming von Android-Apps: Ordne Compose MaterialTheme Farbrollen schnell zu, während du Android-Screens nach Material Design 3 Richtlinien baust.
- Plattformübergreifende Design-Tokens: Nutze identische Material You Farben in Android-, Flutter- und Web-Implementierungen, um visuelle Abweichungen zu reduzieren.
- Übergabe von Design zu Code: Wandle vom Designer gewählte Tokens in kopierfertige HEX- und RGB-Werte für Code und Stilvariablen um.
- Audits von Komponentenbibliotheken: Prüfe, ob Karten, Dialoge und Flächen die richtigen Rollenpaare für Hintergründe, Konturen und Text auf Farbe verwenden.
- Markenpaletten erkunden: Durchstöbere Tonpaletten aller Familien, um ausgewogene Töne für Markenakzente, Zustände und semantische Flächen zu wählen.
- Barrierefreiheit der UI prüfen: Validiere Rollenentscheidungen vor der Umsetzung, indem du Token-Kombinationen auf Lesbarkeit im dunklen und hellen Modus prüfst.
Häufig gestellte Fragen
Die Material Design Farbreferenz ist eine durchsuchbare Übersicht der Material Design 3 Farb-Tokens. Sie enthält helle und dunkle Rollen-Tokens sowie Werte der Material You Tonpaletten, damit du offizielle Token-Namen und Farbwerte schnell findest.
Ja. Das Tool enthält Basis-Tokens für helle und dunkle Rollen wie primary, on-primary, surface, on-surface, outline, Fehlerrollen und Container-Varianten, die in MD3-Systemen verwendet werden.
Ja. Du kannst nach Token-Namen, HEX-Wert, RGB-Wert, Modus-Label oder Familien-Label suchen. Das hilft, Designvorgaben in Implementierungs-Tokens zu übertragen.
Ja. Die Referenz enthält Werte der Tonpaletten über die wichtigsten Tonstufen für die Familien primary, secondary, tertiary, error, neutral und neutral-variant.
Nein. Diese Seite enthält Basis-Referenz-Tokens von Material Design 3. Dynamische Farbschemata aus einer Saatfarbe variieren je nach Eingabefarbe und Laufzeitkontext und liegen außerhalb dieser statischen Übersicht.
Ja. Das Tool ist völlig kostenlos, ohne Registrierung, ohne Konto und ohne Nutzungslimits.
Ja. Alles läuft lokal in deinem Browser. Das Tool lädt keine Eingaben hoch, speichert keine Suchen und sendet keine Farbabfragen an einen Dienst.
Ja. Die Tokens und Werte eignen sich für Android, Web und plattformübergreifende Designsysteme. Du kannst Token-Namen und Farbwerte direkt in Dokumentation, Design-Tokens und Code kopieren.