パレットジェネレーター
ベースカラーを入力するだけで、Webサイト、管理画面、コンポーネントライブラリ、デザインシステムで使える完整なカラーパレットをすばやく生成できます。50〜950のプライマリスケール、ニュートラルスケール、そしてモノクローム、アナログ、補色、トライアドの4種類の配色を出力します。各スウォッチには黒または白の推奨テキスト色とWCAGコントラスト比が表示されるため、背景に使うべき色なのか、テキストに使える色なのかを判断しやすくなります。結果はCSS変数またはJSONとしてコピーでき、Tailwind、CSS-in-JS、デザイントークン、複数テーマ構成にそのまま組み込めます。処理はすべてローカルで行われるため、未公開のブランドカラーや機密性の高いデザインファイルにも安心して使えます。
- 背景、境界線、ボタン、リンク、強調状態までカバーできる50〜950の完整なスケールを生成
- モノクローム、アナログ、補色、トライアドに対応し、プライマリ、セカンダリ、アクセント、コントラスト色を検討できます
- OKLCHベースの出力により明度ステップがより均一になり、テーマスケールやダークモードに使いやすくなります
- 各スウォッチに黒または白の推奨テキスト色とWCAG比率を表示し、用途をひと目で判断できます
- 個別スウォッチ、CSS変数一式、コンポーネントライブラリやデザイントークン向けのJSONをコピーできます
現在のパレットでボタン、リンク、バッジ、カードを確認し、視覚的な階層が自然かチェックできます。
:root {
--color-primary-50: #deedff;
--color-primary-100: #d0dfff;
--color-primary-200: #b8c7ff;
--color-primary-300: #9eabff;
--color-primary-400: #7f89ff;
--color-primary-500: #6368e6;
--color-primary-600: #4f51c4;
--color-primary-700: #3c3ba3;
--color-primary-800: #2a2583;
--color-primary-900: #1c1168;
--color-primary-950: #0e004a;
--color-primary: #6469e8;
--color-secondary: #996cc9;
--color-accent: #509ad6;
--color-contrast: #806900;
--color-neutral-50: #ecf6ff;
--color-neutral-100: #dfe9f4;
--color-neutral-200: #c8d2dd;
--color-neutral-500: #737b85;
--color-neutral-700: #464e57;
--color-neutral-900: #20272f;
}{
"primary": {
"50": "#deedff",
"100": "#d0dfff",
"200": "#b8c7ff",
"300": "#9eabff",
"400": "#7f89ff",
"500": "#6368e6",
"600": "#4f51c4",
"700": "#3c3ba3",
"800": "#2a2583",
"900": "#1c1168",
"950": "#0e004a"
},
"scheme": {
"primary": "#6469e8",
"secondary": "#996cc9",
"accent": "#509ad6",
"contrast": "#806900"
},
"neutral": {
"50": "#ecf6ff",
"100": "#dfe9f4",
"200": "#c8d2dd",
"300": "#afb9c3",
"400": "#9099a3",
"500": "#737b85",
"600": "#5c646d",
"700": "#464e57",
"800": "#313941",
"900": "#20272f",
"950": "#0b1219"
}
}概要
ひとつのブランドカラーを、コードベースに持ち込める完整なパレットへ変換します。スケール、配色、ニュートラル、コントラストの目安、エクスポート形式が同じ画面にまとまっているため、別々のツール間で色値を手作業で運ぶ必要がありません。
- 01
プライマリスケール生成
50、100、200から950までのステップを生成します。Tailwind、デザイントークン、CSS変数の命名に自然に対応しやすい構成です。
- 02
4種類の配色方式
モノクローム、アナログ、補色、トライアドを並べて出力します。ツール型UI、自然なブランド拡張、強い強調表現、より豊かなビジュアルシステムまで検討できます。
- 03
OKLCHによる明度コントロール
OKLCHで明度と彩度を扱うため、従来のHSLスケールで起こりがちな色相のずれを抑え、見た目により均一なステップを作りやすくします。
- 04
ニュートラルスケール
背景、境界線、控えめなテキスト、カード面に使えるニュートラルスケールも生成します。プライマリカラーだけが孤立したパレットになりません。
- 05
テキストコントラストの目安
各スウォッチに黒または白の推奨テキスト色とWCAG比率を表示し、ボタン、バッジ、ステータス色の読みやすさを素早く判断できます。
- 06
インターフェースプレビュー
ボタン、リンク、バッジ、カードを内蔵プレビューで確認できます。スウォッチ単体ではなく、実際のUIに近い文脈でパレットを評価できます。
- 07
CSSとJSONのエクスポート
CSS変数とJSONパレットをまとめて出力します。global.css、テーマファイル、コンポーネントライブラリ、デザイントークン管理にそのまま使えます。
- 08
プリセットとランダム開始
よく使うブランド方向のプリセットから始めることも、ランダム生成でプロジェクト初期の意外な組み合わせを探すこともできます。
使い方
ひとつのブランドカラーから再利用できるパレットを作り、開発で使えるCSS変数とJSONとして持ち帰るまでを、数ステップで完了できます。
- 01
ベースカラーを貼り付けるか選択します。ブランドのプライマリカラー、既存プロダクトの色相、スクリーンショットから拾った色などを使えます。
- 02
配色方式を選びます。安定したツール型UIならモノクローム、自然なブランド拡張ならアナログ、強い対比なら補色、豊かなシステムならトライアドが向いています。
- 03
スタイルを選びます。ソフト、バランス、ビビッド、ダークから、プロダクトの文脈に合う彩度と明度の方向性を決めます。
- 04
プライマリスケール、配色、インターフェースプレビューを確認し、ボタン、リンク、バッジ、カードの階層が十分に出ているか見ます。
- 05
任意のスウォッチをクリックして値をコピーするか、CSS変数とJSONをまとめてコピーしてプロジェクトへ戻します。
詳細
出力されるのは一度きりのムードボードではなく、開発、デザインレビュー、複数テーマの保守へそのまま持ち込めるパレットです。長く使える形で整理されています。
- 50〜950の命名を使ったプライマリスケールにより、Tailwind、CSS変数、コンポーネントライブラリ、デザイントークンへ自然に対応できます
- CSS出力では、primary、scheme、neutralの変数をひとつのブロックにまとめ、global.css、theme.css、デザインシステム設定へすぐに入れられます
- JSON出力では、primary、scheme、neutralの構造を保つため、設定ファイル、トークンパイプライン、テーマ生成ツールで扱いやすくなります
- 各スウォッチはクリックでコピーでき、開発中のデバッグ、デザインレビュー、簡単なUI実験に便利です
- 各スウォッチには推奨テキスト色とコントラスト比が表示され、ボタン、バッジ、ステータス表示の読みやすさの目安になります
- ランダム生成は初期のブランド探索を早め、プリセットはよくあるブランド方向からすぐに始める助けになります
- インターフェースプレビューで、プライマリボタン、セカンダリボタン、リンク、バッジ、カード背景を同じ画面で確認でき、問題に早く気づけます
- ダークスタイルでは明度と彩度を同時に抑え、ライトパレットを単純に反転するのではなく、ダークモードの出発点を作ります
- アナログとトライアドでは配色に応じてセカンダリやアクセントの角度を調整し、無関係な色の積み重ねではなくシステムとしてまとまるようにします
- 生成はすべてブラウザ内で行われるため、未公開のブランドカラー、社内アセット、機密性の高いデザインファイルにも使いやすい設計です
活用シーン
生成パレットの価値は、孤立したブランドカラーを保守しやすいシステムへ変えることにあります。テーマ、コンポーネント状態、サーフェス階層、ブランド拡張を同じステップの上で育てられます。
-
プロダクトテーマのカラー設計
ひとつのブランドプライマリを、ボタン、リンク、背景、境界線、強調表示に使える完整なスケールへ展開し、トップページと内部画面の色の言語を揃えます。
-
コンポーネントライブラリのカラー仕様
Button、Badge、Alert、Tabs、Inputなどの共通スケールと状態色を用意し、各コンポーネントが独自のローカルカラーを持ち始めるのを防ぎます。
-
ダークモードの準備
ダークスタイルのプライマリスケールとニュートラルスケールを出発点にして、背景、境界線、テキスト、アクセントをさらに調整できます。
-
デザイントークンの展開
パレットをCSS変数とJSONで書き出し、フロントエンドテーマ、ドキュメントサイト、デザインシステムライブラリ、複数プラットフォームのテーマパイプラインへ同期できます。
-
ブランドカラーの拡張
ひとつのブランドカラーから、明るいサーフェス、プライマリ、濃いアクセント、読みやすいテキストの組み合わせを作り、異なる密度のUIでもブランドらしさを保てます。
-
データ可視化の補助色
アナログ、補色、トライアドをチャートカテゴリ色の出発点にし、最後にコントラストチェッカーで凡例やラベルの読みやすさを確認できます。
-
ランディングページとキャンペーン
ヒーロー、CTA、バッジ、カードに使えるまとまりのある色セットをすばやく作り、短期キャンペーンにも安定した見た目の基準を与えられます。
-
管理画面テーマ
サイドバー、テーブル状態、フィルター、ダッシュボードカード、通知を同じパレット基準に揃え、モジュールごとに色がばらつくのを防ぎます。
-
マルチブランド・ホワイトラベル製品
ブランドや顧客ごとに別パレットを用意し、同じトークンテンプレートへ流し込むことで、テーマ切り替えを予測しやすく保守しやすいものにできます。
-
イラスト・アイコンの配色
イラスト、アイコンセット、ブランドアセットに対応する色スケールを用意し、フラットなビジュアルもインターフェースと同じ言語で揃えられます。
関連情報
ベースカラーがデザインファイル、スクリーンショット、既存CSSなど複数形式で来ている場合は、まず カラーコンバーター で正規化してからスケールを生成すると扱いやすくなります。パレットを本文、ボタン、ステータスラベルへ入れる前には、実際の前景色と背景色の組み合わせを コントラストチェッカー で確認してください。さらにそのスケールをヒーロー背景、やわらかいアクセント、キャンペーンビジュアルへ展開する場合は、 グラデーションジェネレーター へ引き継ぐと、パレットとグラデーションが別々の方向へずれにくくなります。
カラー用語の説明
プロダクトUI、ブランドビジュアル、複数テーマ構成でパレットを扱うときに重要になる用語です。チームで同じ定義を共有しておくと、ブランドカラーをどのステップに置くべきかという議論を繰り返さずに済みます。
-
プライマリカラー
ブランドやプロダクトの中心になる色です。主ボタン、リンク、選択状態、重要な強調に使われます。よく設計されたパレットでは、本当の意味でのプライマリは通常ひとつです。
-
スケール
同じ色相を保ちながら明度を段階的に変えた値の並びです。フロントエンドでは、明るい背景から濃い強調色までを50〜950で表すことがよくあります。
-
モノクローム
ひとつの色相を基準に、明度と彩度を調整する配色です。安定感があり、控えめで、ツール系インターフェースや情報量の多い画面に向いています。
-
アナログ
色相環で隣り合う色を使う配色です。自然でまとまりのあるパレットになりやすく、多くのプロダクトUIやブランド拡張に向いています。
-
補色
色相環で反対側にある色を使う配色です。強い対比が作れるため、主要アクション、警告、目立たせたいマーケティング表現に向いています。
-
トライアド
おおよそ120度ずつ離れた3色を選ぶ配色です。豊かなビジュアルシステムを作れますが、まとまりを保つには彩度と使用面積の調整が重要です。
-
OKLCH
HSLより人の知覚に近い形で扱いやすい色空間です。均一なカラースケールや、アクセシブルなダークモードパレットを作るのに役立ちます。
-
デザイントークン
色を名前付き変数や構造化データとして保存し、デザインファイル、CSS、コンポーネントライブラリ、複数テーマ構成で再利用できるようにする考え方です。色をリテラル値として散らばらせないために使います。
使い方のヒント
長く使えるパレットには、ブランド認知、情報階層、読みやすさ、開発上の保守性のバランスが必要です。これらをデザインシステムに記録しておくことで、テーマやプロダクトラインをまたいでも安定して使えます。
- まずベースカラーの役割を決めます。ブランド認知、主アクション、リンク色、チャート色、ステータス表示など、役割によって必要なスケールの強さは変わります
- 500番だけを何にでも使わないでください。明るい背景、境界線、hover状態、濃い強調には、それぞれ別のステップが必要です
- 本文や補助テキストでは見た目の感覚だけに頼らず、特にボタンやバッジ上ではコントラストチェックと組み合わせて確認します
- ダークモードはライトパレットの単純な反転ではありません。背景、境界線、テキスト、アクセントを別々に確認し、専用のダークトークンセットを検討してください
- 最終パレットはトークン化し、同じ色がファイル内に近似値として散らばらないようにします
- ブランドカラーが明るすぎる、または暗すぎる場合は、色相を変えるより明度と彩度を調整し、ブランドらしさを保つほうが自然です
- チャート色とUIアクション色は分けて管理し、ひとつのブランドカラーがデータ、状態、アクションの意味を曖昧にしないようにします
- 公開前には、ボタン、リンク、フォーム状態、警告、無効状態を実際のページで確認してください。単独のプレビューだけでは不十分です
制限事項
自動生成は出発点を早めてくれますが、ブランドレビュー、デザインレビュー、アクセシビリティテストの代わりにはなりません。限界を理解しておくと、このツールが本当に役立つ場所に置けます。
- 生成スケールはアルゴリズム上の基準から作られます。ブランドに本当に合うかどうかは、デザインやブランド担当者の判断が必要です
- 推奨される黒または白のテキスト色は、スウォッチ単体から計算したものです。複雑な背景、画像、グラデーション、重なった面では専用のコントラストチェックが必要です
- OKLCHはモダンブラウザやデザインシステムで広がりつつありますが、古いツールチェーンでは先にHEXやRGBへ変換する必要がある場合があります
- トライアドや補色は強い視覚的な衝突を生みやすいため、使う面積、彩度、文脈を調整してください
- このツールはパレットと変数を生成するだけです。Tailwind設定、CSSファイル、デザインファイルを自動で変更するものではありません
- アクセシビリティが重要な面では、前景色と背景色の各組み合わせをコントラストチェッカーで確認してください。ツール内の推奨は目安であり、最終判断ではありません
- 整理されたパレットがあっても、視覚階層が必ず強くなるわけではありません。重要なページは公開前にデザインとプロダクトのレビューが必要です
よくある質問
プロダクトテーマ、コンポーネントシステム、複数テーマのデザインでパレット生成ツールを使うときに、チームからよく出る質問です。
パレット生成ツールはどんな場面で一番役立ちますか？
ひとつのベースカラーから、プロダクトテーマ、コンポーネントスケール、ブランド拡張、ダークモードの基準、フロントエンド用トークンをすばやく作りたいときに役立ちます。
なぜスケール生成にOKLCHを使うのですか？
OKLCHの明度はHSLより人の知覚に近く、明るいステップと暗いステップがより均一に見えやすくなります。明度を変えても色相が大きくずれにくいのも利点です。
50〜950のステップはどう使えばよいですか？
50〜100は背景や控えめな面、400〜600はプライマリボタンやリンク、700〜950は濃い強調、ダークモード背景、テキスト色に使われることが多いです。
モノクローム、アナログ、補色、トライアドはどう選べばよいですか？
モノクロームはツール寄りのUI、アナログは自然なブランド調和、補色は強い強調、トライアドは彩度や面積を制御できる場合の豊かなビジュアルシステムに向いています。
CSS変数はそのまま使えますか？
はい。グローバルスタイル、テーマファイル、コンポーネントライブラリ設定にコピーし、プロジェクトの命名規約に合わせて変数プレフィックスを調整してください。
JSON出力は何に使えますか？
設定ファイル、デザイントークンスクリプト、テーマ生成パイプライン、ドキュメント用データソースに向いています。同じパレットを複数プラットフォームで共有しやすくなります。
推奨される黒または白のテキスト色だけでアクセシビリティは保証されますか？
いいえ。スウォッチ単体に基づく簡易提案です。本番では、実際の文字サイズ、太さ、背景、状態を専用のコントラストチェッカーで確認してください。
Tailwindのパレットとして使えますか？
はい。50〜950の構造はTailwindの慣習に近いため、theme.extend.colorsや独自の名前空間へ自然にマッピングできます。
ダークスタイルはダークモードと同じですか？
完全に同じではありません。ダークスタイルはダークテーマの出発点です。完整なダークモードには、背景、境界線、テキスト、状態色を個別に調整し、コントラスト確認を行う必要があります。
色データはアップロードされますか？
いいえ。解析、スケール生成、プレビュー、エクスポートはすべてブラウザ内で行われます。未公開のブランドカラーや機密性の高いデザインファイルにも安心して使えます。
同じベースカラーなのにスタイルごとに違って見えるのはなぜですか？
スタイルは全体の彩度と明度を調整します。ソフトは彩度を抑え、ビビッドは彩度を高め、ダークは明度を下げるため、色相が同じでもスケール全体の印象が変わります。
ブランドカラーが明るすぎてプライマリにしづらい場合は？
ビビッドまたはダークスタイルで500〜700付近を強めるか、そのブランドカラーをアクセントとして扱い、より読みやすい色をプライマリにする方法があります。
関連ツール
パレット生成は、より大きなカラー制作フローの一段階です。カラー変換、コントラストチェック、グラデーション生成と組み合わせることで、正規化された値から完整でアクセシブルなビジュアルシステムへ進めます。