1
画像をアップロード
画像をドロップ、選択、または貼り付けます。ツールがローカルで縮小し、Celebi 量子化と Score の順位付けで UI 向けの候補を抽出します。
DEVELOP.09 MATERIAL COLOR
Monet パレット
画像をアップロードして公式 Material Color Utilities でテーマを生成します。Variant、明暗モード、セマンティックロール、全トーンパレットを比較できます。
IMG
画像をここにドロップ
またはクリックして選択 · 画像の貼り付けにも対応
JPG、PNG、WebP、GIF · 画像はローカルで処理 候補ソースカラー テーマのシードにする色を選択
CFG
テーマ設定
ローカルのみ
画像をアップロードしてテーマを生成
ブラウザー内で候補ソースカラーを抽出し、UI にそのまま使える Material カラーシステムを構築します。
UI
テーマの実画面プレビュー
§ 01
画像から Material テーマを生成する方法
2
Variant を比較
Material 3 または Material 3 Expressive の仕様を選び、同じ UI プレビュー、ソースカラー、コントラストレベルで Variant を比較します。
3
確認して出力
ライトとダークを同時に確認し、セマンティックロールと全トーンパレットを見てから CSS カスタムプロパティまたは JSON を出力します。
§ 02
9 種類の Material ダイナミックカラースタイル
Monochrome / Neutral
色を抑えた無彩色・低彩度の構成で、静かで情報量の多い UI に適します。
Tonal Spot / Vibrant
バランスのよい Material 3 の標準と、より鮮やかでエネルギッシュな表現です。
Expressive / Rainbow / Fruit Salad
強い色相回転で個性を作り、ブランド性の高い楽しいビジュアルに向きます。
Fidelity / Content
コンテンツを主役にしたい場合に、ソースカラーと温度感の関係をより忠実に保ちます。
§ 03
実際の UI のためのカラー プレビュー
✳
各 Variant は同じ 5 色のフィンガープリントを使い、プライマリ、セカンダリ、ターシャリ、サーフェス、エラーを直接比較できます。
✳
ライトとダークを並べて表示し、サーフェスの階層、文字、ボタン、コンテナ、ナビゲーションを確認できます。
✳
primary、secondary、tertiary、neutral、neutral variant、error の各パレットを 13 トーンで表示します。
✳
Google 公式 Material Color Utilities を使い、計算はすべてローカルで行います。
§ 04
よくある質問
Q1Monet とは何ですか？
Monet は Android のダイナミックカラーシステムを指す一般的な呼び名です。画像の色を単純にコピーするのではなく、UI に適したソースカラーを選び、HCT 色空間でコントラストを考慮したテーマを作ります。
Q2Material 3 と M3 Expressive の違いは？
Material 3 は 2021 年のダイナミックカラー仕様で 9 種類の標準 Variant を提供します。M3 Expressive は 2025 年の仕様で、公式ライブラリは Neutral、Tonal Spot、Vibrant、Expressive に新しいルールとデバイス差を提供します。
Q3同じソースカラーでも Variant の見た目が大きく違うのはなぜですか？
各 Variant はプライマリ、セカンダリ、ターシャリ、ニュートラルのパレットに異なる色相回転と彩度目標を適用します。Neutral は控えめ、Vibrant は彩度を上げ、Expressive は色相を大きく回転し、Fidelity は元の見た目を保ちます。
Q4画像はアップロードされますか？
いいえ。画像のデコード、縮小、ピクセル量子化、テーマ生成、出力はすべてブラウザー内で行われ、画像が端末の外へ出ることはありません。