グラデーション生成器
2色の間を、指定した段数で補間した色の一覧(カラーランプ)を作ります。CSSのグラデーションと、段階の帯をプレビュー。
色
なめらかなグラデーション
段階の帯
色の一覧
—
CSS
—
計算式
- RGB補間: 各色の成分を、直線的に混ぜる
- HSL補間: 色相・彩度・明度を、それぞれ直線的に混ぜる(色相は数値の差のまま回る)
使い方のヒント
データの可視化(ヒートマップなど)の色の段階や、UIのテーマの、中間色づくりに使えます。RGB補間は、中間が、くすんだ色になりやすいので、見た目が気になるときは、HSL補間を試してください。
関連ツール
よくある質問
グラデーション生成器では何がわかりますか?
2色の間を、指定した段数で補間した色の一覧(カラーランプ)を作ります。CSSのグラデーションと、段階の帯をプレビュー。
何を入力すればいいですか?
次の項目を入力します: 開始の色、終了の色、段数(色の数)、補間の方法。内容を変えると、結果もそれに合わせて変わります。
結果にはどんな項目が表示されますか?
「色の一覧」「CSS」などが表示されます。
どんな計算式を使っていますか?
ページ内の「計算式」にまとめています。たとえば「RGB補間: 各色の成分を、直線的に混ぜる」のような式です。
入力した値は外部に送信されますか?
いいえ。処理はお使いのブラウザの中だけで行い、サーバーには送信しません。
結果はどのくらい正確ですか?
色の見え方はモニターや印刷で変わります。サイズや比率は計算どおりですが、仕上がりは実際に書き出して確認してください。
結果をコピーできますか?
はい。「結果をコピー」ボタンで、表示されている結果をクリップボードにコピーできます。
スマホでも使えますか?
はい。画面の幅に合わせて表示されます。アプリのインストールや会員登録は必要ありません。
同じカテゴリ(色・配色・グラデーション)の他のツールはありますか?
はい。HEX/RGB/HSL変換機、カラーパレット抽出、カラーピッカー、HEX→RGB→HSL変換機などがあります。