配色ジェネレーターの使い方
- 「新しい配色」を押す（キーボードならスペースキー）と、配色ルールに沿った5色が表示されます。押すたびに新しい配色がランダムに作られます。
- 気に入った色をロック：各色の下の鍵アイコンを押すと、その色は固定され、ほかの色だけが変わります。ランダムモードでは、最初にロックした色が基準になり、新しい色はその色に合うように作られます。
- 色を指定して作る：「作り方」を「基準色を指定」にして色を選びます。ブランドカラーやコーポレートカラーなど、決まった色から配色を考えたいときに便利です。毎回その色がそのまま配色に入ります。
- 配色ルールを選ぶ：類似色、単色、補色、分裂補色、トライアド、テトラード、明暗のグラデーションから選べます。「おまかせ」にすると毎回違うルールになります。
- 色を微調整：鉛筆アイコンで端末のカラーピッカーが開きます。変更した色は自動でロックされます。
- 写真から配色を作る：「画像から色を取り出す」を押すか、ファイルをドロップ、またはスクリーンショットを貼り付けると、画像の主な5色を見つけてロックします。
- コピーと書き出し：コードをタップしてコピー。表示は HEX・RGB・HSL・OKLCH を切り替えられます。配色全体を CSS 変数や JSON でコピーしたり、5色を並べた PNG をダウンロードしたりできます。「リンクをコピー」で、同じ配色を開ける URL を共有できます。
処理はすべてブラウザの中で行われます。読み込んだ画像は端末上で長辺100ピクセル以下に縮小して分析するだけで、サーバーには一切送信しません。
OKLCH で配色を作る理由
よく使われる色相環（CSS の HSL、デザインソフトの HSV/HSB）は、赤・緑・青の値を並べ替えただけのもので、人の見え方を表したものではありません。HSL で同じ明度50%でも、純粋な黄色は純粋な青よりずっと明るく見えるため、HSL で色相を回して作った配色は、ぎらついた色とくすんだ色が混ざりがちです。このツールは OKLCH で配色を作ります。これは Björn Ottosson が2020年に発表した知覚的な色空間 OKLab の極座標版で、CSS Color Module Level 4 で oklch() 関数として採用されています。3つの値は L（知覚上の明度、0〜100%）、C（彩度にあたるクロマ。0 はグレーで、sRGB の色は最大で約0.32）、H（色相角、度）です。L を同じだけ変えると、色相に関係なく同じくらい明るさが変わって見えます。
変換は3段階です。sRGB のガンマ補正を外して線形の光の量にし、固定の行列を掛けて立方根を取り、さらに別の行列を掛けて L・a・b を求めます。クロマは √(a² + b²)、色相は atan2(b, a) です。このツールで求めた値（公表されている値と一致します）：
| 色 | HEX | OKLCH |
|---|---|---|
| 赤 | #ff0000 | oklch(62.8% 0.258 29.2) |
| ライム | #00ff00 | oklch(86.6% 0.295 142.5) |
| 青 | #0000ff | oklch(45.2% 0.313 264.1) |
| 白 | #ffffff | oklch(100% 0 0) |
| 紺（ネイビー） | #1f4e79 | oklch(41.4% 0.088 249.1) |
OKLCH の色がすべて画面で表示できるわけではありません。予定した色が sRGB の色域の外に出たときは、明度と色相を保ったままクロマを下げて収めます（CSS Color 4 の色域マッピングと同じ考え方）。そのため、色がはみ出して色相がずれることはありません。
配色の作り方の仕組み
どの配色も基準色から始まります。指定した基準色、最初にロックした色、またはそれがなければ明度45〜80%・中程度のクロマのランダムな色です。残りの4色には、選んだ配色ルールの色相と、30〜90% に散らした明度を割り当てます（基準色に最も近い明度の段は飛ばすので、どの色も基準色と明るさが違います）。クロマは基準色の±30%の範囲で変わり、とても明るい色ととても暗い色では弱めます。彩度が高すぎるとどぎつく見えるためです。「新しい配色」を押すたびに引く1つの乱数がすべてを決め、同じ乱数なら必ず同じ配色になります。コピーしたリンクで同じ色が再現できるのはこのためです。
| 配色ルール | 基準色からの色相 | 印象 |
|---|---|---|
| 類似色 | 18〜32° 間隔で −2〜+2 段 | 穏やか、自然、まとまりがある |
| 単色 | 同じ色相、明度5段階 | UI やグラフに使いやすい |
| 補色 | 0° と 180° | コントラストが強い。反対色はアクセントに |
| 分裂補色 | 0°・150°・210° | 補色よりバランスを取りやすい |
| トライアド | 0°・120°・240° | にぎやか。1色を主役に |
| テトラード（正方形） | 0°・90°・180°・270° | 華やか。大半の色は控えめに |
| 明暗のグラデーション | 同じ色相を OKLab で白・黒と混色 | 背景・枠線・文字を1色でそろえる |
角度は OKLCH の色相環で測るため、補色は HSL の色相環や絵の具の色相環（赤・黄・青）とは違うことがあります。たとえば紺 #1f4e79（色相249°）の OKLCH での補色は、69° 付近の暖かいオリーブがかったオレンジ系の色です。
例：#1f4e79 からトライアドの配色
基準色 #1f4e79（OKLCH の明度41.4%、クロマ0.088、色相249.1°）とトライアドを選ぶと、このページの最初の乱数では次の5色になります。色相は約249°・9°・129° と120° ずつ離れ、明度は28.7% から92.9% に広がっています。
| 番号 | HEX | OKLCH | 白い文字 | 黒い文字 |
|---|---|---|---|---|
| 1 | #1f4e79 | oklch(41.4% 0.088 249.1) | 8.66:1 | 2.42:1 |
| 2 | #461a23 | oklch(28.7% 0.068 9.7) | 14.66:1 | 1.43:1 |
| 3 | #758e58 | oklch(61.3% 0.082 128.8) | 3.64:1 | 5.76:1 |
| 4 | #ffdee2 | oklch(92.9% 0.037 9.5) | 1.25:1 | 16.79:1 |
| 5 | #a2b68d | oklch(75% 0.061 129) | 2.18:1 | 9.61:1 |
コントラストの列を見ると、どの色にどちらの文字が読みやすいかがわかります。暗いワインレッドには白い文字が14.66:1、淡いピンクには黒い文字が16.79:1 で読めますが、中間の緑は白い文字で3.64:1 しかなく、大きな見出しには使えても本文には足りません。
コントラストとアクセシビリティ
各色には、白と黒の文字のうち読みやすい方のコントラスト比と判定を表示し、配色の下の表には両方を載せています。計算は W3C の Web コンテンツ・アクセシビリティ・ガイドライン（WCAG）2.2 に従います（日本の JIS X 8341-3:2016 も WCAG 2.0 と同じ基準です）。線形化した各チャンネルから相対輝度 0.2126 R + 0.7152 G + 0.0722 B を求め、コントラスト比は（明るい方 + 0.05）÷（暗い方 + 0.05）で、1:1 から 21:1 の範囲です。通常の文字はレベル AA で4.5:1、AAA で7:1、大きな文字（24 px、太字なら18.7 px）は AA で3:1 が必要です。比は小数第2位で切り捨てて表示するので、基準に届かない色が合格と表示されることはありません。
配色を使うときのコツ
- 色に役割を決める：ベースカラー60%、メインカラー30%、アクセントカラー10% という割合がよく使われます。いちばん暗い色は文字色に向いています。
- 決める前に文字の読みやすさを確認：コントラストの表で、使う組み合わせが基準を満たすか確かめましょう。
- 色相だけに頼らない：日本人男性の約20人に1人は赤と緑の区別がつきにくい色覚の特性があります。明度にも差をつけましょう。
- CSS の書き出しを活用：
--color-1などの名前を--brandや--surfaceのような役割名に変えれば、そのままデザイントークンの土台になります。
よくある質問
ブランドカラーから配色を作るには？
「作り方」を「基準色を指定」にして色を選び、配色ルールを決めます。どの配色にもその色がそのまま入り、残りの4色はその色に合わせて作られます。気に入るまで「新しい配色」を押してください。
気に入った色を残すには？
色の下の鍵アイコンを押してロックします。ロックした色は「新しい配色」やスペースキーを押しても変わらず、最初にロックした色が次の配色の基準になるので、新しい色もその色に合います。もう一度押すとロックが外れます。
写真や画像から配色を作れますか？
はい。「画像から色を取り出す」を押すか、ファイルをドロップ、またはスクリーンショットを貼り付けます。画像は端末上で長辺100ピクセル以下に縮小され、メディアンカットで色をグループに分けて k-means で整え、大きい順に5つのグループの色が配色になります。画像はどこにも送信されません。
配色を共有・保存するには？
「リンクをコピー」を押すと、色・ロック・乱数の情報を含んだ URL ができ、どこで開いても同じ配色になります。最後に作った配色はこの端末に自動で記憶されます。画像として残すなら「PNG をダウンロード」を使ってください。
HSL ではなく OKLCH を使うのはなぜですか？
OKLCH は人の見え方に合わせた色空間で、明度の数値が同じなら色相が違っても同じくらいの明るさに見えます。そのため、明るい色から暗い色までムラのない配色になります。HSL では明度50%の黄色と青がまったく違う明るさに見えます。oklch() のコードは最新のブラウザの CSS でそのまま使えます。
色に表示される AAA・AA・低い の意味は？
その色の上に白か黒の読みやすい方の文字を置いたときの WCAG 2.2 の判定です。AAA は7:1以上、AA は4.5:1以上（本文に十分）、AA 大文字は3:1以上（見出しのみ）、低いは3:1未満です。
最終更新日：2026年10月15日