カラーパレット生成

補色は「色相＋180°」で求まる

補色は色相環（0〜360°）で反対側にある色です。HSL/HSV の色相 H に対して(H + 180) mod 360 を計算すれば求められます。たとえば青系のベースなら黄〜オレンジ系が補色になります。

チカチカを抑える「補色分割（スプリットコンプリメンタリー）」

補色そのままではなく、補色の両隣（±30°）の2色を使うと、コントラストは保ちつつ刺激をやわらげられます。 本ツールの補色配色は2色目以降を30°ずつずらして生成するため、色数を3〜4色に増やすと自然にこの「補色分割」に近い並びになります。 まずは色数スライダーを4に、パレットタイプを「補色配色」にして試してみてください。

面積比は「主役の色を8〜9割」に

補色2色を1:1で使うと喧嘩します。ベースカラーを広い面積（背景・大きな要素）に、補色はボタンやリンクなどの アクセント（全体の1〜2割）に絞ると、視線が自然にアクセントへ誘導されます。いわゆる「60-30-10ルール」の 10%部分に補色を当てるイメージです。

「RGB完全ランダム」がダサくなる理由

rgb(random, random, random) のように3チャンネルを独立に乱数化すると、明度・彩度がバラバラになり、 半分近くが「濁った中間色」に寄ってしまいます。統一感のあるパレットにはなりません。

HSLで「色相だけランダム・彩度と明度は固定」にする

使えるランダムカラーを作るコツは、色相（H）だけを乱数化し、彩度（S）と明度（L）は一定の帯に固定することです。 本ツールのランダム配色は、彩度50〜100%・明度30〜70%の範囲に収めて色相を振っているため、鮮やかさと視認性が揃います。

// くすみやすい: RGBを独立に乱数化
const bad = `#${Math.floor(Math.random()*0xffffff).toString(16)}`;

// 揃いやすい: 色相だけ乱数、彩度・明度は固定帯
const h = Math.floor(Math.random() * 360);
const good = `hsl(${h}, 70%, 50%)`; // 彩度70% / 明度50% 固定

ランダム配色が向いているシーン

• デザインの初期段階で配色の「あたり」を素早く探したいとき
• グラフ・チャートで系列ごとに区別できる色を機械的に割り当てたいとき
• アバターやタグの背景色を、ユーザーごとに自動で振り分けたいとき

気に入った色が出たら、その色をベースカラーに設定し直し、「類似色配色」や「単色配色」に切り替えると、 ランダムで見つけた1色から調和の取れたパレットへ展開できます。