モノクロマティックパレットとは？

ベースカラーを選び、そこからシェード（暗め）とティント（明るめ）を生成します。ステップ数を設定し、CSS変数・Tailwindコンフィグとしてエクスポート、または個々のHEX/RGB値をコピーできます。

任意の HEX を入力するかカラーピッカーで選び、ティント(明るめ)、トーン(グレー混合)、シェード(暗め)の数を設定すると、ページが LAB 色空間で各スケールを補間し、ステップが均等に見えるようにします。各スウォッチには HEX・RGB・HSL がワンクリックでコピーできる形で表示され、「すべてコピー」でスケール全体を一度に取得できます。ティント・トーン・シェードのいずれかだけに絞り込めるほか、CSS カスタムプロパティ、Tailwind 設定スニペット、SCSS 変数、JSON デザイントークン、PNG スウォッチシートとしてまとめて書き出せます。

使い方

1. カラーピッカーでベースカラーを選ぶか、HEXコードを入力するか、「画像から」でロゴや写真の主要色をそのまま取り込みます。
2. ティント(明るめ)・トーン(グレー混合)・シェード(暗め)の数を調整し、特定の行だけ見たいときは「表示」フィルターで絞り込んでください。
3. 個々のカラー値をコピーするか、「すべてコピー」で全 HEX をまとめて取得するか、パレット全体を CSS カスタムプロパティ・Tailwind コンフィグオブジェクト・SCSS 変数・JSON デザイントークン・カラースウォッチ画像として書き出します。

使用するタイミング

• UI デザインシステム構築時、ブランドカラーをコンポーネント全体で 9 段階に統一したいとき。
• データ可視化で、ヒートマップや単色棒グラフなど全系列を同一色相から取りたいとき。
• テキストと背景の組み合わせ選び。-100 を背景、-900 を文字にすればコントラストはたいてい安全圏。

結果

データ可視化用のブルーパレットが必要なダッシュボードを構築しています。#3B82F6をベースとして選び、ほぼ白（#EBF2FE）からほぼ黒（#1A2744）まで9ステップを生成します。CSS変数としてエクスポートし、チャート全体で--color-blue-100から--color-blue-900を使用します。

よくある質問

モノクロマティックパレットとは何ですか?

色相は同じで、彩度と明度だけが違う一連の色のことです。全体が同じ色のファミリーとして読めるため、複数の色相を混ぜたときに起きがちな視覚的なノイズを避けられます。

何段階生成するのが普通?

UI 向けは 9 段階が定番(Tailwind・Material・IBM Carbon はいずれも 50〜900 の 10 段階)。データ可視化なら 5〜7 段階で十分なことが多く、11 を超えるとグラデーションのように見え、隣同士の区別が難しくなります。

どの書き出し形式を選べばいい?

CSS 変数はどんなスタイルシートにもそのまま貼れます。Tailwind スニペットは theme.extend.colors に入れれば bg-brand-500 のようなユーティリティが使えます。SCSS では $brand-500 変数と Sass マップの両方が手に入ります。JSON はスケールを構造化されたデザイントークンとして書き出し、style dictionary に取り込めます。PNG カラースウォッチは Figma やブランドガイドの共有用に便利です。

明側のステップが白に見えてしまうのはなぜ?

明度が高すぎると、彩度のある色でも目には白っぽく映ります。-100 が白と区別できない場合は tint の段数を減らすか、明度の上限をベースカラーに近づけてください。隣同士の区別がはっきりします。

生成した色はアクセシビリティ的に大丈夫?

今はこの場で確認できます。WCAGコントラストのバッジをオンにすると、各スウォッチで黒または白の文字がAAやAAAを満たすかが分かり、色覚プレビューは第2色盲（緑）・第1色盲（赤）・第3色盲（青）の人の見え方にスケールを変換します。手早い目安として、-100/-200のステップと-700/-800のステップを組み合わせれば、たいていWCAG AAを満たせます。

関連ツール