Bảng màu cổ điển của Material Design 2 (19 màu với sắc độ từ 50 đến 900 và màu nhấn A100–A700) và bảng phối gốc của Material 3, kèm mã HEX và RGB để sao chép.
Material 3 không có bảng màu cố định: mọi màu trong giao diện được tạo từ một màu nguồn duy nhất (seed). Đây là bảng phối mặc định ở chế độ sáng, tạo từ #6750A4.
Mỗi vai trò trong bảng phối lấy từ một trong các bảng tông này, với tông từ 0 (đen) đến 100 (trắng).
19 màu với sắc độ từ 50 đến 900 và màu nhấn (A100–A700). Brown, Grey và Blue Grey không có màu nhấn. Mở một màu để xem và sao chép các sắc độ.
: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;
}Không. Material 3 tạo bảng phối màu từ một màu nguồn duy nhất bằng thuật toán màu động. Bảng phối gốc dùng #6750A4 làm primary, nhưng mỗi ứng dụng có thể tạo bảng phối riêng từ một màu khác.
Trong Material 3, primary của bảng phối gốc là #6750A4. Trong bảng màu Material 2, sắc độ chính của mỗi màu là 500, ví dụ Indigo 500 #3F51B5 hoặc Blue 500 #2196F3.
Đó là các màu nhấn trong bảng màu Material 2: phiên bản rực hơn của mỗi màu, dành cho nút, liên kết và chi tiết. Brown, Grey và Blue Grey không có màu nhấn.
Tailwind CSS, Material Design và Bootstrap là thương hiệu của chủ sở hữu tương ứng. Các giá trị lấy từ tài liệu và gói công khai của họ: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.