コンテンツへスキップ

Material Designのカラー：アクセント付き完全パレット

GoogleのクラシックなMaterial Designパレット：19色の50〜900の色調と、A100〜A700のアクセント。各色をHEX・RGB・HSL・OKLCH、またはMUIでの名前でコピーできます。

UIカラーを見る
コピー形式

各色の値

色を選ぶと、すべての色調をMUIでの名前、HEX、RGB、OKLCH、最もコントラストの高いテキスト色とともに表示します。

Blue

色調MUIHEXRGBOKLCHテキスト
50Aa18.4:1
100Aa15.0:1
200Aa12.0:1
300Aa9.5:1
400Aa7.9:1
500Aa6.7:1
600Aa5.7:1
700Aa4.6:1
800Aa5.7:1
900Aa8.6:1
A100Aa9.7:1
A200Aa6.3:1
A400Aa5.3:1
A700Aa4.9:1

Material Designとは？パレットの構成

Material Designは、Googleが自社製品とAndroidを統一するために2014年に発表したデザインシステムです。パレットは19色で、それぞれ50（最も明るい）から900（最も暗い）まで10の色調があります。

他のスケールとの違いはアクセントです。A100、A200、A400、A700は各色をより鮮やかにしたもので、ボタン、スイッチなど目立たせたい要素向けです。Brown、Grey、Blue Greyにはアクセントがありません。

メインカラーとアクセントの組み合わせ方

Materialの当初のガイドラインでは、メインカラーを1つ選び、上部のバーなど最も目立つ面に500、ステータスバーに700を使うことを推奨しています。明るい色調（50〜200）は背景や補助的な要素に使います。

アクセントには別のファミリーのA色調、通常はA200を選びます。これでメインのアクションボタンが他から際立ちます。定番の組み合わせはIndigoにPinkのアクセントです。

Material Design 2とMaterial 3：2つのカラーシステム

この表はクラシックなMaterial Designパレット（バージョン1と2）をまとめたものです。Material 3（Material Youとも呼ばれる）は別のシステムを使います。

Material Design 2（このパレット）

  • 50〜900の色調とA100〜A700のアクセントを持つ固定の19色。
  • 値は常に同じなので、表からコピーできます。
  • MUI（@mui/material/colors）や多くのテンプレートに含まれるパレットです。

Material 3（Material You）

  • ベースカラーからパレットを生成し、0（黒）から100（白）まで13のトーンを持ちます。
  • Android 12以降では、ベースカラーを壁紙から取得できます（ダイナミックカラー）。
  • テーマをprimary、secondary、tertiary、neutral、neutral variantの役割で構成します。

プロジェクトでMaterialのカラーを使う方法

MUI（React）を使っている場合、カラーは同梱されており、ファミリーごとにインポートします。それ以外のプロジェクトでは、表のHEXをコピーしてCSS変数として保存しましょう。

MUI（React）

import { createTheme } from '@mui/material/styles';
import { indigo, pink } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: { main: indigo[500] },
    secondary: { main: pink.A200 },
  },
});

CSS

:root {
  /* indigo 500, indigo 700 and pink A200 */
  --primary: #3F51B5;
  --primary-dark: #303F9F;
  --accent: #FF4081;
}

よくある質問

各色をより鮮やかにしたバリエーションで、ボタン、リンク、アクティブなアイコンなど目立たせたい要素向けです。背景や面に使うメインの色調（50〜900）とは役割が異なります。

当初のガイドラインでは、上部のバーなどメインの面に500、ステータスバーに700、メインのアクションボタンに別ファミリーのアクセント（通常A200）を推奨しています。

どちらも明るい色から暗い色への番号付きスケールですが、Material DesignにはTailwindにないアクセントの色調（A100〜A700）があります。また、各カラーファミリーの名前と正確な値も両システムで異なります。

これはクラシックなMaterial Designパレットです。最新版（Material You）ではベースカラーから生成するダイナミックパレットが導入されましたが、このスケールは今も広く使われており、直接参照するプロジェクトとも互換性があります。

MUIにはこのパレットがそのまま含まれています。@mui/material/colorsからファミリーをインポートし、色調をインデックスとして使います：indigo[500]やpink.A200。「コピー形式」で「MUI」を選ぶと、その名前を直接コピーできます。

公式パレットで定義されていないためです。これらは背景、テキスト、補助的な要素向けのニュートラルまたは落ち着いた色で、目立たせるためのものではありません。アクセントが必要なら別のファミリーと組み合わせてください。

はい。「コピー形式」でHEX、RGB、HSL、OKLCH、MUIでの名前を選べます。各色の表にはすべての形式が同時に表示されます。