La palette classique de Material Design 2 (19 couleurs en nuances de 50 à 900 et accents A100–A700) et le schéma de base de Material 3, avec les codes HEX et RGB à copier.
Material 3 n'a pas de palette fixe : il génère toutes les couleurs de l'interface à partir d'une couleur source (seed). Voici le schéma clair par défaut, créé à partir de #6750A4.
Chaque rôle du schéma provient de l'une de ces palettes tonales, avec des tons de 0 (noir) à 100 (blanc).
19 couleurs en nuances de 50 à 900 et accents (A100–A700). Brown, Grey et Blue Grey n'ont pas d'accents. Ouvrez une couleur pour voir et copier ses nuances.
: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;
}Non. Material 3 génère le schéma de couleurs à partir d'une couleur source grâce à son algorithme de couleur dynamique. Le schéma de base utilise #6750A4 comme primary, mais chaque application peut générer le sien à partir d'une autre couleur.
Dans Material 3, le primary du schéma de base est #6750A4. Dans la palette Material 2, la nuance principale de chaque couleur est la 500, par exemple Indigo 500 #3F51B5 ou Blue 500 #2196F3.
Ce sont les accents de la palette Material 2 : des versions plus saturées de chaque couleur, pensées pour les boutons, les liens et les détails. Brown, Grey et Blue Grey n'ont pas d'accents.
Tailwind CSS, Material Design et Bootstrap sont des marques de leurs propriétaires respectifs. Les valeurs proviennent de leur documentation et de leurs paquets publics : Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.