カラーホイール
カラーホイールは、ある1つの明度でのOKLCh色空間の断面を表示します。円周に沿って色相が、中心から外へ向かってクロマが変化し、ギザギザの外縁は、sRGB画面で表示できる色の本当の境界です。1点を選ぶと、補色、類似色、三色配色、四色配色、分裂補色の各スキームを返します。回転はすべてOKLChで行われるので、スキーム内のどの色も、最初の明度を保ちます。
この色相と明度では彩度成分が sRGB の範囲外です。画面で表示できる最も近い色 #0098a1 を示します。
配色
補色から左右に30°ずらした配色です。高いコントラストを保ちつつ、視覚的な強さを抑えます。
3 色
3.5 / 6.0
3.8 / 5.5
3.8 / 5.6
白地と黒地でのコントラスト比です。本文には 4.5:1 以上が必要です。
選択した色
- HEX
- #0098a1
- RGB
- rgb(0 152 161)
- HSL
- hsl(183 100% 31.6%)
- 名前
- —
配色のプレビュー
配色の最後の色を背景にした段落です。採用する前に文字が読めるか確認できます。
カラーホイールはどう動きますか？
これまで使ってきたカラーホイールは、どれも色空間の断面です。どの空間の断面かが、そのホイールが役に立つかどうかを決めます。おなじみのホイールは、明度50%でのHSLの断面です。見てください。上の黄はまぶしく、下の青はほぼ黒なのに、HSLはどちらも明度50%と呼びます。あのホイールから拾ったスキームは、角度以外に何の共通点もない色の集合です。
このホイールはOKLChの断面で、その明度軸は目が実際に報告する明るさに沿っています。スライダーをある位置に置くと、描かれるピクセルはすべて同じ知覚的な明るさを持ちます。円周に沿って動くと変わるのは色相だけで、正反対に置いた2色は、片方がもう片方を圧するのではなく、本当に釣り合ったペアになります。
ギザギザの外縁の正体
描かれる領域は円盤ではありません。そしてこれが、ページ上で最も情報量の多い部分です。クロマは中心のグレーから外へ向かって増え、ピクセルは、そこが表す色がsRGBに存在するときにだけ描かれます。結果として現れるのは、その明度での色域の本当の形です。黄や緑は遠くまで届き、青や紫は手前で止まり、明度スライダーをどちらの極端まで動かしても、図形全体は一点へ向かって収縮していきます。非常に暗い色や非常に明るい色は、どうしても彩度を高くできないからです。
円盤を埋めてしまうホイールは、この点について嘘をついています。色域外の領域全体に、同じクリップ後の色を塗り、画面に表示できない値を選ばせておきながら、それを告げないからです。
スキームの計算方法
各スキームは色相回転の集合です。補色は180°、類似色は±30°、三色配色は120°ずつ、分裂補色は150°と210°。回転はOKLChで行い、明度とクロマは固定します。回転後の色相が色域外に出た場合は、二分探索でクロマを収まるまで引き戻します。色相と明度は正確に保たれ、諦めるのは、どうせ存在しなかった彩度だけです。
スキームの価値についても正直に
ハーモニーは算術的な関係であって、デザインそのものではありません。三色配色は120°間隔の3色相を与えますが、3色目がアクセントとして立つためには、2色のクロマを1/10まで落とす必要があるとは教えてくれません。UIはほとんどの場合、1つの色相とニュートラルなランプで構成され、破壊的な操作用にもう1つの色相を加える程度です。モノクロマティックの選択肢は、このリストの中で、実際のデザインシステムが出荷しているものに最も近い。ホイールは関係を見つけるために使い、そして彩度の大半は捨ててください。
ホイール上の1点
hue 202° chroma 0.150 lightness 0.62
貼り付けられるスキーム
split complementary #00a2b4 base #c48a2a +150° #d4739a +210°
カラーホイールが対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| 色相 | 0–360° | 202 | 輪郭上の角度。OKLChでは、この値を変更しても知覚される明度は変わらず、それこそがこの色空間を使う理由です。 |
| クロマ | 0–0.37 | 0.15 | グレーの中心からの距離。パーセンテージではなく絶対的な測定値であり、最大値は色相と明度の両方に依存します。 |
| 明度 | 0–1 | 0.62 | 空間のどのスライスを描画するか。描画される領域は両端で点に収縮します。なぜなら、暗い色と明るい色は多くのクロマを保持できないからです。 |
| 補色 | +180° | 2色 | 最大の色相分離。強すぎるほどで、通常は1つのアクセントと1つの支配色として機能し、対等なペアとしては機能しません。 |
| 類似色 | ±30° | 3色 | 隣接色。最も静かな配色で、インターフェース全体では何も競合しないので最も安全です。 |
| トライアド配色 | 120°間隔 | 3色 | 均等な間隔。理論的にはバランスが取れていますが、実際には3色のうち2色のクロマを大幅に減らす必要があります。 |
| 分裂補色 | +150°, +210° | 3色 | 反対側の色相を、その両側に分けるもの。正確な補色が生じる振動を失いますが、コントラストの大部分を保ちます。 |
| モノクロマチック | 明度のみ | 5色 | 1つの色相を5つの明度で表現したもの。地味ですが、実際にほとんどのデザインシステムがこれをベースに構築されています。 |
よくある質問
カラーホイールは何に使うものですか？
手元にある色に対して、定義済みの関係を持つ色を見つけるためのものです。色相を180°回せば、取りうる最大の分離が得られます。左右30°回せば、ぶつからない隣人が得られます。これは候補を素早く生成する方法であって、その中から選ぶ方法ではありません。選択には、どの色に最も重みを持たせるか、他の色が彩度をどれだけ譲るべきかという判断が、依然として必要です。
補色とは何ですか？
ホイール上で正反対の位置にある2つの色相で、180°離れています。取りうる中で最も強い色相コントラストを与えます。だから支配色に対するアクセントとしては機能しますが、等しい面積の2色として並べてもほとんど機能しません。フル彩度の正確な補色ペアでは、2色が接する境目が揺れて見えることもあります。分裂補色にして左右30°ずつずらせば、コントラストの大半を保ったまま、この現象は消えます。
いつも使っているホイールと見た目が違うのはなぜですか？
理由は2つあります。1つは、HSLではなくOKLChで描かれているため、断面の中のどの色も、数値が同じであるだけでなく、知覚的な明るさが同じだということです。ここでは黄が青より明るくは見えません。もう1つは、完全な円盤ではないことです。ピクセルは、その色がsRGBに存在する場所にだけ描かれるので、外縁は実際の色域の境界です。円盤を埋めることは、画面に表示できないクリップ後の色を塗ることを意味します。
明度スライダーを動かすとホイールが縮むのはなぜですか？
画面が表示できるクロマの範囲が、明度に依存するからです。50%なら十分な余裕があります。95%ではほぼすべてが淡い色で、利用できる中で最も彩度の高い色でも、ほとんど彩度を持ちません。5%では、暗い側で同じことが起きます。縮んでいく図形はこれを正確に描いています。だからこそ、11段階すべてでクロマを一定に保つ淡色ランプは、蛍光色のような明部と、光り輝くような暗部を生んでしまうのです。
Webサイトにはどのスキームを選ぶべきですか？
おそらくモノクロマティックに、ニュートラルなグレーのランプと、破壊的な操作用にもう1つの色相を加える形です。UIが運ぶ色は、スキームジェネレーターが想像させる量よりはるかに少ないものです。支配色は、ほとんど意識されない背景色であることが多く、アクセントはボタン数百ピクセル分にすぎません。次に安全なのは類似色です。三色配色と四色配色はスクリーンショットでは映えますが、実際に出荷するには相当な抑制が求められます。
ホイールは選んだ色をどこかに送信しますか？
いいえ。ホイールはこのタブ内でcanvasに1ピクセルずつ描画され、回転もすべてここでの計算です。ページは読み込み後、ネットワーク要求を一切行いません。さらにこのサイトのContent-Security-Policyはconnect-src 'self'を設定しているため、何かが送信を試みても、ブラウザが拒否します。