カラーパレット生成器

カラーパレット生成器について

このカラーパレット生成器はすべてブラウザ内で完結します。ベースカラーと配色方式を選び、生成をクリックするだけで瞬時に調和のとれたパレットを作成できます。スワッチをクリックするとHEX値をコピーします。すべての計算はローカルで行われ、アップロードされません。

色彩理論の基礎

色彩理論とは、色の混合と色同士の視覚的関係に関する実践的な指針です。ほとんどの配色方式はHSLカラーホイールに基づき、色相は0°〜360°の角度で表されます。ベースカラーから固定角度の距離で色相を選ぶことで、ランダムではなく意図的で調和のとれた組み合わせが得られます。

配色調和の方式

• 補色 —— ホイール上で正反対の2色相（180°間隔）。高コントラストで、アクセントやCTAボタンに最適。
• 類似色 —— ホイール上で隣り合う3色相（±30°）。穏やかで自然、風景や自然パレットに多用。
• トリアード —— 120°間隔で均等配置された3色相。鮮やかでバランス良好。1色を主役に他をアクセントにすると効果的。
• テトラード —— 90°間隔の4色相（2組の補色）。豊かで汎用。寒暖色のバランスに注意。
• モノクローム —— 単一色相で明度を変化。繊細でエレガント、クリーンなミニマルデザインに最適。

デザインでのパレット活用

• 60-30-10ルールに従う —— 1色をデザインの60%（主色）、もう1色を30%（副色）、3色目を10%（アクセント）。
• アクセシビリティのコントラスト確認 —— 背景上のテキストはWCAG AA比（通常テキストで最低4.5:1）を満たすこと。
• 実コンテンツでテスト —— スワッチでは良く見えても、タイポグラフィ・画像・UI要素に適用すると印象が変わることがあります。
• 彩度と明度を変化させる —— 単一色相内でも幅を持たせるとフラットになりません。

よくある質問

パレットはどのように生成されますか？ ベースカラーをHSLに変換し、選択した方式に応じて色相を回転させます。モノクローム以外は彩度と明度を維持します。

すべての色を一度にコピーできますか？ はい。すべてHEXをコピーをクリックすると、すべてのHEX値（1行1色）がクリップボードに入ります。

ランダムなパレットはどう生成しますか？ ランダムをクリックすると新しいベースカラーをランダムに選び、現在の方式で再生成します。

どの色空間が表示されますか？ 各スワッチにHEX、RGB、HSLを表示し、任意のデザインツールに貼り付けられます。