Het klassieke palet van Material Design 2 (19 kleuren met tinten van 50 tot 900 en accenten A100–A700) en het basisschema van Material 3, met HEX- en RGB-codes om te kopiëren.
Material 3 heeft geen vast palet: het genereert alle kleuren van de interface uit één bronkleur (seed). Dit is het standaard lichte schema, gemaakt op basis van #6750A4.
Elke rol in het schema komt uit een van deze tonale paletten, met tonen van 0 (zwart) tot 100 (wit).
19 kleuren met tinten van 50 tot 900 en accenten (A100–A700). Brown, Grey en Blue Grey hebben geen accenten. Open een kleur om de tinten te bekijken en te kopiëren.
:root {
--md-sys-color-primary: #6750A4;
--md-sys-color-on-primary: #FFFFFF;
--md-sys-color-primary-container: #EADDFF;
--md-sys-color-on-primary-container: #21005D;
--md-sys-color-secondary: #625B71;
--md-sys-color-on-secondary: #FFFFFF;
--md-sys-color-secondary-container: #E8DEF8;
--md-sys-color-on-secondary-container: #1D192B;
--md-sys-color-tertiary: #7D5260;
--md-sys-color-on-tertiary: #FFFFFF;
--md-sys-color-tertiary-container: #FFD8E4;
--md-sys-color-on-tertiary-container: #31111D;
--md-sys-color-error: #B3261E;
--md-sys-color-on-error: #FFFFFF;
--md-sys-color-error-container: #F9DEDC;
--md-sys-color-on-error-container: #410E0B;
--md-sys-color-surface: #FEF7FF;
--md-sys-color-on-surface: #1D1B20;
--md-sys-color-surface-variant: #E7E0EC;
--md-sys-color-on-surface-variant: #49454F;
--md-sys-color-surface-container: #F3EDF7;
--md-sys-color-outline: #79747E;
--md-sys-color-outline-variant: #CAC4D0;
--md-sys-color-inverse-surface: #322F35;
--md-sys-color-inverse-primary: #D0BCFF;
}:root {
--md-red-50: #FFEBEE;
--md-red-100: #FFCDD2;
--md-red-200: #EF9A9A;
--md-red-300: #E57373;
--md-red-400: #EF5350;
--md-red-500: #F44336;
--md-red-600: #E53935;
--md-red-700: #D32F2F;
--md-red-800: #C62828;
--md-red-900: #B71C1C;
--md-red-a100: #FF8A80;
--md-red-a200: #FF5252;
--md-red-a400: #FF1744;
--md-red-a700: #D50000;
--md-pink-50: #FCE4EC;
--md-pink-100: #F8BBD0;
--md-pink-200: #F48FB1;
--md-pink-300: #F06292;
--md-pink-400: #EC407A;
--md-pink-500: #E91E63;
--md-pink-600: #D81B60;
--md-pink-700: #C2185B;
--md-pink-800: #AD1457;
--md-pink-900: #880E4F;
--md-pink-a100: #FF80AB;
--md-pink-a200: #FF4081;
--md-pink-a400: #F50057;
--md-pink-a700: #C51162;
--md-purple-50: #F3E5F5;
--md-purple-100: #E1BEE7;
--md-purple-200: #CE93D8;
--md-purple-300: #BA68C8;
--md-purple-400: #AB47BC;
--md-purple-500: #9C27B0;
--md-purple-600: #8E24AA;
--md-purple-700: #7B1FA2;
--md-purple-800: #6A1B9A;
--md-purple-900: #4A148C;
--md-purple-a100: #EA80FC;
--md-purple-a200: #E040FB;
--md-purple-a400: #D500F9;
--md-purple-a700: #AA00FF;
--md-deep-purple-50: #EDE7F6;
--md-deep-purple-100: #D1C4E9;
--md-deep-purple-200: #B39DDB;
--md-deep-purple-300: #9575CD;
--md-deep-purple-400: #7E57C2;
--md-deep-purple-500: #673AB7;
--md-deep-purple-600: #5E35B1;
--md-deep-purple-700: #512DA8;
--md-deep-purple-800: #4527A0;
--md-deep-purple-900: #311B92;
--md-deep-purple-a100: #B388FF;
--md-deep-purple-a200: #7C4DFF;
--md-deep-purple-a400: #651FFF;
--md-deep-purple-a700: #6200EA;
--md-indigo-50: #E8EAF6;
--md-indigo-100: #C5CAE9;
--md-indigo-200: #9FA8DA;
--md-indigo-300: #7986CB;
--md-indigo-400: #5C6BC0;
--md-indigo-500: #3F51B5;
--md-indigo-600: #3949AB;
--md-indigo-700: #303F9F;
--md-indigo-800: #283593;
--md-indigo-900: #1A237E;
--md-indigo-a100: #8C9EFF;
--md-indigo-a200: #536DFE;
--md-indigo-a400: #3D5AFE;
--md-indigo-a700: #304FFE;
--md-blue-50: #E3F2FD;
--md-blue-100: #BBDEFB;
--md-blue-200: #90CAF9;
--md-blue-300: #64B5F6;
--md-blue-400: #42A5F5;
--md-blue-500: #2196F3;
--md-blue-600: #1E88E5;
--md-blue-700: #1976D2;
--md-blue-800: #1565C0;
--md-blue-900: #0D47A1;
--md-blue-a100: #82B1FF;
--md-blue-a200: #448AFF;
--md-blue-a400: #2979FF;
--md-blue-a700: #2962FF;
--md-light-blue-50: #E1F5FE;
--md-light-blue-100: #B3E5FC;
--md-light-blue-200: #81D4FA;
--md-light-blue-300: #4FC3F7;
--md-light-blue-400: #29B6F6;
--md-light-blue-500: #03A9F4;
--md-light-blue-600: #039BE5;
--md-light-blue-700: #0288D1;
--md-light-blue-800: #0277BD;
--md-light-blue-900: #01579B;
--md-light-blue-a100: #80D8FF;
--md-light-blue-a200: #40C4FF;
--md-light-blue-a400: #00B0FF;
--md-light-blue-a700: #0091EA;
--md-cyan-50: #E0F7FA;
--md-cyan-100: #B2EBF2;
--md-cyan-200: #80DEEA;
--md-cyan-300: #4DD0E1;
--md-cyan-400: #26C6DA;
--md-cyan-500: #00BCD4;
--md-cyan-600: #00ACC1;
--md-cyan-700: #0097A7;
--md-cyan-800: #00838F;
--md-cyan-900: #006064;
--md-cyan-a100: #84FFFF;
--md-cyan-a200: #18FFFF;
--md-cyan-a400: #00E5FF;
--md-cyan-a700: #00B8D4;
--md-teal-50: #E0F2F1;
--md-teal-100: #B2DFDB;
--md-teal-200: #80CBC4;
--md-teal-300: #4DB6AC;
--md-teal-400: #26A69A;
--md-teal-500: #009688;
--md-teal-600: #00897B;
--md-teal-700: #00796B;
--md-teal-800: #00695C;
--md-teal-900: #004D40;
--md-teal-a100: #A7FFEB;
--md-teal-a200: #64FFDA;
--md-teal-a400: #1DE9B6;
--md-teal-a700: #00BFA5;
--md-green-50: #E8F5E9;
--md-green-100: #C8E6C9;
--md-green-200: #A5D6A7;
--md-green-300: #81C784;
--md-green-400: #66BB6A;
--md-green-500: #4CAF50;
--md-green-600: #43A047;
--md-green-700: #388E3C;
--md-green-800: #2E7D32;
--md-green-900: #1B5E20;
--md-green-a100: #B9F6CA;
--md-green-a200: #69F0AE;
--md-green-a400: #00E676;
--md-green-a700: #00C853;
--md-light-green-50: #F1F8E9;
--md-light-green-100: #DCEDC8;
--md-light-green-200: #C5E1A5;
--md-light-green-300: #AED581;
--md-light-green-400: #9CCC65;
--md-light-green-500: #8BC34A;
--md-light-green-600: #7CB342;
--md-light-green-700: #689F38;
--md-light-green-800: #558B2F;
--md-light-green-900: #33691E;
--md-light-green-a100: #CCFF90;
--md-light-green-a200: #B2FF59;
--md-light-green-a400: #76FF03;
--md-light-green-a700: #64DD17;
--md-lime-50: #F9FBE7;
--md-lime-100: #F0F4C3;
--md-lime-200: #E6EE9C;
--md-lime-300: #DCE775;
--md-lime-400: #D4E157;
--md-lime-500: #CDDC39;
--md-lime-600: #C0CA33;
--md-lime-700: #AFB42B;
--md-lime-800: #9E9D24;
--md-lime-900: #827717;
--md-lime-a100: #F4FF81;
--md-lime-a200: #EEFF41;
--md-lime-a400: #C6FF00;
--md-lime-a700: #AEEA00;
--md-yellow-50: #FFFDE7;
--md-yellow-100: #FFF9C4;
--md-yellow-200: #FFF59D;
--md-yellow-300: #FFF176;
--md-yellow-400: #FFEE58;
--md-yellow-500: #FFEB3B;
--md-yellow-600: #FDD835;
--md-yellow-700: #FBC02D;
--md-yellow-800: #F9A825;
--md-yellow-900: #F57F17;
--md-yellow-a100: #FFFF8D;
--md-yellow-a200: #FFFF00;
--md-yellow-a400: #FFEA00;
--md-yellow-a700: #FFD600;
--md-amber-50: #FFF8E1;
--md-amber-100: #FFECB3;
--md-amber-200: #FFE082;
--md-amber-300: #FFD54F;
--md-amber-400: #FFCA28;
--md-amber-500: #FFC107;
--md-amber-600: #FFB300;
--md-amber-700: #FFA000;
--md-amber-800: #FF8F00;
--md-amber-900: #FF6F00;
--md-amber-a100: #FFE57F;
--md-amber-a200: #FFD740;
--md-amber-a400: #FFC400;
--md-amber-a700: #FFAB00;
--md-orange-50: #FFF3E0;
--md-orange-100: #FFE0B2;
--md-orange-200: #FFCC80;
--md-orange-300: #FFB74D;
--md-orange-400: #FFA726;
--md-orange-500: #FF9800;
--md-orange-600: #FB8C00;
--md-orange-700: #F57C00;
--md-orange-800: #EF6C00;
--md-orange-900: #E65100;
--md-orange-a100: #FFD180;
--md-orange-a200: #FFAB40;
--md-orange-a400: #FF9100;
--md-orange-a700: #FF6D00;
--md-deep-orange-50: #FBE9E7;
--md-deep-orange-100: #FFCCBC;
--md-deep-orange-200: #FFAB91;
--md-deep-orange-300: #FF8A65;
--md-deep-orange-400: #FF7043;
--md-deep-orange-500: #FF5722;
--md-deep-orange-600: #F4511E;
--md-deep-orange-700: #E64A19;
--md-deep-orange-800: #D84315;
--md-deep-orange-900: #BF360C;
--md-deep-orange-a100: #FF9E80;
--md-deep-orange-a200: #FF6E40;
--md-deep-orange-a400: #FF3D00;
--md-deep-orange-a700: #DD2C00;
--md-brown-50: #EFEBE9;
--md-brown-100: #D7CCC8;
--md-brown-200: #BCAAA4;
--md-brown-300: #A1887F;
--md-brown-400: #8D6E63;
--md-brown-500: #795548;
--md-brown-600: #6D4C41;
--md-brown-700: #5D4037;
--md-brown-800: #4E342E;
--md-brown-900: #3E2723;
--md-grey-50: #FAFAFA;
--md-grey-100: #F5F5F5;
--md-grey-200: #EEEEEE;
--md-grey-300: #E0E0E0;
--md-grey-400: #BDBDBD;
--md-grey-500: #9E9E9E;
--md-grey-600: #757575;
--md-grey-700: #616161;
--md-grey-800: #424242;
--md-grey-900: #212121;
--md-blue-grey-50: #ECEFF1;
--md-blue-grey-100: #CFD8DC;
--md-blue-grey-200: #B0BEC5;
--md-blue-grey-300: #90A4AE;
--md-blue-grey-400: #78909C;
--md-blue-grey-500: #607D8B;
--md-blue-grey-600: #546E7A;
--md-blue-grey-700: #455A64;
--md-blue-grey-800: #37474F;
--md-blue-grey-900: #263238;
}Nee. Material 3 genereert het kleurenschema uit één bronkleur met zijn algoritme voor dynamische kleuren. Het basisschema gebruikt #6750A4 als primary, maar elke app kan een eigen schema genereren uit een andere kleur.
In Material 3 is de primary van het basisschema #6750A4. In het Material 2-palet is de hoofdtint van elke kleur 500, bijvoorbeeld Indigo 500 #3F51B5 of Blue 500 #2196F3.
Dat zijn de accenten van het Material 2-palet: verzadigdere versies van elke kleur, bedoeld voor knoppen, links en details. Brown, Grey en Blue Grey hebben geen accenten.
Tailwind CSS, Material Design en Bootstrap zijn merken van hun respectieve eigenaren. De waarden komen uit hun documentatie en openbare pakketten: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.