color_lens カラーパレット生成ツール star

仕組み

色彩理論は、カラーホイール(色相環)上の色相どうしの、固定された角度関係として調和のルールを定義します。このツールはRGBではなくHSLモデル(色相・彩度・明度)でこれを計算します。色相は円周上の0〜360°という自然な値だからです — 関連する色を見つけるために角度を足すのは直接的な算術になります。RGBでは色は単なる3つの強度チャンネルにすぎず、「角度」という概念が本来存在しません。同じ調和計算をRGBで行おうとしても、結局は内部的にHSLへ変換する必要が生じます。このツールは、その計算が自然に成り立つ空間でそのまま処理を行っているだけです。

ベースカラーの色相から、次を導き出します。補色(真反対にある単一の色相、ベース+180°、最大のコントラストを生む)、トライアド(3色配色)(色相環を120°間隔で均等に3分割した色相、鮮やかでありながらバランスが取れている)、類似色(±30°の隣接する色相、近くにあるため落ち着いてまとまった印象になる)、スプリット補色(補色を挟む2つの色相、±150°、純粋な補色の組み合わせよりも緊張感の少ないコントラストを与える)、そして色相と彩度を固定したまま明度だけを上下させる単色(モノクロマティック)スケールです。たとえば200°(青)をベースの色相にすると、20°(オレンジ)の補色と、320°・80°のトライアド色相が得られます。

知っておくべきこと

• 実用的な60-30-10の目安: デザイン全体の約60%にベースカラーを、30%に類似色を、残り10%のアクセント(ボタン、リンク、強調表示など)に補色を使います。
• 調和はアクセシビリティではありません。 色相環上で数学的に関連づけられた2色であっても、明度のコントラストについては何も保証されません。文字色と背景色の組み合わせはWCAGの基準で別途確認してください。
• どのスウォッチをクリックしても、そのHEXコードがクリップボードにそのままコピーされます。
• 彩度と明度は依然として極めて重要です。 まったく同じ色相の組み合わせを持つ2つのパレットでも、印象はまったく異なることがあります。彩度が低く明度が高いバージョンは柔らかくパステル調に見え、同じ色相でも彩度が最大・明度が低いバージョンは大胆でドラマチックに見えます。
• 文化的な連想は色相環に従いません。 ある色相の数学的に「正しい」調和相手は、その色が特定の地域や業界で何を意味するかとは無関係です。赤はある文脈では警告を示し、別の文脈では祝祭を示すこともあり、それは調和のルールとは関係ありません。

具体的な例を見てみましょう。#3B82F6(中間的な青、色相は約217°)をベースカラーに選んだとします。補色は色相37°付近、暖かみのあるオレンジになります — 青系が主体のインターフェースにおいて、プライマリボタンの色として自然な組み合わせです。トライアドの色相は97°付近(黄緑)と337°付近(マゼンタピンク)に加わり、カテゴリータグやグラフのデータ系列のように、はっきり区別できてかつバランスの取れた3色のアクセントカラーが必要な場面で役立ちます。