オンラインでウェブ配色スキームを生成、複数の配色ルールとカラーコード対応

主色からWeb用の5色を組み立てる

Webサイト配色生成ツールは、基準となる色を1色選び、画面設計のたたき台となる5つの役割色を作成します。出力はメインカラー、サブカラー、アクセントカラー、背景色、テキストカラーです。各色は色見本とともに表示され、HEX、RGB、HSLの値を確認できます。色見本をクリックするとHEXをコピーでき、CSS変数またはプレーンテキスト形式でパレット全体をコピーすることもできます。

配色関係は、補色・類似色・トライアド・テトラッド・分割補色・モノクロマティックの6種類から選びます。これらは色相環上で基準色と候補色の位置関係を決める考え方です。たとえば補色は色相を反対側へ移し、類似色は近い色相を並べます。選択後はサンプル画面でも色の配置を見比べられます。

色相・彩度・明度を使った候補色

このツールは入力した色をHSL（色相・彩度・明度）として扱い、選んだ関係に応じて色相を移動させます。色相は色みの方向を角度で示し、彩度は鮮やかさ、明度は明るさの度合いを表します。補色では色相を180度移動し、類似色では基準色の前後30度を候補にします。トライアドは120度ずつ、テトラッドは90度ずつの配置です。分割補色は基準色の反対側から150度と210度の候補を取り、モノクロマティックは色相を保ちながら明度や彩度を変えます。

5色すべてが色相の回転だけで決まるわけではありません。背景やテキストなどの役割色は、パターンに応じて彩度・明度も調整されます。そのため、ここで得られるのは一定のルールに沿った候補色です。ブランドのガイドラインやページの目的に合わせて、採用する色や使う面積は実画面で調整してください。HEX・RGB・HSLの表記仕様については、W3C CSS Color Moduleを参照できます。

基準色を選び、結果をコピーする

1. メインカラー欄に3桁または6桁の16進カラーコードを入力します。先頭の「#」は付けても省いても構いません。カラーピッカーで色を選ぶ方法もあります。

2. 配色パターンから6種類のうち1つを選択します。初期状態では青系の色と補色パターンが設定されており、ランダムボタンで別の基準色を試すこともできます。

3. 5つの役割色とサンプル画面を確認します。色ごとのHEX・RGB・HSL表示に加え、画面上の配置を見ながら用途に合う候補か検討してください。

4. 色見本をクリックして個別のHEX値をコピーするか、表示されたCSS変数またはプレーンテキストのコピー操作で一式を取得します。別の案を試したい場合は、基準色や配色パターンを変更します。

候補を比べるときの見方

まずメインカラーを固定したままパターンを切り替えると、色相関係の違いを比較しやすくなります。次に背景や文字などの役割を確認し、見出し、ボタン、カードといった想定箇所に置いたときの印象を見ます。コードをサイトへ貼る前に、プロジェクト側のCSS変数名や既存の色設定に合わせて調整してください。

入力欄に有効なカラーコードを入力すると結果へ反映されます。認識できない文字列は新しい基準色として採用されず、入力エラーが表示されます。初期状態へ戻すと、既定の基準色と補色パターンに戻ります。

入力・出力についてよくある質問

プレビューと配色候補の適用範囲

表示される5色は、色相の関係と一部の明度・彩度調整から作られる案です。ブランドの既存色、画像、文字量、利用者の環境などを踏まえた完成デザインではありません。サンプル画面は色の配置例であり、あなたのページでの見え方を保証するものでもありません。

色の調和と文字の読みやすさは別の確認事項です。ツールは文字と背景のコントラスト比を計測せず、WCAGへの適合を判定しません。テキストや操作部品に使う色を決める場合は、対象の文字サイズや背景を含めた実際の組み合わせを確認してください。コントラストに関する基準の説明は、W3C WAIの解説で確認できます。