Chrome 拡張機能
Material Design 3
カラーパレット
ジェネレーター
入力した色から、Material You 準拠のカラーシステムを即座に生成。 トーンスケール・Color Roles・Light/Dark テーマを一括出力し、 CSS Variables や JSON でそのまま実装に使えます。
入力した色から、Material You 準拠のカラーシステムを即座に生成。 トーンスケール・Color Roles・Light/Dark テーマを一括出力し、 CSS Variables や JSON でそのまま実装に使えます。
Material Design 3 のガイドラインに沿ったカラーシステムを、ブラウザだけで素早く構築できます。
50〜900 の 10ステップで Primary・Complementary カラーを展開。ステップ 500 が入力色に正確に一致します。
Primary・Surface・Error などの Material You Color Roles を Light / Dark テーマ別に一括生成。onColor も自動算出します。
そのまま実装に使える CSS Variables（Light + Dark 両テーマ）と JSON をワンクリックでクリップボードにコピー。
難しい操作は一切ありません。色を入力してボタンを押すだけです。
HEX コード（例：#6750A4）を入力するか、R・G・B の各値を直接入力します。
スポイトアイコンをクリックすると、画面上の任意の色を取得する EyeDropper ツールも使えます。
# は省略可。
「Gen」ボタンをクリックするか、入力欄で Enter キーを押すとパレットが生成されます。 Primary Color と、色相を 180° 反転させた Complementary Color が表示されます。
50〜900 のトーンスケールと、Material You の Color Roles が一覧表示されます。 Light / Dark トグルで両テーマを切り替えながら配色を確認できます。 UI プレビューで実際のボタンやエラー表示のイメージも確かめられます。
「Copy CSS Variables」または「Copy JSON」ボタンをクリックするだけで、 すぐに実装に使えるコードをクリップボードにコピーできます。 CSS Variables は Light / Dark の両テーマが含まれます。
styles.css にペースト可能。
M3 Palette Generator が持つすべての機能を詳しく紹介します。
Material Color Utilities の TonalPalette を使用し、HCT 色空間で滑らかに補間された10段階のスケールを生成。ステップ 500 が入力色の HCT トーンに正確にアンカーされ、50 に向かって白く、900 に向かって黒く変化します。
Primary・Surface・Error など 18 のロールを Light / Dark それぞれで生成。各ロールの横にあるコピーボタンで HEX 値を即座にクリップボードへコピーできます。onColor（テキスト色）も自動算出されます。
Light・Dark トグルで Color Roles と UI プレビューをリアルタイム切替。ボタン・アクセント・エラー表示など、実際の UI 要素に色が適用されたプレビューを確認できます。選択したテーマは次回起動時に自動復元されます。
EyeDropper API を使い、ブラウザで開いた Web サイトや画像から直接色を取得できます。デザインカンプや参考サイトからカラーコードを調べる手間がなくなります。Chrome 95 以降で使用可能です。
2種類のフォーマットで、生成したカラーシステムをエクスポートできます。
Light / Dark の両テーマを含む CSS カスタムプロパティ。:root と [data-theme="dark"] セレクタですぐに使えます。
ソースカラー・補色・Light / Dark 全ロールを含む構造化 JSON。デザイントークンツールや Figma 連携に活用できます。
すべての計算はブラウザ内で完結します。データが外部に送信されることはありません。
ネットワークリクエストをいっさい行いません。入力した色情報が外部に送信されることはありません。
必要な権限は「storage」のみ。最後に使った色とテーマを保存するためだけに使用します。
ログインやアカウント登録は一切不要。インストールしてすぐに使えます。