カラーグラデーションパレット作成 | 2〜5色からCSSと中間色を一度に

2色から5色まで指定して、滑らかなグラデーションと等間隔の中間色パレットを同時に生成するツール。linear / radial の切り替え、0〜360°の角度、3〜24段階のステップを1画面で調整でき、linear-gradient() 形式のCSSとHEXコード一覧をそのままコピーできる。

💡 このツールについて

「2色の中間色が何色になるか」を手作業で割り出すのは面倒で、特にCSSのグラデーション記述とデザインツール用のパレットを別々に用意すると数値がずれやすい。このツールは両方を1つの入力から同時に出力する。色を追加すれば多段グラデーションになり、ステップ数を上げれば中間トーンが細かく刻まれる。各スウォッチはクリックでHEX値がコピーされるので、Figmaやイラストソフトのカラーパネルに1色ずつ移すときも手早い。

linear と radial は同じ停止色を共有するため、線形グラデーションで決めた配色をそのまま放射状に切り替えて見比べられる。角度スライダーは背景の流れる方向を、ステップ数スライダーは抽出する中間色の数を制御する。

🧐 よくある質問

Q. 出力されるCSSはそのまま使えますか? A. background: linear-gradient(90deg, #ec1380 0%, #00f0ff 100%); の形式で出力されるので、CSSの background プロパティに貼るだけで使える。radial選択時は radial-gradient(circle, ...) 形式になる。

Q. 中間色のステップ数は何に影響しますか? A. パレット欄とHEXコード一覧に並ぶスウォッチの数が変わる。3で起点・中間・終点に近い3色、24まで上げると細かいトーンのグラデーションスケールになる。CSS側の停止色（入力した2〜5色）は変わらない。

Q. 色は最大何色まで足せますか? A. 2色から5色まで。「色を追加」ボタンは5色に達すると消え、各行の×で2色まで減らせる。

Q. 角度を変えても中間色は変わらないのですか? A. 角度は線形グラデーションの向きだけを変える。抽出されるパレットの中間色は入力色とステップ数で決まるため、角度では変化しない。

📚 豆知識

RGB空間での単純な線形補間（このツールが採用している方式）は計算が速く予測しやすい一方、明るい中間色付近で灰色っぽく沈む「グレーアウト」が起きやすいことが知られている。同人グッズの缶バッジ台紙やZINEの表紙のように、印刷で彩度を保ちたい場面では、起点・終点の彩度を少し高めに取るか、中間に1色挟んで多段グラデーションにすると沈みを避けやすい。逆にWebのヒーロー背景なら、淡い2色のlinearで十分に上品な仕上がりになる。