カラーパレットジェネレーター - 調和のとれたカラースキームを作成

カラーパレット生成ツールとは何か？

カラーパレット生成ツールは、基準色と呼ばれる1色をもとに、調和する色の組み合わせを作るツールです。このカラーパレット生成ツールは、基準色と調和の種類を受け取り、色彩理論の規則を使ってパレットの残りの色を計算します。対応する調和の種類は、補色、類似色、トライアド、モノクロマティックの4種類です。

ツールがパレットを作成する方法

ツールは基準色を十六進数コード（#3B82F6など）からHSL色モデルに変換します。HSLでは、色を3つの数値で表します。

• 色相：360度の色相環上での色の位置（0°は赤、120°は緑、240°は青）。
• 彩度：色の鮮やかさ。0%（灰色）から100%（純色）まで。
• 明度：色が黒または白にどの程度近いか。0%（黒）から100%（白）まで。

各調和の種類では、色相、明度、またはその両方を変化させた後、結果を十六進数コードに戻します。

補色の計算方法

式：

$h' = (h + 180) \bmod 360$

ここで、hは基準色の色相（度）、h′は新しい色相です。modの処理では、1回転を超えた結果を色相環上に戻します。

彩度と明度は変わりません。

計算例：純粋な青#0000FFは、色相240°、彩度100%、明度50%です。180°を加えると、色相は60°になります。色相60°を同じ彩度と明度のまま十六進数に戻すと、#FFFF00という黄色になります。したがって、このツールでは青と黄色を組み合わせ、オレンジとは組み合わせません。

これは、図画や美術の授業で、青の反対色はオレンジだと教わることが多いからです。これは、赤・黄・青（RYB）の顔料による色相環が別のものだからです。このツールは画面で使われるRGBベースのHSL色相環を使用するため、補色の組み合わせは絵の具を混ぜる色相環とは異なります。

類似色の計算方法

類似色は、色相環上で基準色の近くに位置します。ツールは、基準色の色相から30°離れた色相を2つ、60°離れた色相を2つ生成し、すべて同じ彩度と明度にします。

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

ここで、hは基準色の色相です。

計算例：青#0000FF（色相240°）から、色相270°（#8000FF）、色相210°（#0080FF）、色相300°（#FF00FF）、色相180°（#00FFFF）が生成されます。基準色と合わせて、パレットには5色が含まれます。

トライアド配色の計算方法

トライアド配色では、色相環上で120°ずつ離れた三色が、基準色を含む等間隔の組み合わせを形成します。

$h + 120^{\circ}, \qquad h + 240^{\circ}$

計算例：赤#FF0000（色相0°）から、色相120°（#00FF00、緑）と色相240°（#0000FF、青）が生成されます。この3色の組み合わせは赤、緑、青で、デジタル画面の三原色に使われる色相と同じです。

モノクロマティック配色の計算方法

モノクロマティック配色では、色相と彩度を保ち、明度だけを変化させます。ツールは明度を各方向に15および30パーセントポイント変化させ、5%から95%の範囲内に制限します。

$l \pm 15, \qquad l \pm 30$

ここで、lは基準色の明度をパーセントポイントで表したものです。

計算例：青#0000FF（明度50%）から、明度65%（#4D4DFF）、明度35%（#0000B3）、明度80%（#9999FF）、明度20%（#000066）が生成されます。

5%と95%の上限・下限があるため、すでに非常に明るい、または非常に暗い基準色では、同じ制限値に2回達することがあります。黒#000000から、明度15%（#262626）、5%（#0D0D0D）、30%（#4D4D4D）、そして再び5%（#0D0D0D）が生成されるため、1色が重複します。

ツールの使い方

1. カラーピッカーで基準色を選ぶか、#3B82F6などの十六進数コードを入力します。
2. 調和の種類として、補色、類似色、トライアド、モノクロマティックのいずれかを選びます。
3. 生成されたパレットを確認します。各カラースウォッチのボタンには、その十六進数コードが表示されます。
4. そのボタンをクリックして十六進数コードをコピーするか、「すべての色をコピー」を使ってパレット全体を一度にコピーします。

アクセシビリティのためのコントラスト確認

各カラースウォッチには、白とのコントラスト用と黒とのコントラスト用の小さなバッジが2つ表示されます。ツールは、WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）の式を使ってコントラスト比を計算します。

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

ここで、Cはコントラスト比です。

L1は明るい色の相対輝度、L2は暗い色の相対輝度です。輝度は、色の赤、緑、青の値から求められます。比率が4.5以上の場合、バッジには「AA」と表示されます。これは通常サイズのテキストに対するWCAGの最小値です。比率が4.5未満の場合は「!」と表示されます。バッジにカーソルを合わせると、正確な比率が表示されます。白い背景上の黒い文字の比率は21で、可能な最大値です。

ツールは、各スウォッチのコピー用ボタンの色を選ぶ際にも同じコントラスト規則を使います。スウォッチの色と黒、白をそれぞれ比較し、読みやすい方を配置します。切り替えは相対輝度が約0.179のときに起こります。この値は、両方の比率が等しくなる点です。

よくある質問

カラーパレット生成ツールとは何か 1つの基準色と選択した調和規則をもとに、調和する色の組み合わせを作るツールです。

補色で、このツールが青とオレンジではなく青と黄色を組み合わせるのはなぜか このツールは、画面で赤、緑、青の光を混ぜる方法に基づくHSL色相環上で、色相を180°回転させます。美術の授業で教わる赤・黄・青の絵の具による色相環では、光ではなく顔料を混ぜるため、補色の組み合わせが異なります。

各調和の種類では何色生成されるか 補色では合計2色（基準色を含む）が生成されます。トライアドでは3色、類似色では5色、モノクロマティックでは5色です。

ツールが内部で使用する色モデルは何か HSL（色相、彩度、明度）です。入力された十六進数コードをHSLに変換して計算を行い、その結果を再び十六進数コードに変換します。

ツールは色がアクセシブルかどうかを確認するか はい。各スウォッチには、白および黒とのコントラストが、通常のテキストに対するWCAG AA基準を満たすのに十分かどうかが表示されます。この基準では、少なくとも4.5の比率が必要です。

プロジェクトで複数の調和の種類を使えるか はい。多くのデザインでは調和の種類を組み合わせます。たとえば、メインカラーには類似色の組み合わせを使い、ボタンや強調部分には1色の補色を使います。

色の形式

ツールは、生成したすべての色を、#記号が先頭に付いた六桁の十六進数コードで記述します（たとえば、赤は#ff0000）。十六進数コードは、それぞれ0から255までの赤、緑、青の値に直接対応します。基準色は入力されたとおりに表示されるため、#F00のような三桁の短縮形は短縮形のままになります。三桁のコードは六桁の形式と同じ色を表し、各桁を二回繰り返します。そのため、#F00は#FF0000と同じです。HSLは、赤、緑、青の量ではなく、色相、彩度、明度を使って同じ色を表す別の方法です。