M3 Palette Generator

Name: M3 Palette Generator
Author: DFL inc.

Material Design 3 color palette generator from any primary color.

As of June 2026, M3 Palette Generator has 2 users in the Productivity category.

DFL inc.Productivity

Chrome Web Store ↗.crx

Users0%

Rating0%

—

— reviews

Reviews0%

—

Version

1.0.4

Manifest V3

90-day change · In the last 90 days this extension 2 version updates.

History

3 snapshots

Tracking since May 18, 2026.

View as table

Date	Users	Rating	Reviews	Version
May 18, 2026	—	—	—	1.0.0
May 24, 2026	—	—	—	1.0.0
May 31, 2026	3	—	—	1.0.3
Now	2	—	—	1.0.4

Changelog

May 31, 2026

description

M3 Palette Generatorは、Material Design 3のカラーシステムをワンクリックで生成するChrome拡張機能です。デザイナーやフロントエンドエンジニアの作業を効率化します。

  ▌ 更新履歴

1.0.3 Color Rolesの不具合修正
1.0.2 ウィンドウ分離機能を追加
1.0.1 Color Rolesの不具合修正
1.0.0 M3 Palette Generatorリリース

  ▌ 使い方

  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.

M3 Palette Generatorは、Material Design 3のカラーシステムをワンクリックで生成するChrome拡張機能です。デザイナーやフロントエンドエンジニアの作業を効率化します。

  ▌ 更新履歴

1.0.4 選択色をカラーバーで追加表示
1.0.3 Color Rolesの不具合修正
1.0.2 ウィンドウ分離機能を追加
1.0.1 Color Rolesの不具合修正
1.0.0 M3 Palette Generatorリリース

  ▌ 使い方

  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.

May 24, 2026

description

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.

M3 Palette Generatorは、Material Design 3のカラーシステムをワンクリックで生成するChrome拡張機能です。デザイナーやフロントエンドエンジニアの作業を効率化します。

  ▌ 更新履歴

1.0.3 Color Rolesの不具合修正
1.0.2 ウィンドウ分離機能を追加
1.0.1 Color Rolesの不具合修正
1.0.0 M3 Palette Generatorリリース

  ▌ 使い方

  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.

Permissions & access

Permissions: storage
Host access: None declared

Screenshots

About

M3 Palette Generatorは、Material Design 3のカラーシステムをワンクリックで生成するChrome拡張機能です。デザイナーやフロントエンドエンジニアの作業を効率化します。

  ▌ 更新履歴

1.0.4 選択色をカラーバーで追加表示
1.0.3 Color Rolesの不具合修正
1.0.2 ウィンドウ分離機能を追加
1.0.1 Color Rolesの不具合修正
1.0.0 M3 Palette Generatorリリース

  ▌ 使い方

  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.

Technical

Version: 1.0.4
Manifest: V3
Size: 30.02KiB
Min Chrome: 88
Languages: 1
Featured: No

Metadata

ID: blenhnacmhjcnobkcgbikbjjpokepocn
Developer ID: u5115a2de980d19863ff2f90dd65a7c54
Developer Email: [email protected]
Created: May 17, 2026
Last Updated (Store): May 28, 2026
Last Scraped: Jun 6, 2026
Website: https://dfl-inc.jp/
Support URL: https://dfl-inc.jp/inquiry/
Privacy Policy: https://dfl-inc.jp/app/m3/m3-privacy.html

Data sourced from the Chrome Web Store · last verified Jun 6, 2026.