カラーホイールエクスプローラー

HSL ホイールと RYB ホイールの比較

どちらのホイールも色を円形に並べますが、どの色を「反対側の色」とみなすかが異なります。

• HSL（色相・彩度・明度）：CSS やデジタルデザインで使われる sRGB の円筒表現です。180°を加えると、このデジタルホイール上で反対側の色相を選べます。
• RYB（赤・黄・青）：美術教育で使われる伝統的な概念上のホイールです。このツールは色相角を組み替えて慣習を近似するもので、実際の顔料を混ぜた結果を予測するものではありません。

どちらも目的によって有効です。画面上の作業には HSL を、絵の具の感覚を重視するなら RYB を使いましょう。

ホイール上の配色の定義

• 補色：ベース + 180°。選択した色相環で色相の間隔が最大になる。
• 類似色：ベースと -30°、+30° の隣接色。やわらかく統一感がある。
• トライアド：ベース + 120° + 240°。バランスのよい鮮やかさ。
• スプリットコンプリメンタリー：ベース + 150° + 210°。補色ほどの強い緊張感はなく、豊かな印象。
• テトラード／スクエア：ベース + 90° + 180° + 270°。等間隔に並んだ4色相。
• モノクロマティック：同じ色相で、明度・彩度を変える。

ホイール上の色温度

• 暖色側：赤、オレンジ、黄。伝統的に前に出て見える（視線を引きつける）。
• 寒色側：緑、青、紫。伝統的に奥に引く。
• 中間色：彩度の低い色。色味によってどちらの側にも属する。

実際の使い方

• ブランドパレットの検討：しっくりくる色が見つかるまでピンをドラッグし、トライアドやテトラードのマークでアクセントになる色を確認します。
• 絵画の研究：写真の参考資料を選び、主となる色相を見つけ、モノクロマティックな陰影づけのために類似色を調べます。
• イラスト：影には補色のペアを選びます。たとえばオレンジ色の物体なら、単に暗いオレンジではなく青で影を描きます。
• インテリアデザインの試作：トライアドのホイールは定番のインテリア配色に対応します（伝統的なアメリカンスタイルでは青／黄／赤、ボヘミアンでは緑／オレンジ／紫）。

ホイールが完全には直感的でない理由

実際の人間の色の知覚は、どちらのホイールが示すよりも複雑です。マンセル表色系、LAB、OKLCH はいずれも知覚的に均一な配置を目指しますが、単純な円にはなりません。彩度は色相ごとに明度によって変化するからです。本格的なデザインシステムの作業では知覚的な色空間のほうがホイールよりきれいな結果になりますが、色の概念を探るうえではホイールのほうがわかりやすさで勝ります。