カラーパレットジェネレーター

色相環とHSL: パレットができる仕組み

このツールは入力された色を、色相(Hue)・彩度(Saturation)・明度(Lightness)で表すHSLに変換し、色相の角度だけを決まったルールでずらして新しい色を作ります。色相環は0〜360度の円で、0°が赤、約60°が黄、約120°が緑、約180°がシアン、約240°が青、約300°がマゼンタのあたりです。彩度と明度は変えないので、できあがる色は明るさと鮮やかさが似た「ひとつの家族」に見えます。処理は、HEXからRGB、HSLへの変換、角度の移動、HSLからRGB、HEXへの変換の順で、各段階の丸めで値が1ほどずれることがあるため、基準色の欄は入力した値をそのまま表示します。

なお、HSLの「明度」は人が感じる明るさとは一致しません。同じ明度50%でも、黄色はとても明るく、青は暗く感じられます。配色を文字色や背景色に使うときは、目分量ではなく後述のコントラスト比で確かめてください。

配色パターンごとの角度ルールと使いどころ

補色(+180°): 色相環の正反対の色です。最も強いコントラストが得られ、ボタンや強調したい語句など一か所に視線を集めたいときに向きます。広い面積で同じ割合で使うと目が疲れるので、一方を7割以上にして、もう一方はアクセントにとどめます。
類似色(±30°): 隣り合う色です。落ち着きと統一感がありますが、差が小さいので強調が埋もれがちです。背景、イラスト、グラデーションに向きます。
トライアド(+120°、+240°): 色相環を3等分した配色で、にぎやかでバランスがよく、インフォグラフィックなどに合います。3色を同じ比率で使うと散漫になるので、主役・脇役・アクセントに役割を分けましょう。
スプリットコンプリメンタリー(+150°、+210°): 補色そのものではなく、その両隣の2色を使います。補色の対比を保ちつつ刺激が和らぐため、初心者にも扱いやすい方法です。
テトラード(90°間隔の4色): 色数が多く調整が難しい配色です。1色を主役にして、残りはごく小さく使うのがコツです。グラフのカテゴリ色にも使われます。
同系色: 同じ色相で明度を20・35・50・65・80%に段階づけた5色です。失敗しにくく、画面の背景・カード・枠線・文字の階層づけに向いています。

例1: 金色#c9a961を基準にしたパレット

基準色#c9a961は、HSLで色相約41.5°、彩度約49%、明度約58.4%です。色相の角度だけを動かすと次の色になります(この表はページ生成時に同じ式で計算しています)。

配色パターン	角度のルール	結果の色(HEX)
補色	基準の色相 +180°	`#c9a961#6181c9`
類似色	-30°、0°、+30°	`#c97561#c9a961#b5c961`
トライアド	0°、+120°、+240°	`#c9a961#61c9a9#a961c9`
スプリットコンプリメンタリー	0°、+150°、+210°	`#c9a961#61b5c9#7561c9`
テトラード	0°、+90°、+180°、+270°	`#c9a961#61c975#6181c9#c961b5`

この金色の補色は、色相約221.5°の青#6181c9です。金色を主役にしたブランドに、リンクや補助ボタンの色としてこの青を添えると、暖色と寒色のバランスが生まれます。

文字色のコントラスト比(WCAG)で読みやすさを確かめる

ウェブのアクセシビリティ指針WCAGでは、色の相対輝度Lを計算し、コントラスト比 = (明るい方のL + 0.05) ÷ (暗い方のL + 0.05)と定義します。値は1:1(差なし)から21:1(白と黒)までです。通常サイズの本文はレベルAAで4.5:1以上、大きな文字(おおよそ24px以上、または太字で18.66px以上)は3:1以上が最低ラインで、より厳しいAAAでは通常7:1、大きな文字4.5:1となります。このツールは各色の上に、白と黒のうちコントラストが高い方の文字色を自動で選び、比率を表示します。

例2: #c9a961の上の白文字と黒文字

#c9a961の背景に白文字を載せると2.25:1でAAの基準(4.5:1)に届かず、黒文字なら9.33:1でAAA(7:1)も満たします。金色のボタンには、白文字より暗い文字のほうが読みやすいということです。同じ色相の明度段階では次のようになります。

