基準色1色から配色と50〜900の明度ステップを作り、文字のコントラストと色覚の見分けやすさまで確認できます
配色パレット作成ツールは、ブランドカラーや気に入った色を1色決めるところから始めます。色相環上でその色の位置を決め、単色、類似色、補色、分裂補色、トライアド、スクエアのいずれかのルールで一緒に使うキーカラーを選びます。さらにキーカラーごとに、いちばん明るい50からいちばん暗い900まで10段階の明度ステップを作ります。背景、枠線、ボタン、文字など、画面で実際に必要な色の多くはこのステップから選べます。
選んだセルは、白い文字と黒い文字に対するコントラストをWCAG 2.2の基準で判定し、同じ行の中でその上に文字として載せられるステップも探します。キーカラー同士が1型・2型・3型の色覚や白黒印刷でどれだけ近づくかも、数値で表示します。計算はすべてブラウザ内で行い、色はHEXとCSS変数でコピーできます。
こんなときに使います
- ブランドカラーが1色だけ決まっているとき: ロゴの色に合うサブカラーとアクセントカラーをルールで決め、各色の明るい背景用と暗い文字用のステップをまとめて得られます。
- ボタン、バッジ、通知ボックスの段階が必要なとき: 同じ色の50を背景、200を枠線、600を文字にするなど、役割ごとに色を選んでCSS変数に書き出せます。セルごとに白と黒のどちらの文字が読みやすいかは、文字色でそのまま確認できます。
- グラフや地図の凡例の色を選ぶとき: トライアドやスクエアのルールで互いに離れた色を選び、「色覚タイプ別」で「近づいた」と出た組み合わせには、模様やラベルを足すか検討します。
- 補色や類似色を確かめたいとき: 美術やデザインの課題で、ある色の補色や隣り合う色を探すときにも使えます。ただし絵の具の色相環(RYB)とは基準が違い、結果が異なることがあります。下の「色相環が2種類ある理由」を合わせて読んでください。
使い方
- 基準色を入力する: 色の欄に #2E6BE6、rgb(46 107 230)、hsl(220 79% 54%)、oklch(56% 0.2 262)、royalblue など、どの形式でも入力できます。左の四角を押すとカラーピッカーが開き、サンプルの色やランダムボタンから始めることもできます。
- 色相環で微調整する: 大きな点をドラッグすると、色相(円周方向)と彩度(中心からの距離)が変わり、下のバーで明るさを変えます。色相環にフォーカスしたあと、左右の矢印キーで色相を1°ずつ、上下の矢印キーで彩度を1%ずつ動かせます(Shiftを押すと10倍)。
- 配色ルールと色相環の種類を選ぶ: 6つのルールのどれかを押すと、小さな点が色相環の上をすべるように新しい位置へ移り、一番上のキーカラーが切り替わります。色相環はHSLとOKLCHから選びます。
- 明度ステップから必要なセルを選ぶ: 表のセルを押すと、下の「選択中の色」にコード、コントラスト、同じ行の文字色の候補が出ます。コードの行を押すとその値がコピーされ、「この色を基準にする」を押すとそのセルからパレットを作り直します。
- 色覚タイプ別に確認して書き出す: 「近づいた」や「区別できない」と出た行があれば、明るさの差を広げるか、別のルールを選びます。最後にHEXのコピー、CSS変数のコピー(全ステップ)、リンクのコピーで持ち出します。
配色ルール6種類
ルールは、基準色から色相を何度回すかを決めます。基準色は常にそのままで、残りのキーカラーだけを計算します。単色は角度を回さず、彩度だけを下げます。
| ルール | 基準から回す角度 | 色数 | 向いている用途 |
|---|---|---|---|
| 単色 | 0°、彩度 1・0.55・0.2倍 | 3 | 落ち着いた画面、1つの色味でまとめる資料やカード |
| 類似色 | 0°、−30°、+30° | 3 | やわらかなブランドトーン、写真になじむ背景 |
| 補色 | 0°、180° | 2 | メインボタンと強調など、コントラストが要る1組 |
| 分裂補色 | 0°、+150°、−150° | 3 | 補色の力を残しつつ、ぶつかりを抑えたいとき |
| トライアド | 0°、+120°、−120° | 3 | イラスト、3つに分けたいグラフ |
| スクエア | 0°、+90°、180°、−90° | 4 | 4カテゴリの凡例、区画の多い案内図 |
以前の版は、ルールごとに明るさを少し変えたバリエーションを混ぜて、いつも6マスを埋めていました。新しい版では、ルールが決めたキーカラーだけを一番上に置き、明るさのバリエーションは下のステップ表に分けました。どれがルールから出た色で、どれが同じ色の明るさ違いなのかを、取り違えないようにするためです。
色相環が2種類ある理由: HSLとOKLCH
HSL色相環は、基準色のHSL彩度と明るさをそのままにして、色相の角度だけを回します。以前の版や多くのグラフィックツールがこの方式なので、ほかのツールで見つけた補色と角度が一致します。弱点は、HSLの数値が人の感じる明るさと合わないことです。CSS Color 4は、HSLで明るさが同じでも黄色は青よりずっと明るく見えること、色相が30°違っても220°と250°の間は似て見えるのに、50°と80°の間は大きく違って見えることを説明しています。
OKLCH色相環は、人が感じる明るさ(L)と彩度(C)を基準色と同じにして、色相の角度だけを回します。そのためキーカラーの明るさがそろい、文字のコントラストも近い水準で動きます。代わりに、同じ明るさでは画面(sRGB)が表示できない色が出てきますが、その場合は明るさと色相を保ったまま彩度だけを下げます。CSS Color 4 §14の色域マッピングが、彩度を下げて範囲内に収めるのと同じ方向です。色相環の斜線の部分が、その明るさで表示できない領域です。
| 基準色 | HSLの補色 | OKLCHの補色 | 読み方 |
|---|---|---|---|
| #2E6BE6 (L 0.560) | #E6A92E (L 0.773) | #966D00 (L 0.561) | HSLの補色はずっと明るいオレンジ、OKLCHの補色は同じ明るさの黄土色 |
| #E53935 (L 0.608) | #35E1E5 (L 0.830) | #0094A2 (L 0.609) | HSLの補色は明るい水色、OKLCHは同じ明るさの青緑 |
| #F9A825 (L 0.792) | #2576F9 (L 0.595) | #88BFFF (L 0.791) | 明るい黄色の補色は、HSLでは暗くなり、OKLCHでは明るい水色 |
| #00897B (L 0.566) | #89000E (L 0.397) | #A65B71 (L 0.565) | HSLの補色は濃い赤褐色、OKLCHは同じ明るさのバラ色 |
LはOKLCHの明るさ(0〜1)です。目立つコントラストがほしいときはHSL、明るさがそろった落ち着いた組み合わせがほしいときはOKLCHが出発点に向いています。図工や美術で習う絵の具の色相環(RYB)は、赤・黄・青を基本に分けた輪で、このツールの2つの色相環は、画面の色(RGB)から作った輪です。輪を分ける基本色が違うので、同じ色でも置かれる位置が違い、正反対の位置にある補色も異なります。どちらかが間違いなのではなく、基準が違うのです。
明度ステップの作り方
ステップは、OKLCHの明るさLを0.97(50)から0.25(900)まで0.08ずつ下げた10段階です。基準色より明るいセルはOklabで白の方向へ、暗いセルは黒の方向へまっすぐ混ぜて、明るさを目標値に合わせます。色相は変わらず、彩度は白や黒に近づくほど同じ割合で下がるので、とても明るいセルが蛍光色になることはありません。CSS Color 5のcolor-mix()の既定の色空間がOklabなので、color-mix(in oklab, 基準色, white n%)と同じ計算です。
キーカラーは、Lがいちばん近いセルにその色のまま入り、表では点(•)で示されます。ステップの番号は明るさの位置なので、もともと明るい黄色(#F9A825、L 0.792)は200のセルに、濃い紺色は700〜800のセルに入ります。ほかのデザインシステムでは「黄色の500」が明るい黄色ですが、この表では黄色の行の500は茶色寄りです。同じ番号どうしで明るさがそろうので、違う色を混ぜて使いやすくなるための選択です。
| ステップ | 目標 L | 灰色(#808080)の行 | 白い文字 | 黒い文字 |
|---|---|---|---|---|
| 50 | 0.97 | #F5F5F5 | 1.0:1 | 19.2:1 |
| 100 | 0.89 | #DBDBDB | 1.3:1 | 15.1:1 |
| 200 | 0.81 | #C1C1C1 | 1.8:1 | 11.6:1 |
| 300 | 0.73 | #A8A8A8 | 2.3:1 | 8.8:1 |
| 400 | 0.65 | #8F8F8F | 3.2:1 | 6.4:1 |
| 500 | 0.57 | #808080 (基準) | 3.9:1 | 5.3:1 |
| 600 | 0.49 | #606060 | 6.2:1 | 3.3:1 |
| 700 | 0.41 | #4A4A4A | 8.8:1 | 2.3:1 |
| 800 | 0.33 | #353535 | 12.2:1 | 1.7:1 |
| 900 | 0.25 | #222222 | 15.9:1 | 1.3:1 |
灰色の行では、600から白い文字が4.5:1を超え、500までは黒い文字が4.5:1を超えます。有彩色の行もおおむねこの付近で切り替わりますが、同じLでも色によってWCAGの輝度が違うため、境目が1段ほど動きます。表のセルの文字が白から黒に変わる位置が、その境目です。
文字のコントラストの読み方
- 基準: WCAG 2.2は、通常の文字に4.5:1(1.4.3、AA)、大きな文字(18pt以上、または太字の14pt以上)に3:1、より厳しい1.4.6(AAA)に7:1を求めています。見本の「AA・AAA・大きな文字のみ・基準未満」がこの区分です。
- 四捨五入しない: Understanding SC 1.4.3は、計算した比率を丸めないと明記しています(4.499:1は4.5:1に届きません)。そのためこのツールは小数第1位で切り捨てて表示し、表示された値で判定します。
- 白か黒のどちらかは必ず通る: どんな色でも、白い文字と黒い文字のうちコントラストが大きい方は、4.58:1を下回りません。2つのコントラストが等しくなる輝度(約0.179)で、どちらも4.58:1になるからです。だから表のセルの文字色は、いつも4.5:1を超える方になります。
- 同じ行の文字色の候補: 選んだセルから上下に一番近い、コントラスト4.5:1以上のステップを探します。最初の画面の基準の行では、50(#F0F5FF)の背景に600(#2558C0)の文字が5.9:1、100に対して600は4.6:1です。基準色そのもの(500)は、同じ行のどのセルとも4.5:1に届かないので、白い文字(4.8:1)を使うのが妥当です。
色覚タイプ別の見え方と「近づいた」表示
キーカラーを1型(赤)、2型(緑)、3型(青)の色覚で見たときと、白黒で印刷したときの色に変換して、並べて表示します。1型・2型はMachadoら(2009)のモデル、3型はBrettelら(1997)の方式で描き、強さは該当する錐体がない2色覚(100%)です。白黒はWCAGの輝度を灰色に置き換えた値です。
各行の右の数値は、その見え方で一番近い2つのキーカラーのOKLab距離(ΔEOK)です。CSS Color 4は、OkLChの差0.02をかろうじて気づける差(JND)としています。このツールは、0.02未満を「区別できない」、元の色で測った距離の半分を下回ると「近づいた」と表示します。半分という基準は標準ではなく、このツールが決めた警告ラインです。
| 組み合わせ | 見え方 | 最も近い2色 | 表示 |
|---|---|---|---|
| 最初の画面の分裂補色(#2E6BE6・#E64D2E・#C7E62E) | 元の色 | 0.36 | 基準の差 |
| 同じ組み合わせ | 2型 | 0.24 (66%) | 区別できる |
| 同じ組み合わせ | 白黒印刷 | 0.05 (15%) | 近づいた: 青と朱色の明るさが近い |
| 赤・緑のボタン(#D9534F・#5CB85C) | 2型 | 0.07 (25%) | 近づいた |
WCAG 2.2の1.4.1は、情報を色だけで伝えないよう求めています。「近づいた」が出ていなくても、状態やカテゴリを色だけで分けず、文字、アイコン、模様を併用してください。白黒の行で近づいているなら、2色の明るさの差を広げるのが最も手早い対処です。
最初の画面の例を読み解く
最初の画面は、基準色が #2E6BE6、分裂補色、HSL色相環です。HSLの色相220°から+150°(10°)と−150°(70°)を回し、彩度79%・明るさ54%をそのままにした2色が得られます。
| キーカラー | HEX | OKLCH L | ステップ位置 | 白い文字 | 黒い文字 |
|---|---|---|---|---|---|
| 基準 | #2E6BE6 | 0.560 | 500 | 4.8:1 | 4.3:1 |
| +150° | #E64D2E | 0.629 | 400 | 3.8:1 | 5.4:1 |
| −150° | #C7E62E | 0.873 | 100 | 1.4:1 | 14.7:1 |
HSLの明るさは3色とも54%ですが、OKLCHの明るさは0.560・0.629・0.873と開きがあり、そのため黄緑は100のセル、朱色は400のセルに入ります。黄緑の上には黒い文字だけが、青の上には白い文字だけが、通常の文字の基準を超えます。同じ基準色でOKLCH色相環を選ぶと、3色の明るさが0.56付近に集まり、そのぶん色は落ち着いた印象になります。
よくある間違い
- ツールごとに補色が違うと疑う: 絵の具の色相環(RYB)、画面の色相環(HSL)、知覚に基づく色相環(OKLCH)では、同じ色の補色が互いに異なります。まず、どの輪を基準にしているか確認してください。
- HSLの明るさが同じなら見た目の明るさも同じと考える: 最初の画面の例のように、HSL 54%の3色でも実際の明るさは大きく違います。文字を載せる色は、コントラストの数値かOKLCHのLで判断してください。
- キーカラーをそのまま文字色にする: 彩度の高いキーカラーは、白い背景でも4.5:1に届かないことが多くあります。文字には、同じ行の600〜900のセルを使うほうが安全です。
- ステップ番号をほかのデザインシステムに合わせようとする: この表の番号は明るさの位置です。黄色の500が茶色寄りに出るのは不具合ではなく、明るい黄色は200のセルにあります。
- 無彩色で配色ルールを回す: 灰色、白、黒には色相の角度がないため、どのルールを選んでも同じ灰色になります。色相環の点を外側へドラッグして、少しでも彩度を与えてください。白と黒は明度が端（100%・0%）にあるためドラッグしても変わらないので、先に明度スライダーを中央寄りに動かしてください。
- ウェブセーフカラーに合わせようとする: ウェブセーフカラーは、赤・緑・青をそれぞれ00・33・66・99・CC・FFの6段階だけで組み合わせた216色で、表示できる色が少なかった昔の画面環境のための基準です。今のウェブ画面では合わせる必要はなく、限られたパレットを使う古いシステムに合わせるときだけ参考にしてください。
限界と注意
- 配色ルールは色相の角度の関係を整理するだけで、結果が美しいことを保証するものではありません。ルールは出発点であり、ブランドの意味や用途に合わせて選ぶのは人の役目です。
- 色はsRGBで計算し、HEXで書き出します。モニターによって同じHEXでも見え方が変わることがあり、印刷用のCMYK値はこのツールでは作りません。
- 色覚シミュレーションは、平均的な2色覚をモデルにした近似です。実際の見え方は人によって異なり、軽い色弱では、ここで示すほど差は縮まりません。
- コントラストの判定は、文字色と背景色の2色だけを見ます。フォントの太さ、サイズ、背景の模様、半透明の効果は、自分で確認する必要があります。
- 入力の透明度(アルファ)は除き、不透明な色として計算します。リンクには色、ルール、色相環の種類だけが含まれ、選択したセルは含まれません。
基準：2026-10-20にCSS Color 4（2025-08-18版）、CSS Color 5（2026-09-13版）、WCAG 2.2の記述を確認しました。本文の表の数値は、このツールの計算コードで計算し直した値です。
出典
- 01W3C: CSS Color Module Level 4 (CRD 2025-08-18)§7 HSLと色相の不均一さ(220°/250°、50°/80°の例)、§9.2 OklabとOkLCh(青 L 0.452・黄 0.968)、§14 色域マッピングとJND 0.02
- 02W3C: CSS Color Module Level 5 (WD 2026-09-13)§3 color-mix()、混ぜる色空間を指定しない場合はOklab
- 03Björn Ottosson: A perceptual color space for image processing (2020)sRGBとOklabの変換行列
- 04W3C: WCAG 2.21.4.1 色だけで伝えない、1.4.3 コントラスト4.5:1(大きな文字は3:1)、1.4.6 7:1、コントラスト比の式
- 05W3C: Understanding SC 1.4.3 Contrast (Minimum)比率は丸めない(4.499:1は4.5:1未満)、大きな文字は18pt・太字14pt
- 06Machado GM, Oliveira MM, Fernandes LAF. A Physiologically-based Model for Simulation of Color Vision Deficiency. IEEE TVCG 2009;15(6):1291–12981型・2型シミュレーションの行列
- 07DaltonLens: Understanding LMS-based Color Blindness Simulations (2021)Brettelら1997の方式による3型シミュレーション(基準波長485・660 nm)
- 08Adobe Express: Color wheel explained色相環は2種類: RYBは画家が絵の具を混ぜるとき、RGBはコンピューターやテレビの画面で使われるという説明、補色 = 色相環で正反対の位置にある2色
よくある質問
補色はどのように計算しますか?
基準色の色相を180°回した色です。HSL色相環ではHSLの彩度と明るさをそのままにし、OKLCH色相環では人が感じる明るさと彩度をそのままに、角度だけを回します。基準色 #2E6BE6 の補色は、HSLでは #E6A92E、OKLCHでは #966D00 です。
ほかのサイトや美術の教科書と補色が違うのはなぜですか?
色相環によって輪の分け方が違うからです。絵の具の色相環(RYB)は赤・黄・青を基本に分け、このツールのHSL・OKLCH色相環は画面の色(RGB)から作った輪なので、同じ色が置かれる位置が違います。どの輪を基準にしているかをそろえてから比べてください。
HSLとOKLCHの色相環は、どちらを選べばよいですか?
ほかのグラフィックツールと同じ角度の結果や、目立つコントラストがほしいときはHSLを選びます。キーカラーの明るさをそろえたいときはOKLCHが向いています。HSLでは数値が同じでも黄色は明るく青は暗く見えますが、OKLCHは感じる明るさ(L)を同じに保ちます。
50〜900のステップ番号は何を表していますか?
OKLCHの明るさLの位置です。50はL 0.97、900はL 0.25で、0.08ずつ下がります。キーカラーはLがいちばん近いセルにそのまま入るので、もともと明るい黄色(#F9A825)は200のセルに入り、黄色の行の500は茶色寄りになります。
表のセルの文字が白から黒に変わるのはなぜですか?
セルごとに、白い文字と黒い文字のうちWCAGのコントラストが大きい方を使っているからです。どんな色でも、大きい方は4.58:1を下回らないので、通常の文字の基準4.5:1を超えます。文字色が切り替わる位置が、白い文字と黒い文字の境目です。
コントラストが4.5:1を超えていれば、アクセシビリティは十分ですか?
文字のコントラストについて、WCAG 2.2 1.4.3の最低基準を超えたという意味です。小さな文字をさらに見やすくするには7:1(AAA)を目指し、状態やカテゴリを色だけで分けず、文字・アイコン・模様も併用してください(1.4.1)。比率は丸めないので、4.49:1は基準未満です。
色覚タイプ別の見え方にある「近づいた」とは何ですか?
その色覚で見たとき、最も近い2つのキーカラーのOKLab距離が、元の色で測った距離の半分を下回ったことを示す、このツールの警告です。0.02(JND)未満は「区別できない」と表示します。最初の画面の分裂補色は、白黒印刷で青と朱色が元の差の15%まで縮まるため、「近づいた」と出ます。
作ったパレットはどのように持ち出せますか?
HEXのコピーはキーカラーの一覧を、CSS変数のコピーは全ステップを --c1-50 から --c4-900 のような名前でコピーします。コードの行を押すと、その値だけがコピーされます。リンクのコピーを押すと、基準色・ルール・色相環の種類を含むURLがコピーされ、開くと同じパレットが再現されます。