Color Palette Generator

基本色を選択して、実証済みの色彩理論ルールを使用したハーモニアスなパレットを生成します。シェードをプレビューしたり、16進数値またはCSS変数をコピーしたりできます。すべてブラウザ内で実行されます。

動作方法: 基本色を選択し、ハーモニータイプを選んで、すぐにパレットを取得します。任意のカラースウォッチをクリックして16進数値をコピーします。「Copy CSS」を使用してすべての色をCSS カスタムプロパティとしてエクスポートします。データはブラウザから送信されません。

#3bdff6rgb(59, 223, 246)hsl(187, 91%, 60%)
#3b82f6rgb(59, 130, 246)hsl(217, 91%, 60%)
#523bf6rgb(82, 59, 246)hsl(247, 91%, 60%)

色彩調和とは

色彩調和とは、視覚的に心地よい方法で色を配置することを指します。色彩理論に根ざしており、色相環上の色同士の関係に依存します。デザイナーは調和したパレットを使用して、見る人が無意識のうちに統一感と バランスを感じるインターフェースを作成します。最も一般的なハーモニールール（補色、類似色、三色調和、四色調和）は恣意的ではなく、色相環上の幾何学的関係にマップされ、人間の視覚システムがコントラストと類似性をどのように認識するかを利用しています。

HSL色モデル

HSLはHue（色相）、Saturation（彩度）、Lightness（明度）の略です。赤、緑、青の光の混合として色を説明するRGBとは異なり、HSLは人間が色についてどのように考えるかに合致した用語で色を説明します。色相は色相環上の角度（0～360°）、彩度は色の鮮やかさを制御し（0% = グレー、100% = 純粋色）、明度は明るさを制御します（0% = 黒、100% = 白）。HSLは色彩調和を計算するのが簡単です。補色は単に180°離れており、三色調和は120°離れており、類似色は互いに±30°以内に位置しています。

ハーモニータイプの説明

補色パレットは色相環上で直接対向する色をペアリングし、最高のコントラストを作成するため、CTA やハイライトに最適です。類似色パレットは3つの隣接する色相を使用し、背景とコンテンツ領域に適した落ち着きと自然な感覚を生成します。三色調和パレットは3つの色相を120°間隔で配置し、視覚的バランスを保ちながら生き生きした多様性を提供します。分割補色は直接的な補色を2つの色相に置き換え、コントラストを柔らかくします。四色調和（矩形）パレットは4つの色相を2つの補色ペアで使用し、最大の多様性を提供しますが、慎密なバランスが必要です。単色パレットは単一の色相の明度のみを変動させ、調和を保証しながら読み取り可能なインターフェースに十分なコントラストを提供します。

UI デザインでのカラーパレット使用のコツ

  • 60-30-10ルールを使用します。主要色60%、二次色30%、アクセント色10%
  • 単色パレットは、ダークモード開発者ツールの最も安全な選択です
  • コントラスト比を確認します。WCAG AA では通常テキストで少なくとも4.5:1が必要です
  • CSS 変数出力をコピーして、:rootブロックに直接貼り付けます
  • 四色調和パレットは視覚的な混乱を避けるために明確な主要色が必要です
  • コミットする前に、ライトバックグラウンドとダークバックグラウンドの両方でパレットをテストします