ホームに戻る

配色パレット生成ツール

ブランドカラー1色（HEX）から、トーンスケール・補色・類似色・トリアド・テトラード・モノクロを一括生成。Tailwind shade番号付きでエクスポートできます。すべての計算はブラウザ内で完結し、外部送信されません。

生成色はHSLの数値操作による配色提案です。最終的な採用色は実画面でのコントラスト・印象を確認のうえご判断ください。 テキスト×背景の組み合わせはコントラスト比チェッカーでWCAG適合を必ず確認することをおすすめします。

1ブランドカラーを入力

#2563EB
H: 221°
S: 83%
L: 53%

2配色バリエーション（クリックでHEXコピー）

トーンスケール（Tailwind shade 50〜900 相当）

ベース色を500として、明度を段階的に変化させた10階調。背景・テキスト・強調色の使い分けに。

補色（Complementary）

色相を180°反転。CTA・アクセントカラーとして使うとコントラストの強い印象に。

類似色（Analogous）

色相を±30°ずらした3色。ベースと馴染みやすく、グラデーションや関連カテゴリ分けに向きます。

トリアド（Triadic）

色相環を3等分した3色。バランスが取れた華やかな配色になります。

テトラード（Tetradic / Square）

色相環を4等分した4色。多カテゴリのダッシュボードやタグ色などに。

モノクロ（Grayscale）

彩度0のグレースケール5段階。テキスト・罫線・ボーダーのトーン設計に。

3パレットをエクスポート

CSS変数

:root に貼り付けて利用

Tailwind config

tailwind.config.* の extend に追加

JSON

デザインツール・他システム連携に

生成した配色のコントラストを確認しましょう

テキスト色×背景色の組み合わせがWCAG AA（4.5:1）／AAA（7:1）を満たすかをチェックできます。

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

入力したHEX値や生成された配色は、お使いのブラウザ内のJavaScriptでのみ処理されます。 外部サーバーへの送信は一切行いません。

よくある質問

HSLとは何ですか？なぜHSLで配色を作るのですか？
HSLは色を「色相（Hue：0〜360°）」「彩度（Saturation：0〜100%）」「明度（Lightness：0〜100%）」の3要素で表す色空間です。RGBやHEXと違い、人間の感覚に近い軸で色を操作できるため、「同じ色相のまま明るさだけ変えたい」「補色を取りたい」といった配色設計に非常に向いています。本ツールも内部ではすべてHSLで計算しています。
Tailwind shade（50〜900）の考え方を教えてください
Tailwind CSSのデフォルトカラーは、各色について50（最も明るい）から900（最も暗い）までの段階が用意されています。500がベース色、50〜400が薄い色（背景・ホバー）、600〜900が濃い色（テキスト・強調）として使い分けるのが一般的です。本ツールは入力色を500として、HSLの明度を段階的に変化させて50〜900のトーンスケールを生成します。Tailwind v4のCSS変数とも互換のある命名で出力できます。
ブランドカラーはどうやって決めればよいですか？
まず「事業の印象」（信頼＝青、温かさ＝オレンジ、革新＝紫など）から色相を1つ選び、彩度40〜70％・明度45〜55％あたりに着地させると、Webで使いやすいブランド色になります。本ツールに1色を入力すれば、トーン段階・補色・類似色などが一度に展開されるので、その中から「メインカラー＋アクセントカラー＋背景色」を3〜5色選んで運用するのがおすすめです。
コントラスト比チェックとの関係は？
配色が決まったら、テキスト色と背景色の組み合わせがWCAG（AA：4.5:1以上、AAA：7:1以上）を満たすかを必ず確認してください。見た目が美しい配色でも、コントラストが不足するとアクセシビリティ上の問題になります。本サイトの「コントラスト比チェッカー」に生成した色を貼り付けて検証する動線を用意しています。
なぜブラウザ完結なのですか？
配色生成はHSL↔RGB↔HEXの数値計算だけで完結するため、サーバー処理が一切不要です。入力したHEX値も生成結果もブラウザ内のJavaScriptで処理されるため、外部サーバーへ送信されることはありません。社内ブランドカラーなど公開前の情報も安心してお試しいただけます。

このツールに関連する実務ガイド

2 guides

この業務でよく使われるツール

4 tools

Contrast Checker

WCAG 2.1準拠のコントラスト比をリアルタイム判定。色覚多様性（P/D/T型）シミュレーションと改善色提案付き。

Banner Optimizer

1枚の素材から、Google広告・Meta・YouTube・X など主要媒体の規定アスペクト比へ自動クロップ。媒体ごとに作り直す手間を1ステップに圧縮。

LP Component Builder

ヒーロー・特徴・FAQ など実績のあるLPセクションをドラッグで組み合わせ、構成案とワイヤーフレームを出力。デザイナー依頼前の叩き台に。

Advanced Photo Editor

レイヤー・テキスト・図形・フィルターを備えた本格派ブラウザエディタ。Photoshopを開くまでもない軽い編集や、テンプレからのバナー量産に向く。