AZ Tools

Material Design 3 トーナルパレット

カラー

1 つのソースカラーから、Material Design 3 規約に従う 13 トーン（0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100）のパレットを生成します。各トーンは元の色相を保ちつつ、目標明度で sRGB 色域が許す最大彩度まで上げ、知覚的な OKLCH 明度ランプを使用します。デザイントークン、UI ライブラリのテーマ作成、アクセシブルな色システム構築に便利です。各トーンに対する黒・白のうち良い方とのコントラスト比を表示するため、安全な前景/背景の組合せを選べます。

—
プリセット
トーナルパレット
T 0#000000
WCAG 21.00:1
T 10#050013
WCAG 20.67:1
T 20#1c0042
WCAG 18.62:1
T 30#341767
WCAG 14.34:1
T 40#4d3486
WCAG 9.76:1
T 50#6851a5
WCAG 6.35:1
T 60#856fc6
WCAG 5.09:1
T 70#a38de7
WCAG 7.52:1
T 80#c1b0ff
WCAG 10.92:1
T 90#dfd8ff
WCAG 15.40:1
T 95#efecff
WCAG 18.11:1
T 99#fcfbff
WCAG 20.38:1
T 100#ffffff
WCAG 21.00:1
出力 — CSS カスタムプロパティ
:root {
  --primary-0: #000000;
  --primary-10: #050013;
  --primary-20: #1c0042;
  --primary-30: #341767;
  --primary-40: #4d3486;
  --primary-50: #6851a5;
  --primary-60: #856fc6;
  --primary-70: #a38de7;
  --primary-80: #c1b0ff;
  --primary-90: #dfd8ff;
  --primary-95: #efecff;
  --primary-99: #fcfbff;
  --primary-100: #ffffff;
}

トーンは OKLCH（知覚明度）で生成し sRGB 色域にクランプします。Material 3 HCT を近似しますがビット完全一致ではありません。

使い方

  1. ピッカーでソースカラーを選ぶか、hex を貼り付け。
  2. パレット名を変更可能（例: `--primary-40` の接頭辞）。
  3. 出力形式（CSS カスタムプロパティ・Tailwind 設定・JSON トークン・SCSS 変数）を選んでコピー。
  4. 各スウォッチをクリックすると hex がコピーされます。

よくある質問

Google の HCT アルゴリズムと同じ?
精神は近いが同一ではありません。Google の Material Color Utilities は CAM16 ベースの HCT を使用しますが、本ツールはブラウザ親和性の高い知覚色空間 OKLCH（Björn Ottosson 2020）を使用しています。同じ明度のトーンは似て見えますが、正確な hex は `material-color-utilities` と微妙に異なります。
トーンごとに彩度が変わるのは?
sRGB はとても暗い／明るい明度では高彩度の色を再現できないため、ツールは二分探索で色域内に収まる最大彩度を求めます。それでトーン 90（薄いティント）は褪せて見え、トーン 50 が多くの色相で最も鮮やかになります。
コントラスト比の読み方は?
黒・白のうち良い方との WCAG 相対輝度コントラスト比です。≥4.5 で通常テキストの WCAG AA、≥3.0 で大きいテキスト・UI コンポーネントの AA を満たします。
ダークモードのロールは?
M3 はライトで `primary` をトーン 40、ダークでトーン 80 に、`on-primary` をトーン 100 / トーン 20 にマッピングします。本ツールは生のトーンスケールのみ提供 — ロール割当はテーマ仕様の領域です。

関連ツール

色覚シミュレーター

8 種類の色覚異常（CVD）で画像がどう見えるかを再現。

カラー00

CSS Box Shadow ジェネレーター

複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。

カラー00

カラーフォーマット変換

任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。

カラー00

CSS グラデーションジェネレーター

線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。

カラー00

カラーパレット ジェネレーター

基準色から 6 種類のスキームで調和の取れたパレットを作成。

カラー00

カラーコントラスト チェッカー

文字／背景のコントラストを WCAG AA・AAA 基準でチェック。

カラー00