コンテンツにスキップ
🛠️
Whiz Tools

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

カラーパレットジェネレーターは、選んだ基本色をもとに、HSL色空間の色相と明度の計算式を用いて、補色、類似色、三色配色、モノクロマティックといった配色パターンを瞬時に生成する無料ツールである。ウェブデザインやブランディングのプロジェクトに使える。配色はHEXとRGBの両方で表示される。

シンプルカラーパレットジェネレーター

調和のタイプを選択

生成されたパレット

パレットを生成するには、色と調和のタイプを選択してください

カラーハーモニーについて

カラーハーモニーは、目に心地よい色の組み合わせです。デザインに秩序とバランスを生み出します。

調和のタイプ

  • 補色: カラーホイール上で対角線上にある色で、高いコントラストと鮮やかな外観を作り出します。
  • 類似色: カラーホイール上で隣り合う色で、穏やかで快適なデザインを作り出します。
  • 三色配色: カラーホイール上で均等に配置された3つの色で、強い視覚的コントラストを保ちながら調和を維持します。
  • モノクロマティック: 単一の色の異なる陰影、トーン、色合いで、微妙な変化を持つ統一感のあるルックを作り出します。
ローディング計算機...
📚

ドキュメンテーション

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

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

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

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

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

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

補色の計算方法

式：

1new_hue = (original_hue + 180) mod 360
2

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

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

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

類似色の計算方法

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

1hue ± 30°  and  hue ± 60°
2

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

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

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

1hue + 120°  and  hue + 240°
2

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

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

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

1lightness ± 15  and  lightness ± 30
2

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

ツールの使い方

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

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

各色のスウォッチには、小さなバッジが二つ表示されます。一つは白に対するコントラスト、もう一つは黒に対するコントラストを示します。このツールは、WCAG（ウェブコンテンツ アクセシビリティ ガイドライン）の式でコントラスト比を計算します。

1contrast ratio = (L1 + 0.05) / (L2 + 0.05)
2

L1は明るいほうの色の相対輝度、L2は暗いほうの色の相対輝度です。輝度は、その色の赤、緑、青の値から求められます。比が4.5以上のとき、バッジには「AA」と表示されます。これは、通常サイズの文字に対するWCAGレベルAAの最小値4.5:1です。それ以外の場合は「!」と表示されます。白い背景に黒い文字の比は21で、これが取りうる最大値です。

よくある質問

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

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

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

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

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

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

色の形式

このツールは色を十六進数コードで表示します。これは、#記号に続く六桁のコードです（例：赤は#FF0000）。十六進数コードは、赤、緑、青のそれぞれ0から255までの値に直接対応します。HSLは、赤、緑、青の量の代わりに、色相、彩度、明度を使って同じ色を表す別の方法です。

参考文献

  1. World Wide Web Consortium（W3C）。Web Content Accessibility Guidelines (WCAG) 2.2。WCAG 2.2 — コントラスト比 (L1 + 0.05) / (L2 + 0.05)、1から21までの比、通常テキストに対する最小値4.5:1（達成基準1.4.3、レベルAA）。
  2. World Wide Web Consortium（W3C）。CSS Color Module Level 4。CSSカラーモジュール レベル4 — HSLでは、色相0°が赤、120°が緑、240°が青です。