配色パターン作成ツール

スペースキーを押すだけで、調和のとれたカラーパレットを次々に生成できます。気に入った色をロックして、HEXコードをコピーしたり、CSS変数・Tailwind・JSONに書き出したりできます。すべてブラウザー内で作られ、何もアップロードされません。

パレットはブラウザー内で生成・確認され、何もアップロードされません。共有リンクに含まれるのは、#より後ろにある色コードだけで、モード・スタイル・色数の選択は、この端末にのみ記憶されます。

Tailwind カラージェネレーターで、シェードスケールを丸ごと作る

配色パターン作成 について

配色パターン作成ツールは、互いによくなじむ色の組み合わせを作ります。スペースキーか「Generate」ボタンを押すと、2〜10色の新しいパレットが現れます。色同士をできるだけ離して選ぶ完全なランダムから、ベースカラーを軸にした定番の配色（類似色・補色・スプリットコンプリメンタリー・トライアド・テトラード・モノクロマティック・シェード・ティント）まで選べます。気に入った色をロックすれば、残りの色だけがその周りで変わり続けます。元に戻す操作で直近30件のパレットまでさかのぼったり、スウォッチをドラッグして並べ替えたりすることもできます。どの色にも、HEX・RGB・HSLの値、最も近い色名、白い文字と黒い文字に対する正確なWCAGコントラストが表示されます。パレットができたら、HEXコード、CSS変数、SCSS、Tailwindのスニペット、JSONのいずれかでコピーするか、色コードだけを含むリンクで共有できます。

機能

• 9つの生成モード：ランダム、類似色、補色、スプリットコンプリメンタリー、トライアド、テトラード、モノクロマティック、シェード、ティント
• 好きなスタイル（おまかせ・ビビッド・パステル・くすみ・ダーク・ライト）で作るランダムパレット。色同士は常にはっきり離れています
• ブランドカラーやお気に入りの色を軸に、あらゆる配色を組み立てるベースカラー欄
• 選んだ色をその場に固定し、残りだけを再生成するロックボタン。パレットを少しずつ仕上げていけます
• 2〜10色に対応。ドラッグまたは矢印ボタンで並べ替えられ、直近30件のパレットを元に戻す・やり直す操作にも対応
• すべてのスウォッチに、HEX・RGB・HSLの値、最も近い色名、白い文字と黒い文字の正確なWCAGコントラストを表示
• パレット内の任意の文字色と背景色の組み合わせを、AAとAAAの基準で判定するコントラストチェッカー
• HEXリスト、CSS変数、SCSS、Tailwindのスニペット、JSONで書き出し。色コードだけを含む共有リンクも作成できる

配色パターン作成 の使い方

1. モードを選びます（「Random」ではスタイルも選びます）。特定の色を軸にしたいときは、ベースカラーを追加します
2. 気に入った色が出るまでスペースキーか「Generate」を押し、出たらその色をロックして、ほかの色だけを変えていきます
3. スウォッチをクリックするとHEXコードがコピーされます。詳細を開くとRGB・HSL・コントラストを確認でき、スウォッチをドラッグすれば好きな順に並べ替えられます
4. 任意の組み合わせで文字のコントラストを確認したら、「Export」を開いて、パレットをCSS変数・SCSS・Tailwind・JSONのいずれかでコピーします

例

入力

Mode: Analogous · base color #2a9d8f · 5 colors

出力

#3d4dc3  #2b668a  #2a9d8f  #69d391  #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three

類似色は色相環で隣り合う色で、離れていても最大30度までです。コントラスト比はWCAGの計算式で求めているので、どのスウォッチにどの文字色を載せればよいかが分かります。

よくあるエラーとトラブルシューティング

• スペースキーを押しても、新しいパレットができません。 — スペースキーでパレットが生成されるのは、ボタン・リンク・入力欄のいずれにもキーボードフォーカスがないときだけです。これらはスペースキーを自分の操作に使うためです。何も強調表示されなくなるまでTabキーを押すか、「Generate」ボタンをクリックしてください。
• 「Generate」ボタンがグレーになっています。 — すべての色がロックされていて、変える色が残っていないためです。ロックボタンかLキーで、少なくとも1色のロックを解除してください。
• 共有されたパレットのリンクを開くと、空のパレットや別のパレットが表示されます。 — 色は、アドレスの#記号より後ろの部分に入っています。チャットアプリでリンクが途中で切れてしまった場合は、アドレス全体をもう一度コピーしてください。#以降が、2〜10個の有効な6桁のHEXコードになっていない場合は、無視されます。
• Tailwindのスニペットを貼っても、既存の色が変わりません。 — スニペットが追加するのは、theme.extend.colorsの下にあるパレットのグループです。設定ファイルのcolorsオブジェクトに貼り付けて、bg-palette-1やtext-palette-3のようなクラスで使ってください。

よくある質問

配色パターン作成ツールの調和モードは、どのように働きますか？

