M3 Palette Generator

Material Design 3 color palette generator from any primary color.

M3 Palette Generatorは、Material Design 3のカラーシステムをワンクリックで生成するChrome拡張機能です。デザイナーやフロントエンドエンジニアの作業を効率化します。 ▌ 使い方 HEX値（例：#6750A4）またはRGB値を入力するか、スポイトツールで画面上の任意の色を取得して「Gen」ボタンを押すだけ。すぐにフルパレットが生成されます。 ▌ 機能一覧 トーンスケール（50〜900） Primary・Complementary それぞれの10段階トーンパレットを生成。ステップ500が入力色のHCTトーンに正確に一致するよう設計されており、白（ステップ50）と黒（ステップ900）へなめらかに補間されます。 補色（Complementary Color） HSL色空間で色相を180度回転させた補色を自動算出。彩度・明度は入力色を維持します。 Color Roles @material/material-color-utilities を使用し、Material YouのすべてのColor Rolesを生成します： • Primary / onPrimary / primaryContainer / onPrimaryContainer • Complementary / onComplementary • Surface / Background / Outline とその派生 • Error / onError / errorContainer / onErrorContainer Light / Dark テーマ Light・Darkを切り替えると、Color RolesとUIプレビューがリアルタイムで更新されます。最後に選択したテーマは次回起動時に自動復元されます。 UIプレビュー 生成した Color Roles を使ったミニプレビューを表示。サーフェス背景・プライマリボタン・補色アクセント・エラーメッセージを実際の配色でリアルタイム確認できます。 エクスポート • CSS Variables コピー — :root { } と [data-theme="dark"] の両テーマを含む、そのままペーストできるCSS変数ブロックを生成 • JSON コピー — デザイントークンや独自ツールに取り込める構造化JSONとして出力 ワンクリックコピー トーンスウォッチやColor Role行をクリックするだけでHEX値をクリップボードにコピーできます。 ▌ プライバシー 外部への通信なし。トラッキングなし。アカウント不要。すべての処理はブラウザ内で完結します。必要な権限は「storage」のみ（前回使用した色とテーマの保存のため）。 ▌ こんな方に Material Design 3で新しいプロダクトを構築中の方、ブランドカラーがMaterial Youシステムにどう適合するか確認したい方に最適です。 --- M3 Palette Generator is a Chrome extension for designers and developers who work with Material Design 3. Enter any color and instantly generate a complete M3-style color system. ▌ How It Works Enter a color in HEX (#6750A4), enter RGB values directly, or use the built-in eyedropper to pick any color from your screen. Click Gen — and your full palette is ready in an instant. ▌ Features Tonal Scale (50–900) Generates a 10-step tonal palette for both Primary and Complementary colors. Step 500 is anchored to the exact HCT tone of your source color, with smooth linear interpolation toward white (step 50) and black (step 900). Complementary Color Automatically calculates the complementary color by rotating the hue 180° in HSL space, preserving the original saturation and lightness. Color Roles Generates all Material You Color Roles using @material/material-color-utilities: • Primary / onPrimary / primaryContainer / onPrimaryContainer • Complementary / onComplementary • Surface / Background / Outline and variants • Error / onError / errorContainer / onErrorContainer Light & Dark Theme Toggle between Light and Dark mode to preview how your color system adapts. The last-used theme is saved and restored automatically. UI Preview See your colors in action with a live preview panel: surface background, primary button, complementary accent, and error message — all rendered with your generated roles. Export • Copy CSS Variables — outputs a ready-to-paste :root { } block with both light and [data-theme="dark"] themes • Copy JSON — exports the full color system as structured JSON for design tokens or custom tooling One-Click Copy Click any tonal swatch or Color Role row to copy the HEX value to your clipboard instantly. ▌ Privacy No network requests. No tracking. No accounts. All processing happens locally in your browser. Only requires the "storage" permission to remember your last used color and theme between sessions. ▌ For Designers & Developers Whether you're building a new product with Material Design 3 or exploring how a brand color fits into a Material You system, M3 Palette Generator gives you the full picture — instantly.