使い方

1. カラーホイールの任意の場所をクリックして色を選ぶか、色相、彩度、明度のスライダーを調整します。
2. ホイールの下にHEX、RGB、HSL形式で選択した色が表示されます。
3. 調和サンプルをクリックして、補色、類似色、トライアド、分裂補色のスキームを確認します。

よくある質問

色の調和とは?

色の調和とは、カラーホイール上の位置に基づく心地よい色の配置を指します。一般的な調和には、補色(反対)、類似色(隣接)、トライアド(等距離)があります。

HEX、RGB、HSLの違いは?

HEXは6桁の16進数コード(#RRGGBB)です。RGBは赤、緑、青の値(0-255)を使用します。HSLは色相(0-360°)、彩度(0-100%)、明度(0-100%)を使用します。

これらの色をデザインで使用できますか?

はい!任意の値をコピーして、CSS、デザインソフトウェア、ウェブアプリに直接貼り付けることができます。すべての値は標準に準拠しており、広くサポートされています。

カラーホイールの短い歴史

アイザック・ニュートンが最初に描いた。Opticks（1704年）で、1672年に王立協会に初めて示したプリズムの実験を報告し、白色光がスペクトル色の混合であることを示した。スペクトルを閉じた円に配置することで、赤の端が紫の端と合わさるようにした。彼は7つの色（赤・橙・黄・緑・青・藍・紫）を音楽のダイアトニック音階の7つの音に対応させて命名した。色と和声が数学的な構造を共有すると信じていたためだ。青とは別の帯として藍を設けたのは、その美的選択の最も有名な余波だ。

ゲーテの色彩論（1810年）は、物理学ではなく知覚を中心にホイールを再構成した。色を対称的に「プラス」の暖色と「マイナス」の寒色に配置し、対立する色が「目の中でお互いを呼び起こし合う」と述べた。これは1839年にゴブラン織物工房からミシェル・ウジェーヌ・シュヴルールが発表した同時対比の法則を予見した、対立過程理論の初期の表現だ。

アルバート・マンセルのA Color Notation（1905年）は、慣習ではなく測定された人間の知覚に基づいた最初のホイールで、色相・明度・彩度を独立した次元に分離した。CIELABやOKLCHを含むすべての現代的な知覚色空間の直接の先祖だ。デザイナーが学校で教わるホイールはもっと新しい：ヨハネス・イッテンは1919年から1922年にかけてバウハウスで12色のRYBホイールを体系化し、3つの原色（赤・黄・青）・3つの二次色・6つの三次色・7種類の色のコントラストを特定した。実際にスクリーンで使われるホイールはまた異なる：HSLとHSVは1970年代にPARCなどのグラフィックス研究室で発明されたRGBの円筒形再パラメータ化で、デザイナーが3つの直感的なスライダー（「この色相・より鮮明・より明るく」）で考えられるようにした。最近のステップはOKLCH（Björn Ottosson、2020年12月）で、現在CSS Color Module Level 4に含まれる。等しい角度ステップが等しい知覚的な色相ステップに見えるホイールだ。

3種類のホイール

「カラーホイール」という言葉は、物理的な状況によって正しい種類が異なる3種類のホイールが存在する事実を隠している：

• RYB（赤・黄・青）は、イッテンが広めた芸術教育用のホイールだ。顔料を扱う経験に基づく慣習であり、物理学のモデルではない。赤・黄・青の絵の具の組み合わせでは、すべての可視光色を混合することはできない。
• RGB（赤・緑・青）は加法混色だ。色が発光される場所で使われる：モニター・電話・プロジェクター・舞台照明。生理学的な基盤がある：人間の網膜には長・中・短波長に感応する3種類の錐体がある。ブラウザとCSSはRGBで動作するため、このツールのHSLホイールはsRGBの極座標再パラメータ化だ。
• CMY / CMYK（シアン・マゼンタ・イエロー + キー/ブラック）は減法混色だ。色が反射される場所で使われる：印刷・インク・染料。混合すると明るさが減少する；商業印刷機は真のブラックを得るためとインクを節約するためにブラックを追加する。

実際的な結果：このホイールが出力するHEX・RGB・HSLの値はスクリーン精度だ。塗料として正確ではない。CMYK印刷には独自の変換が必要で、通常は印刷業者が対応してくれる。

HSLがどのように円にマッピングされるか

HSLは色相・彩度・明度（hue, saturation, lightness）の略だ。色相は中央軸の周りの角度で、赤が0°、緑が120°、青が240°、360°で赤に戻る。彩度は0%（グレー）から100%（完全に鮮やか）まで。明度は0%（黒）から、50%での自然な色相を経て、100%（白）まで。幾何学的にはモデルは双錐形（先端同士をつなげた2つの円錐）で、最も彩度の高い色が赤道にある。HSVは似ているが明度の代わりにValueを使い、V=100で完全に彩度の高い色が現れ、モデル全体が単一の円錐形になる。

CSSのhsl()関数は同じ3つの数値を取る。現代の構文はスラッシュの後にオプションのアルファを付けたスペース区切りだ：

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

旧来のカンマ区切りのhsl(210, 80%, 50%)とhsla()エイリアスは後方互換性のためにまだサポートされている。CSS Color Module Level 4は基本的なHSLについては2015年頃からブラウザで広く利用可能で、現代の構文はその後に展開された。

正直な注意点：HSLは知覚的に均一ではない。L=50%の黄色はL=50%の青よりもはるかに明るく見える。同じ数値の明度でも同様だ。一定のSとLで色相を切ったホイールは、視覚的に重い黄色と弱い青を持つ。データビジュアライゼーションや慎重に調整されたブランドパレットには、新しいoklch()色空間がより良い選択だ。等しい角度ステップが等しい知覚的な色相ステップに見える。色を選んでHEXを取得するだけなら、HSLで問題ない。

古典的なハーモニーと数学

すべてのハーモニースキームは基準の色相からの角度オフセットのセットによって定義される。Bを選択した色相とする：

スキーム	色相	雰囲気
モノクロマティック	B（SとLのみ変化）	繊細・低コントラスト・穏やか
アナロガス	B − 30°, B, B + 30°	豊か・調和的・夕焼け・木の葉
コンプリメンタリー	B, B + 180°	ダイナミック・注目を引く
スプリットコンプリメンタリー	B, B + 150°, B + 210°	強いコントラストだが純粋なコンプリメンタリーより柔らか
トライアディック	B, B + 120°, B + 240°	鮮やかなコントラストとバランスと豊かさ
テトラード（長方形）	B, B + 60°, B + 180°, B + 240°	2つのコンプリメンタリーペア、どちらか一方を主役に
スクエア	B, B + 90°, B + 180°, B + 270°	均等な4方向の分割、バランスを取るのが難しい

これらの角度はゲーテとイッテンから受け継いだ教育上の慣習であり、心理物理学的な法則ではない。コントラストとバランスを確実に生み出すため、デザイナーが利用するのだが、規則ではなくヒューリスティクスだ。上記のハーモニースウォッチを反復の出発点として扱うこと。

ホイールを使う場面

• ウェブとUIデザイン。ブランドのプライマリを選び、危険 / コール・トゥ・アクションのアクセント用にコンプリメンタリーを派生させ、チャート用にトライアディックの3番目を派生させる。次に背景とテキストに対してコントラストを確認する。
• ブランドアイデンティティ。ロゴの色と、マーケティング資料用にドキュメント化されたハーモニーのパレット。
• データビジュアライゼーション。カテゴリカルなパレット（等しい知覚的距離での10色以上の異なる色相）と連続的または発散的なスケール。3〜4シリーズを超える場合はHSLよりOKLCHで行う方がよい。
• インテリアデザイン。ベースの壁の色・アナロガスのトリム・クッションやアートのコンプリメンタリーなアクセント。
• 写真のカラーグレーディング。ティールとオレンジ（コンプリメンタリーペア）は、暖かい肌のトーンが映画的に見える寒い影に対して読み取れるため、現代の映画の定番となっている。
• ゲームアートとイラスト。環境に対してキャラクターを色相でキーイングし、焦点となる部分にコンプリメンタリーなアクセントを加える。

色覚とホイール

北ヨーロッパ系の男性の約8%と女性の0.5%が何らかの色覚異常を持っている（割合は集団によって異なる）。L錐体とM錐体の遺伝子がX染色体上にあるため、男性にはるかに多い。いくつかのハーモニー（特に赤/緑のコンプリメンタリーペア）は最も一般的な種類の人にはほぼ単色に見える：

• 第二色盲 / 第二色弱（deuteranopia / deuteranomaly）：中波長錐体が機能しないまたは弱い。最も一般的な形（男性の約6%）。赤と緑が混同される。
• 第一色盲 / 第一色弱（protanopia / protanomaly）：長波長錐体が機能しないまたは弱い（男性の約2%）。赤が暗く見え、ときに黒と混同される。
• 第三色盲 / 第三色弱（tritanopia / tritanomaly）：短波長錐体が機能しないまたは弱い。非常にまれだ。青と黄色が混同される。

WCAG 2.1の「色だけに頼らない」という原則が直接関係する：情報の唯一の手段として色を使ってはいけない。色相コントラストに加えて明度コントラストを加え、チャートでは色と共にパターンや形状を使い、コミットする前に生成したハーモニーをカラーブラインドネスシミュレーターで確認する。WCAGコントラストも確認すること：AAでは通常テキストに最低4.5:1、AAAでは7:1。

もっと知りたい方へ

赤・黄・青が「原色」と呼ばれるのはなぜ？

芸術的なRYBの伝統では（イッテンがバウハウスで教えたホイール）、他のすべての色が混合できると想定される3つの顔料だからだ。その想定は物理学ではなく慣習だ：実際の赤・黄・青の顔料を組み合わせてもすべての可視光色を混合することはできない。加法混色の光では真の原色は赤・緑・青（RGB）で；減法混色の印刷ではシアン・マゼンタ・イエロー（CMY）だ。RYBは教育的にシンプルで実際の絵の具を混合するときに合理的な結果が得られるため、芸術教育で使われ続けている。

16:9は色の黄金比と同じですか？

いいえ、それらは2つの無関係な概念だ。「黄金比」は比例（長方形・レイアウト）に関するもので、約1.618だ。色彩理論のハーモニーは色相の円の角度幾何学から来ている：コンプリメンタリーに180°、トライアディックに120°、スクエアに90°だ。標準的なカラーホイールの教育には黄金比のハーモニーは組み込まれていない。

ここで見た色は印刷物に合いますか？

ほぼ確実に完全には一致しない。このホイールはsRGB上のHSLで、スクリーン向けに設計された加法混色だ。印刷は減法混色のCMYKだ。モニター上では問題なく見える鮮やかな青や明るい緑は、紙の上では大きく彩度が落ちることが多く、色域外の変換では色相がシフトすることがある。印刷デザイナーは通常、デザインツール内でCMYKで直接作業するか、目の前に調整されたプルーフを置く。このホイールをスクリーンのモックアップに使って、その後変換すること。

「色彩心理学」（赤＝情熱、青＝穏やか）は実際の根拠がありますか？

民間伝承としての力はあるが、経験的なサポートは弱く文化によって異なる。異なる文化では同じ色に非常に異なる意味を結びつける（白は西ヨーロッパでは結婚式の色で、東アジアの一部では葬儀の色だ）。色彩心理学はデザインの出発点とクライアントとの会話の語彙として使い、法則としては扱わないこと。

何かサーバーに送信されますか？

いいえ。ホイールはHTML5 Canvasでレンダリングされ；ハーモニーの角度はローカルのJavaScriptで計算される；HEX・RGB・HSLの文字列はブラウザAPIを通じてクリップボードに書き込まれる。ページは一度読み込まれればオフラインで動作する。

関連ツール