カラーハーモニー生成 — 補色・トライアドなどの配色
ベースカラーを選ぶだけで、補色・類似色・トライアド・テトラード・分裂補色・単色の配色をHEX付きで即生成。クリックでコピーできます。
🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。
💡 スウォッチをクリックするとHEXをコピーできます。
このツールについて
このカラーハーモニー生成ツールは、1つのベースカラーから、色相環上の関係性に基づく配色を作り出します。対応するのは補色・類似色・トライアド・テトラード・分裂補色・単色の6種類。色を選ぶか入力するだけですべての配色が一度に表示され、各色にはクリックでコピーできるHEXコードが付きます。ブランドカラーやアクセントカラー1色から、バランスの取れたすぐ使える配色を素早く作れて、すべてブラウザ内で動作します。
よくある質問
補色・類似色・トライアドの違いは何ですか?
補色は色相環で正反対に位置し、強いコントラストを生みます。類似色は隣り合う色で、落ち着いたまとまりのある印象になります。トライアドは均等に離れた3色で、鮮やかさとバランスを両立します。分裂補色は補色よりも柔らかいコントラスト、テトラードは深みのある4色構成、単色は同一色相の濃淡バリエーションになります。
プロジェクトにはどの配色を選べばよいですか?
目を引く大胆なアクセントには補色や分裂補色が向いています。落ち着いた統一感を出したいなら類似色や単色がおすすめです。トライアドやテトラードは、複数のはっきりした色が必要な遊び心のあるデザインに合います。いくつか生成して、実際のコンテンツに当てて試すとよいでしょう。
ハーモニーの色はどのように計算されるのですか?
ベースカラーを色相環上の色相に変換し、その色相を決まった角度だけ回転させて算出します。たとえば補色なら180度、トライアドなら120度ずつ3つ、といった具合で、彩度と明度は一定に保ちます。計算はブラウザ内で行われるため配色は瞬時に表示され、入力した内容がサーバーへ送信されることはありません。