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

カラーハーモニーとは、色彩理論に基づいて視覚的に調和する色の組み合わせを作る方法です。色相環上の色の位置関係により、補色・類似色・トライアドなど複数のパターンがあります。デザインで統一感のある配色を作るのに役立ちます。

補色は色相環で正反対（180度）に位置する色の組み合わせで、コントラストが強く目立つ配色になります。類似色は色相環で隣接する色（±30度）の組み合わせで、自然で調和のとれた穏やかな配色になります。

WCAGコントラスト比は、テキスト色と背景色の明るさの差を数値化したアクセシビリティ基準です。AA基準では通常テキストで4.5:1以上、大文字で3:1以上が必要です。本ツールでは隣接する色同士のコントラスト比を自動表示します。

CSS変数形式（--color-1: #xxx; のような形式）とJSON形式の2種類でエクスポートできます。CSS変数形式はそのままスタイルシートに貼り付けて使え、JSON形式はプログラムやデザインツールとの連携に便利です。

「ランダム生成」ボタンをクリックすると、ランダムなベースカラーとランダムな配色タイプでパレットが自動生成されます。気に入った色はロック機能で固定し、残りだけを再生成することもできます。

いいえ。すべての処理はブラウザ上で完結しており、入力データがサーバーに送信されることはありません。安心してご利用いただけます。

いいえ、モノクロマティックは選んだ色を基準に、その色の明度や彩度を変えた複数の色合いを生成します。1色をベースに濃淡を調整したパレットになるため、統一感のあるデザインに最適です。

WCAGガイドラインでは、通常のテキスト色は4.5:1以上、大きめのテキストは3:1以上が推奨されています。このツールのコントラスト比チェック機能でパス・失敗を確認し、テキスト色と背景色の組み合わせを調整できます。

ブランドの補色（反対色）を強調したい場合は「補色」、落ち着いた雰囲気なら「類似色」、より豊かな配色なら「テトラード」を選ぶことをお勧めします。ブランドガイドラインの色数に合わせて選択してください。

現在は自動名前変更機能はありませんが、生成されたコードをエディタで手動編集して `--primary`、`--secondary` など分かりやすい名前に修正できます。デザインシステムに組み込む際は、命名規則に統一させるといいでしょう。

各パターンはJSONでエクスポート可能で、複数のファイルを保存して比較検討できます。テキストエディタやスプレッドシートに色コードをコピーして、サムネイル作成ツールで視覚的に比較するのが効果的です。

暖色系（赤・黄・オレンジ）は活動的・親しみやすい、寒色系（青・緑・紫）は落ち着き・信頼を連想させます。ターゲットユーザーの感情反応を考慮し、補色でアクセント、類似色で調和を図るとブランドメッセージが効果的に伝わります。