HEXカラーから補色・類似色などの配色を生成する方法

HEX形式のRGBカラーと調和タイプを指定すると、ベースカラーと配色候補を生成できます。入力を省略した場合は、カラーに#3498db、調和タイプに補色が使われます。

HEXカラーから配色候補を作る

このツールは、HEX形式のRGBカラーを基準に、補色、類似色、トライアドなどの配色候補を生成します。ベースカラーから配色を組み立てたいときに、色の関係をまとめて確認できます。カラーと調和タイプは任意入力なので、まずは色を指定し、目的に合うタイプを選ぶ使い方が分かりやすいでしょう。

配色を生成する手順

1. カラー欄にHEX形式のRGBカラーを入力します。先頭の # は省略でき、省略時は補われます。3桁のHEX値は6桁に展開されます。
2. 調和タイプを選択します。選べるのは、補色、類似色、トライアド、スプリットコンプリメンタリー、テトラディックです。
3. 入力内容を確認して生成します。カラーを省略すると #3498db、調和タイプを省略すると補色が使われます。
4. 結果に表示されたベースカラーと生成色を見比べます。必要に応じて、同じHEXカラーで別の調和タイプも試します。

結果の読み方

結果には、正規化されたベースカラーと、選択した調和タイプに対応する生成色が含まれます。補色は入力色の色相を180度移動し、彩度と明度を保ちます。類似色は色相を-30度と+30度移動し、入力色の明度の90％を使います。トライアドは120度と240度移動した色を用い、ベースカラーを含む4つの調和エントリーになります。スプリットコンプリメンタリーは150度と210度、テトラディックは60度、180度、240度の色相移動です。生成された色はRGBチャンネルを丸めて0から255の範囲に収め、# 付きの小文字6桁HEXで表示されます。

使用例

青系のHEXカラーに対する反対色の候補を確認したい場合に、#3498dbの補色を生成します。

カラーに#3498dbを入力し、調和タイプで補色を選択して生成します。

正規化されたベースカラーと、補色として生成されたカラーが結果に含まれます。生成色は#付きの小文字6桁HEXで表示されます。

制限事項

• 入力できるのはHEX形式のRGBカラーで、対応する調和タイプは5種類です。任意のカラー表記や一覧にない調和タイプを前提にしないでください。

よくある間違い

• HEX形式ではない値や、桁数を取り違えた値を入力すると、意図したカラーとして解釈できない場合があります。# の有無は問いませんが、RGBのHEX値として入力し、3桁または6桁の形式を確認してください。

よくある質問

カラーを入力しなくても使えますか？

カラーを省略すると、既定の#3498dbが使われます。独自の色を使う場合は、HEX形式のRGBカラーを入力してください。

どの調和タイプに対応していますか？

調和タイプを省略すると補色になります。選択する場合は、補色、類似色、トライアド、スプリットコンプリメンタリー、テトラディックから選べます。

HEXカラーはどの形式で入力しますか？

先頭の#は省略できます。3桁のHEX値は6桁に展開され、生成色は#付きの小文字6桁HEXとして表示されます。