Softonic

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

ステップ 1 / 4

ベースカラーを選択

次へ

カラーホイール上のピンをドラッグすると、配色マーカーがそれに合わせて回転します。補色は180°、トライアドは120°間隔、ほかにも類似色、スプリットコンプリメンタリー、テトラードが表示されます。HSL（エンジニア向けのホイール）と RYB（アーティスト向けのホイール）を切り替えて両者の違いを見比べ、気に入った組み合わせをパレットとしてコピーできます。

カラーホイールエクスプローラーの仕組み

  1. 1

    ホイールの周囲でピンをドラッグします

    ピンはベースカラーを設定します。彩度と明度は個別のコントロールでスライドします。

  2. 2

    配色を選ぶ

    補色、類似色、トライアド、スプリットコンプリメンタリー、テトラード、モノクロマティック。配色マーカーはベースカラーに合わせて回転します。

  3. 3

    モデルを切り替える（HSL と RYB）

    HSL ホイールは対称的です（赤の反対が青緑、緑の反対がマゼンタ）。RYB ホイールは非対称で（赤の反対が緑、青の反対がオレンジ）、絵の具を混ぜる感覚に近くなっています。

  4. 4

    パレットをコピーする

    ベースカラーと各配色マークの HEX、RGB、HSL を取得できます。CSS 変数、Sass マップ、シンプルな CSV としてコピー可能です。

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

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

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

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

ホイール上の配色の定義

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

ホイール上の色温度

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

実際の使い方

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

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

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

よくある質問

デジタルデザイン（CSS、画面、UI）には HSL を使います。絵の具や印刷、伝統的な美術を念頭に置き、美術学校で習うような従来の配色感覚を求める場合は RYB を使いましょう。

2つのモデルで色相の並べ方が異なるためです。HSL は sRGB の色相角を使うので、赤の反対側はシアンです。伝統的な RYB の慣習では、赤の反対側は緑です。ここでの RYB は視覚的な近似であり、特定の絵の具を混ぜた結果を予測するものではありません。

教育やアイデアのスケッチ、クライアントとの意思疎通には使います。一方、正確なパレット作りでは、明度と彩度が色相から独立している知覚的な色空間（LAB、OKLCH）を使うプロが増えています。

パレットを CSS、Sass、CSV のいずれかでコピーし、作業先に保存してください。このツールにはパレットライブラリやアカウント保存機能はありません。4 ステップの操作では、画面に表示されるホイール設定が URL に含まれ、ブラウザ履歴に残ることがあります。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

このツールは他の言語でも利用できます