Material Design 3 トーナルパレット
1 つのソースカラーから、Material Design 3 規約に従う 13 トーン（0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100）のパレットを生成します。各トーンは元の色相を保ちつつ、目標明度で sRGB 色域が許す最大彩度まで上げ、知覚的な OKLCH 明度ランプを使用します。デザイントークン、UI ライブラリのテーマ作成、アクセシブルな色システム構築に便利です。各トーンに対する黒・白のうち良い方とのコントラスト比を表示するため、安全な前景/背景の組合せを選べます。
: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 を近似しますがビット完全一致ではありません。
使い方
- ピッカーでソースカラーを選ぶか、hex を貼り付け。
- パレット名を変更可能（例: `--primary-40` の接頭辞）。
- 出力形式（CSS カスタムプロパティ・Tailwind 設定・JSON トークン・SCSS 変数）を選んでコピー。
- 各スウォッチをクリックすると 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 にマッピングします。本ツールは生のトーンスケールのみ提供 — ロール割当はテーマ仕様の領域です。
関連ツール
カラートークンエクスポーター
カラーパレットを1回定義 → CSSカスタムプロパティ·Tailwind設定·SCSS·LESS·デザイントークンJSON·SwiftUI Color·Android `colors.xml` にエクスポート。ライブプレビュースウォッチ。
画像からカラーパレット抽出
画像をドロップすると Canvas で主要色を分析しパレット抽出 — HEX をコピーまたは一括取得。
カラーパレット ジェネレーター
ベースカラーを選んで、クラシックなカラーホイールのハーモニーを取得 — 補色、スプリット補色、トライアド、テトラド、スクエア、アナロガス、モノクロマティック。
色のシェード・ティント生成器
基本色からティント（明るく）·シェード（暗く）·トーン（グレー混合）を生成。2〜20 ステップ、HEX·RGB·HSL 出力。
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
ランダム音楽練習ドリル生成器
楽器練習用のランダムなキー／スケール／コード／テンポ／拍子／テクニックフォーカス — 12個の半音ルート、15個のスケール（教会旋法・ペンタトニック・ブルース・ディミニッシュ・フリジアンドミナント）、9thまで14個のコードクオリティ、20個のアーティキュレーションプロンプト。