補色ファインダーとは？
補色ファインダーは、入力された色に対してカラーホイール上の反対色を算出します。類似色、トライアド、スプリットコンプリメンタリーも表示されるので、まとまりのあるパレットを組み立てられます。
内部では chroma-js の HSL 計算を使い、色相環を固定角度で回して 6 種類の配色を導き出します。補色(180°)、類似色(±30°)、トライアド(120° と 240°)、スプリットコンプリメンタリー(150° と 210°)、テトラード/スクエア(90°、180°、270°)、そしてモノクロマティック(ベースカラーの明暗バリエーション)です。各スウォッチは HEX、RGB、HSL の値をすべて表示し、どの形式でもクリックひとつでコピーできるので、そのまま Figma、Tailwind 設定、CSS ルールに貼り付けられます。
使い方
- ステップ1 — HEX (#FF6600) または RGB (255 102 0) 形式でベースカラーを入力するか、カラーセレクターで選択します。
- ステップ2 — 補色（カラーホイール上で180°反対の色）とそのカラーコードが即座に表示されます。
- ステップ3 — 追加の配色パターン（類似色、トライアド、スプリットコンプリメンタリー）を確認し、任意のスウォッチ値をコピーします。
使用するタイミング
- 既存のメインカラーを軸に、Adobe Color を開かずブランドパレットを組み立てる。
- ページ背景の上でも目立つ CTA ボタンの色を選ぶ。
- 隣り合っても読みやすいグラフ系列の色を決める。
結果
ブランドデザイナーがプライマリーオレンジ #FF8C00 を入力すると、補色のブルー #0073FF に加え、類似色のウォームトーン #FF4400 と #FFB800 が表示され、まとまりのあるパレットを構築できます。
よくある質問
- 補色とスプリットコンプリメンタリーは何が違うのですか。
- 補色は色相環上で真向かいにある一色(180°)です。スプリットコンプリメンタリーはその両隣の二色(150° と 210°)を採ります。スプリットの方が刺激が弱く、画面全体で使ってもケンカしにくい傾向があります。
- とても暗い色や淡い色をベースにしても機能しますか。
- 色相系の配色(補色、類似色、トライアド、スプリットコンプリメンタリー、テトラード)は色相だけを回転させるので、彩度と明度はそのまま保たれます。淡いベースなら淡いパートナー、暗いベースなら暗いパートナーが返ります。モノクロマティックは意図的にベースカラーの明度を変えます。色相系のパートナーが眠く見える場合はベースの彩度を上げてから生成し直してください。
- 美術の色相環(RYB)ですか、それともスクリーンの色相環(RGB)ですか。
- スクリーン側です。ここでは赤(#FF0000)の補色はシアン(#00FFFF)で、油絵理論で言う緑にはなりません。デジタル設計にはこのモデルが正解ですが、実際の絵の具混色に当てはめると違和感が出ます。
- ベースによって補色がベースと似て見えるのはなぜですか。
- 純粋なグレーは色相が未定義なので、回転の中心がなく同じグレーが返ります。ベースに 5% でも彩度を加えると、補色はちゃんと離れた色に飛びます。
- パレット全体を一度に書き出せますか。
- はい、4 つの方法があります。「パレットをダウンロード」は各スウォッチと HEX 値をプレーンテキストファイルに保存します。「CSSをダウンロード」はパレットをそのまま使える CSS カスタムプロパティ(例: --color-complementary-1: #0099FF;)として書き出します。「Tailwind 設定」は tailwind.config.js に貼り付けられる色オブジェクトを生成します。「PNG 画像」はパレット全体をラベル付きの画像として保存でき、デザインレビューに便利です。