Material Design 2の定番パレット(50〜900のシェードとA100〜A700のアクセントを持つ19色)と、Material 3のベースラインスキームを、HEXとRGBのカラーコードで掲載しています。
Material 3には固定のパレットがなく、1つのソースカラー(seed)からUIのすべての色を生成します。これは#6750A4をもとに作られたデフォルトのライトスキームです。
スキームの各ロールは、0(黒)から100(白)までのトーンを持つこれらのトーンパレットのいずれかから取られています。
50〜900のシェードとアクセント(A100〜A700)を持つ19色です。Brown、Grey、Blue Greyにはアクセントがありません。色を開くとシェードを確認・コピーできます。
: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;
}いいえ。Material 3はダイナミックカラーのアルゴリズムで、1つのソースカラーから配色スキームを生成します。ベースラインスキームのprimaryは#6750A4ですが、アプリごとに別の色から独自のスキームを生成できます。
Material 3では、ベースラインスキームのprimaryは#6750A4です。Material 2のパレットでは各色の500がメインのシェードで、たとえばIndigo 500は#3F51B5、Blue 500は#2196F3です。
Material 2パレットのアクセントカラーで、各色をより鮮やかにしたバリエーションです。ボタンやリンク、細部のアクセントに使うことを想定しています。Brown、Grey、Blue Greyにはアクセントがありません。
Tailwind CSS、Material Design、Bootstrapはそれぞれの所有者の商標です。値は各プロジェクトの公式ドキュメントと公開パッケージに基づいています:Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2。