カラーパレット生成器

この配色ジェネレーターは HSL 色空間で計算します。H（色相）は色相環上の 0〜360° の角度、S（彩度）と L（明度）はパーセントです。種となる色を選ぶと、色彩学の定番ルールに従って色相環を回転させ、一度に 5 色を生成します。色相だけ、または明度と彩度だけを変えるため、色同士に明確な数学的関係があり、行き当たりばったりではない自然なまとまりが生まれます。

5 つのモードには向いている場面があります。「モノクロマティック」は色相を固定して明度と彩度だけを変える最も安全な方法で、ブランドや情報量の多い UI に向いています。「補色」は 180° 反対側の色で対比が最も強く、ボタンや強調表示を目立たせます。「類似色」は ±15°・±30° の隣接色で、イラストや風景写真のように柔らかく自然です。「トライアド」は色相環を 3 等分（120°、240°）した華やかな配色ですが、比率の管理が必要です。「ランダム」は適度な彩度・明度の範囲で抽出し、アイデア探しに使えます。

実際に使うときは 60-30-10 の法則が参考になります。60% をメインカラーとして背景や広い面に、30% をサブカラーとしてセクションやカードに、10% をアクセントとしてボタンやリンクに使います。補色やトライアドを均等に使うと散らかって見えるので、主役を 1 色決めて他は彩度を下げましょう。また文字と背景のコントラストは WCAG AA の 4.5:1 以上が目安で、当サイトのカラーコントラストチェッカーで確認できます。

カラーカードをクリックすると HEX コードをコピーでき、CSS 変数、SCSS 変数、Tailwind 設定、JSON として一括書き出しもできます。下の CSS グラデーション生成機能で配色を背景グラデーションにすることも可能です。計算はすべてブラウザ内で行われます。