🎨 カラーパレット生成

カラーパレット生成は、1つのベース色から、それと調和する色の組み合わせ（配色）を自動で作るツールです。配色の理論は「色相環（しきそうかん）」という色を円環状に並べた図が基礎になっています。本ツールは入力したHEXカラーをHSL（色相・彩度・明度）に変換し、色相を回転させたり明度を変えたりして各配色を計算します。生成した色はHEXとRGBの両方で表示し、クリックですぐコピーできます。

「補色（コンプリメンタリ）」は色相環で正反対（180°反対）にある色の組み合わせです。互いを最も強く引き立て合い、コントラストのはっきりした目を引く配色になります。たとえば青(#3B5BDB前後)に対しては黄みのオレンジ系が補色になります。強すぎると感じる場合は、補色の両隣を使う「スプリットコンプリメンタリ」にすると、コントラストを保ちつつ少し柔らかくまとまります。

「類似色（アナロガス）」は色相環で隣り合う色（±30°程度）を集めた配色で、まとまりがあり自然で落ち着いた印象になります。「トライアド」は色相環を120°ずつ3等分した3色で、鮮やかさとバランスを両立できます。「テトラード」は90°ずつの4色で情報量が多くにぎやかな配色に向きます。「モノクロマティック」は同じ色相のまま明度だけを段階的に変えた濃淡で、統一感のあるトーン展開ができます。

具体例として、ベース色に #3B5BDB（青系）を入れると、補色にはオレンジ寄りの色が、類似色には青紫〜水色寄りの近い色が、トライアドには青・赤系・緑系のバランスの取れた3色が生成されます。モノクロマティックでは、同じ青の濃いネイビーから淡いパステルブルーまでが並びます。まず主役の色を決め、そこから本ツールでアクセント色や背景色の候補を探す、という使い方が便利です。

配色はあくまで出発点の目安です。実際のWebサイトやアプリでは、文字色と背景色のコントラスト比（読みやすさ・アクセシビリティ）が重要で、WCAGでは通常の文字で4.5:1以上のコントラストが推奨されています。本ツールが出す色をそのまま使うのではなく、文字が読みやすいか、ブランドの雰囲気に合うか、色覚特性のある方にも区別しやすいかを確認しながら、明度や彩度を微調整して仕上げてください。