どのモードも、ベースとなる色相を起点に、色相環上で決まった間隔の色相を選びます。類似色は最大30度まで離れた色相、補色は反対側の色相、スプリットコンプリメンタリーは反対側の色相の両隣にある2つの色相、トライアドは120度間隔の3つの色相、テトラードは90度間隔の4つの色相を使います。モノクロマティック、シェード、ティントは1つの色相を保ったまま明度と彩度を変え、ランダムは色をできるだけ離して選びます。

ブランドカラーを軸にしたカラーパレットは、どう作ればよいですか？

ベースカラーの欄にブランドカラーを入力するか選び、調和モードを選びます。ベースはパレットに組み込まれたまま固定され、スペースキーを押すたびに、ほかの色がその周りに作られます。類似色・補色・トライアドを切り替えて、ブランドカラーからどれくらい離れたパレットにしたいかを確かめてください。

配色パターン作成ツールで、一部の色だけを残して、残りを変えるにはどうしますか？

気に入った色は、スウォッチのロックボタンか、Lキーでロックします。ロックした色はその位置に残り、その周りで新しいパレットが生成されます。新しいほうが気に入らなければ、元に戻す操作で1つ前のパレットに戻れます。すべての色をロックすると、「Generate」は押せなくなります。

配色パターン作成ツールは、文字のコントラストをどのように確認しますか？

2つの色の相対輝度を比べるWCAGの計算式を使います。通常の文字は、AAなら4.5対1以上、AAAなら7対1以上の比が必要で、大きな文字は、それぞれ3対1と4.5対1が必要です。スウォッチごとに、白い文字と黒い文字に対する比が表示され、コントラストチェッカーでは、パレット内の任意の文字色と背景色の組み合わせを判定できます。

パレットをCSS変数やTailwind用に書き出すには、どうすればよいですか？

「Export」パネルを開いて、形式を選びます。「CSS variables」を選ぶと--color-1から--color-5までの:rootブロックが、SCSSなら$colorの変数が、Tailwindならtheme.extend.colorsに貼り付けるパレットのグループが出力されます。JSONとHEXリストは、シンプルな配列を出力します。どの形式にもコピーボタンがあります。

配色パターン作成ツールで作ったパレットは、共有できますか？

はい。ブラウザーのアドレスには、現在の色が#記号の後ろに常に入っていて（例：#264653-2a9d8f-e9c46a）、「Copy link」でコピーできます。リンクを開いた人には、同じパレットが表示されます。#より後ろの部分がサーバーに送られることはなく、この端末に記憶されるのは、モード・スタイル・色数の選択だけです。

関連ツール

• カラーパレット抽出 — 画像から支配色とパレットを HEX・RGB・HSL で抽出
• カラーフォーマットコンバーター — カラーを HEX・RGB・HSL・OKLCH など全形式に一度に変換します。
• コントラストチェッカー — 2色間のWCAGコントラスト比とAA/AAA合格を確認します。
• Tailwind カラージェネレーター — 1 つのブランドカラーから OKLCH の 50-950 シェードスケールを生成します。
• CSSグラデーションジェネレーター — ライブのカラーストップで線形・放射・円錐グラデーションをデザイン。
• 画像カラーピッカー — 画像をホバー・クリックして、任意のピクセルの HEX・RGB・HSL を取得できます。
• 色覚シミュレーター — 1型・2型・3型色覚での見え方を確認。
• CSS カラー変換 — HEX、RGB、HSL 間で変換し、ライブスウォッチを表示します。

Web & DevOpsの他のツール

• chmod 計算ツール — Unixのファイル権限を8進数と記号表記（rwx）の間で変換します。
• .gitignore ジェネレーター — 言語やツールの一般的なテンプレートから .gitignore を作成します。
• HTTP ステータス & MIME タイプ — HTTPステータスコードとMIMEコンテンツタイプの検索可能なリファレンス。
• Open Graph ジェネレーター — Open GraphとTwitterのメタタグを生成し、ソーシャルカードをプレビューします。
• robots.txt 生成ツール — User-agentルールやサイトマップを備えたrobots.txtを視覚的に作成します。
• XMLサイトマップ生成ツール — URLのリストを標準準拠の sitemap.xml に変換します。
• .htaccess 生成ツール — Apacheのリライト・リダイレクト・キャッシュのルールを作成します。
• nginx 設定生成ツール — シンプルなトグルから完全なnginxのサーバーブロックを作成します。
• SemVer 計算ツール — セマンティックバージョンの解析・比較・範囲チェック・上げ。
• Cache-Control ヘッダー ジェネレーター — わかりやすいトグルから、正しい Cache-Control ヘッダーを組み立てます。
• メタタグジェネレーター — フォームから SEO、Open Graph、Twitter Card のメタタグを生成できます。
• CSP ジェネレーター — Content-Security-Policy ヘッダーをディレクティブごとに構築できます。

Web & DevOpsのツールをすべて見る (27) · すべてのツール