マテリアルデザイン カラーピッカー
マテリアルデザインのパレットには、赤、ピンク、紫からグレー、青灰色までの19のカラーファミリーが定義されており、それぞれが色調50（淡い色）から900（ほぼ黒）までの連続した階調を持ち、さらにオプションでA100〜A700のアクセント色も用意されています。このカラーピッカーはすべての色見本をグリッドに配置し、任意の色値をHEX、RGB、HSL、またはMaterialトークン名の形式でコピーして、Tailwind、CSS変数、iOS UIColor、Androidのカラーリソースに利用できます。
パレットの使い方
-
1
グリッドを見渡す
カラーファミリーは左側に縦に並び、色調は上部に50から900まで横に並びます。
-
2
色見本をタップする
HEX、RGB、HSL、および標準的なMaterialトークン名（例：Indigo 500）を確認できます。
-
3
必要な形式をコピーする
ワンクリックで次の文字列を正確にコピーします：`#3F51B5`、`rgb(63 81 181)`、`hsl(231 48% 48%)`。
-
4
コントラストを確認する
パネルには白と黒に対するWCAGコントラスト比が表示され、読みやすいテキスト色を選ぶ目安になります。
色調のはしご
| 色調 | 用途 |
|---|---|
| 50 | ホバー背景、淡い面 |
| 100 | チップ背景、控えめな塗りつぶし |
| 200 | 無効状態、二次的な面 |
| 300 | 境界線、区切り線 |
| 400 | 明るい背景上の二次テキスト |
| 500 | デフォルト／主要色、基準色 |
| 600 | インタラクティブ状態（ホバー、押下） |
| 700 | 見出し、強い強調 |
| 800 | 明るい背景上の濃いテキスト |
| 900 | 最も高コントラストな要素（ほぼ黒） |
| A100 | 明るいアクセント |
| A200 | デフォルトより明るいアクセント |
| A400 | アクセント（多くの場合、ブランドの「鮮やかな」ハイライト） |
| A700 | 深いアクセント |
Materialパレットのファミリー
赤、ピンク、紫、濃い紫、インディゴ、青、水色、シアン、ティール、緑、黄緑、ライム、黄色、アンバー、オレンジ、濃いオレンジ、茶色、グレー、青灰色。
茶色、グレー、青灰色にはアクセント色がありません。これらは中立的なファミリーです。
主要色を選ぶ
仕様では、主要色として500、より濃いバリアント（Androidのステータスバーで使用）として700、二次的な操作のアクセントとしてA200またはA400を推奨しています。これはルールではなく慣習です。最新のMaterial 3（ダイナミックカラー）は、固定された階調から選ぶのではなく、単一のシード色からパレットを生成します。
アクセシビリティのチェックポイント
- 本文テキスト： 背景に対するコントラスト比 ≥ 4.5:1（WCAG AA）。
- 大きなテキスト（18 pt以上の太字、または24 pt以上の標準）： ≥ 3:1。
- UIコンポーネントおよびグラフィック要素： ≥ 3:1。
パレットはデフォルトではコントラストが安全ではありません。白地に黄色500を置くとWCAGに大きく違反します。組み合わせを公開する前に必ず比率を確認してください。ピッカーがその場で表示します。
対応する形式
- HEX:
#3F51B5（Indigo 500）。 - RGB:
rgb(63 81 181)（新しい構文）またはrgb(63, 81, 181)（従来の構文）。 - HSL:
hsl(231 48% 48%)。 - Materialトークン:
Indigo 500、デザイン資料やFigmaに便利です。 - Tailwind:
indigo-500、TailwindのテーマがMaterialスケールを使用している場合、そのままクラス属性に指定できます。 - AndroidカラーXML:
<color name="indigo_500">#FF3F51B5</color>、ARGB形式。 - iOS UIColor:
UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0)。
よくある質問
このツールは、Googleが2014年に公開し、その後Material Design 2サイトに掲載した固定パレットを再現します。元の色からMaterial 3のトーンパレットを生成する機能ではありません。従来の番号付き色見本とアクセント色を参照したい場合に使用してください。
茶色、グレー、青灰色は中立色であり、アクセント色の組み合わせには使われません。仕様ではこれらについてA100〜A700が単純に省かれています。
TailwindのデフォルトパレットはMaterialに着想を得ていますが、同一ではありません。正確なMaterialの色が必要な場合は、theme.extend.colorsにMaterialの値を追加し、クラス名では material-indigo-500 として参照してください。
慣習ではそうですが、700やアクセントを主要色として使うことを妨げるものはありません。500という慣習は、両方向に8段階の変化を持つ信頼できる基準色を確保することが狙いです。
関連ツール
QRコード生成ツール
テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。
写真エディター
切り抜き、回転、明るさ、コントラスト、彩度、フィルター、テキスト追加に対応し、JPG・PNG・WebPへ書き出せるブラウザベースの写真エディター。
ファンタジーマップ作成ツール
再現可能なシード、地形コントロール、視覚スタイルを使って、ブラウザ内で手続き型のファンタジーマップを作成します。実在の地理ではなく、ローカルでSVGまたはPNGの作品をダウンロードできます。
GIFメーカー
連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。
PNGからSVGへのベクター変換
PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。
バーコードジェネレーター
Code 128、EAN-13、UPC、ITF-14 など9種類の一次元バーコードを作成します。データはブラウザ内に残り、SVG または PNG をダウンロードできます。