カラーホイールとは？

ベースカラーを選ぶと、補色・類似色・トライアド・スプリットコンプリメンタリー・テトラード・モノクロマティックの配色がインタラクティブなホイール上に表示されます。各スウォッチは白と黒に対する WCAG コントラスト比を示し、パレットはプレーンテキストまたは共有用 PNG として書き出せます。

ホイールはHSLで動作するため、ベースの色相をドラッグするか任意のHEX値を入力すると、対応するスウォッチがリアルタイムで配置されます。彩度と明度のスライダーで配色全体を一気に調整可能。生成された各色はワンクリックでHEX、RGB、HSL、CMYK、OKLCH形式でコピーでき、ホイール上の各調和ポイントにはラベル付きのドットが表示され、色同士の関係がひと目で分かります。

使い方

1. カラーホイール上をクリックまたはドラッグしてベースの色相を選ぶか、入力欄に特定のHEX値を入力してください。
2. ハーモニータイプ（補色、類似色、トライアド、スプリットコンプリメンタリー、テトラード）を選択すると、一致する色がホイール上にハイライト表示されます。
3. 生成された色をHEX、RGB、HSL、CMYK、OKLCH形式でコピーするには、スウォッチをクリックしてください。パレット全体をエクスポートしてデザインツールで活用できます。

使用するタイミング

• プライマリカラーが決まった後、ブランドキット用のアクセントカラーを3〜4色選ぶ場面。
• 背景と視覚的に対立するボタン色を選び、コントラストを最大化したいとき。
• 関連する色合いがぶつかり合わずに落ち着いて見えるUI用パレットを作るとき。

結果

Webデザイナーがブランドカラーとして#E87040を選び、トライアドハーモニーに切り替えると、ランディングページ用にバランスの取れた3つのアクセントカラーがワンクリックで生成されます。

よくある質問

類似色配色と三角配色の違いは?

類似色はホイール上で隣り合う色(およそ30度以内)を選ぶため、穏やかで統一感のある印象になります。三角配色は120度間隔で3色を配置し、ハイコントラストかつバランスの取れた、デザインに活気を与える配色です。

補色とスプリットコンプリメンタリーの使い分けは?

補色は正反対の2色で最大のインパクトを出しますが、両方を高彩度にすると目に痛い組み合わせになりがちです。スプリットは正反対の色の両隣を使い、緊張感は保ちつつぶつかり方が穏やかで、バランスを取りやすくなります。

明度スライダーを動かすと調和色も変わるのはなぜ?

ホイールは色相の相対オフセットを保ったまま、彩度と明度を全ての結果に適用します。だから明度40%の類似色グリーンはすべて深い森のような色味になり、暗い緑とネオングリーンが混ざることがありません。

パレットをCSS変数やデザインツールの形式で取り出せますか?

任意のスウォッチをクリックすると、HEX、RGB、HSL、CMYK、OKLCHのいずれかでクリップボードにコピーされます。そのままCSSファイルに --brand-primary: #E87040 と貼り付けたり、FigmaのHEX入力欄、Tailwindのカスタムカラー設定に貼り付けたりできます。

テトラディックは矩形配色と同じですか?

同じです。テトラディック(矩形配色とも呼ばれる)はホイール上で長方形を形成する4色を選ぶ配色、つまり補色ペア2組です。豊かなパレットになりますが、1色を支配色にしないとデザインがごちゃつきます。

関連ツール