カラーホイール

カラーホイールは、色相を円形に配置して関係を空間的に表す図です。隣り合う色は穏やかに、対向する色は緊張を生みます。美術では赤・黄・青を混ぜる三原色ホイールを習いますが、画面は光を混ぜるRGBホイールを使います。デザイナーはベースカラーの選択、ハーモニーの構築、レイアウト前のコントラスト確認に使います。

まずベースカラーを1つ決めます。HEXコードの入力、システムピッカー、画面のサンプリングのいずれかで選べます。アナロガス・コンプリメンタリー・トライアディックなどのハーモニーを選び、外側リングで明度を整えて背景・テキスト・アクセントのトーンを揃えます。各スウォッチをHEX・RGB・HSL・OKLCHでコピーし、CSSやTailwind、Figmaに貼ります。

主な目的は、色の組み合わせから当てずっぽうをなくすことです。目分量で組む代わりに形状を読みます。距離はコントラスト、近さは穏やかさを意味します。これですべてのインターフェースに明確な階層が生まれます。支配色1つ、脇役数色、確保したアクセント1つで、ボタンもリンクも見出しも目が期待する位置に収まります。

デザイン文献では通常8つが挙げられます。モノクロマティック(1色相の多明度)、アナロガス(隣接)、コンプリメンタリー(対向)、スプリットコンプリメンタリー(基色と対向色の両隣)、トライアディック(三角形)、テトラディック・長方形(補色2組)、スクエア(四隅)、無彩色・ニュートラル(黒白灰)です。このツールは6つを直接カバーし、2〜8色の手編集リスト用カスタムモードも備えます。

ディスク上のドットをドラッグします。角度が色相、中心からの距離が彩度を決めます。外側リングで色相・彩度を保ったまま明度を決めます。正確なHEX値の入力、システムカラーボックス、スクリーンスポイトでのモニター上任意ピクセルの選択もでき、どの方法も同じ共有ベースカラーにたどり着きます。

カラーピッカーは視覚的な選択を正確で再利用可能な値に変えます。任意の色をHEX・RGB・HSL・OKLCHコードとして読み取るので、デザイナーと開発者が同じ言語を話せます。クリックしたものはCSSやTailwindトークン、Figmaスタイルに届くビットと同一で、目分量の近似は不要です。

主な種類はホイール・ディスク型(一目で色相と彩度)、スライダー型(RGB・HSLチャンネル)、HEX入力欄(直接値)、スポイト・スクリーン型(モニターを採取)、画像型(写真上のルーペ)、パレットライブラリ(ここの400超ギャラリーのような厳選セット)です。このサイトは6種すべてを1つの流れに統合しています。

カラーコードは1つの色を正確に表すテキスト値です。HEXは6桁の16進数(#EDEA37)、RGBは赤緑青の3値、HSLは色相・彩度・明度、OKLCHは等数値ステップが等しく違って見える新しい知覚的フォーマットです。4つは同じスウォッチを表し、形式が読み方と編集の仕方を変えるだけです。

ホイール、スライダー、HEX欄、スクリーンスポイトで色を選び、用途の形式でコピーします。Web用HEX、アプリコード用RGB・RGBA、手早い調整用HSL、知覚的均一性用OKLCHです。値をスタイルシートやTailwind設定、デザインツールに貼り、リンクを保存すれば正確な色に後からワンクリックで戻れます。

カラーパレットは製品の全画面を同じ視覚言語に保ちます。背景・テキスト・アクセント・状態に役割を与え、寄せ集めではなく一貫した界面にします。良いパレットはコントラストと階層を最初から組み込むので、可読性の手戻りが減り、強く認知されるブランドになります。

主な種類はホイール形状のモノクロ・アナロガス・コンプリメンタリー、勢いで決まるパステルとネオン、肌のアンダートーン別のシーズナル(ソフトオータムからニュートラルまで)、企業色に固定したブランド物、写真採取の抽出物です。ここのギャラリーはすべてを収録し、60超のカテゴリで400超のセットを揃えています。

気分に合うベースカラー1つから始めます。暖かく穏やか、冷たく開放的、ダークで劇的のいずれかです。ハーモニーで広げ、本文コントラスト、ボタンアクセント、1型・2型・3型色覚のシミュレーションでユーザーの目線で検証します。3つを突破したらリンクを共有して公開です。