明度	HEX	白文字のコントラスト	黒文字のコントラスト	推奨の文字色
20%	`#4c3d1a`	10.55:1	1.99:1	白(AA適合)
35%	`#856a2d`	5.13:1	4.10:1	白(AA適合)
50%	`#be9841`	2.71:1	7.76:1	黒(AA適合)
65%	`#d2b77a`	1.95:1	10.79:1	黒(AA適合)
80%	`#e5d6b3`	1.44:1	14.60:1	黒(AA適合)

表のとおり、明度35%の濃い金色(#856a2d)は白文字で5.13:1となりAAを満たしますが、明度50%付近(#be9841)は白2.71、黒7.76で、実質的に黒文字専用です。中間の明度は、文字の背景として最も扱いにくい領域だと覚えておきましょう。任意の2色を精密に確かめたいときは色コントラストチェッカーを使ってください。

実務の比率: 60-30-10の目安

パレットを作ったあとに迷ったら、まず面積の比率を決めます。よく使われる経験則は、ベースカラー(背景や広い面)60%、サブカラー30%、アクセントカラー10%です。同系色の5色なら、いちばん明るい段階を背景、少し暗い段階をカードや区切り線、最も暗い段階を文字、基準色をアクセントに割り当てると、たいてい不自然になりません。「CSS変数としてコピー」ボタンは--color-1: #...;の形式でコピーするので、そのまま:rootの中に貼り付けて使えます。

よくある失敗と限界

生成された色をすべて使う: パレットは候補です。実際には2〜3色を選び、白・グレー・黒などの無彩色を混ぜるほうが安定します。
明度を無視する: このツールは基準色の彩度と明度を保つため、青や紫は同じ明度の黄色よりずっと暗く見えることがあります。文字の背景に使う前にコントラスト比を確認しましょう。
色相の差だけで情報を区別する: 赤と緑のように色相だけで区別すると、見分けにくい人がいます。アイコン、ラベル、明度差も併用してください。
画面と印刷の違い: HEXは画面(RGB)用の表記です。印刷(CMYK)では鮮やかな青や緑がくすむことがあり、モニターによる差もあります。印刷物は試し刷りで確認しましょう。
文化による色の意味: 同じ色でも地域や場面で連想されるものが異なります。
このジェネレーターは単純な角度のルールに基づくもので、ブランドのアイデンティティを決めてくれるわけではありません。画像から色を抽出したい、利用者テストが必要といった案件には別の作業が必要です。

結果の使い方

ウェブサイトなら、CSS変数としてコピーして:rootに定義し、ボタンやリンク、背景では変数だけを参照すると、色を一か所で管理できます。 RGBやHSLの値が必要なときは、ブロック内に表示された値を使うか、カラーコード変換で変換できます。グラデーションにしたい場合は、類似色2色をCSSグラデーションジェネレーターに入れてみましょう。色の違いを見分ける目を鍛えたいなら、カラーマッチングゲームが手軽な練習になります。

よくある質問

生成された色コードはどう使いますか?

色のブロックをクリックするとHEXコードがクリップボードにコピーされ、デザインツールやCSSにそのまま貼り付けられます。「CSS変数としてコピー」を押すと、現在のパレット全体が変数の形でコピーされます。

どの配色がいちばんよいですか?

正解はありません。強調が必要なデザインなら補色やスプリットコンプリメンタリー、安定感が欲しいなら類似色や同系色が向いています。使う場面とコントラスト比の確認結果で選ぶのが大切です。

基準色をHEXコードで直接入力できますか?

できます。HEX欄に#c9a961のような6桁(または#abcのような3桁)のコードを入れると、カラーピッカーと連動してパレットが更新されます。形式が正しくない場合はエラーメッセージが表示されます。

コントラスト比が4.5未満だと使えませんか?

通常サイズの本文ならAA基準を満たすのが望ましいです。装飾的な要素や大きな見出し(3:1が基準)、ロゴなどは例外として扱われることもあります。法的な義務の有無はサービスや地域によって異なるため、該当する指針を確認してください。

同系色の5段階に基準色は含まれますか?

同系色は明度を20・35・50・65・80%に固定して作るため、基準色の明度とぴったり同じ段階がない場合があります。基準色が必要なときは「基準」のブロックが先頭に別途表示されます。