色検索
シェアする
お気に入りの色

グラデーション自動作成

WEBやホームページ、壁紙の背景などで使うグラデーションの素材を自動で作成できます。
色やサイズ、方向などを設定し、変化する色相、彩度、明度などを変更すれば簡単にグラデーション素材が作成できます。
すべてブラウザ上で作成でき、JPGやPNGでダウンロードすることが出来ます。
作成したグラデーションは、無料でご自由にお使い頂いて結構です。

グラデーション作成画面

左のカラーピッカーで色で色を選びます。この色を元に、色相、彩度、明度、向きなどを変えればグラデーションが作成されます。
「JPG作成」か「PNG作成」をクリックすれば、下にJPG画像やPNG画像が生成されるのでそちらを保存してご利用下さい。
作成される画像のサイズは、設定した横幅、縦幅ですが、「作成画像サイズ」の画像横幅、画像縦幅を変更することでサイズを変えて作成も出来ます。

設定
作成画像サイズ
PNG作成
JPG作成
横幅: px
縦幅: px
色相: °
彩度: %
明度: %
向き:
変化後HSV:
H 17.4°
S 50.3%
V 78%
画像横幅: px
画像縦幅: px

グラデーション画像ファイル

グラデーション自動作成の使い方

色選択

左のカラーピッカーからグラデーションに使う元の色を選びます。
パレットをクリックして色を選択する以外にも、RGBのカラーコードを直接入力したり、HSVを値を入力することでも指定することができます。
この色と、設定で色相、彩度、明度などを変更した色の2色でグラデーションが作成されます。

グラデーション設定

グラデーションの元の色からの色相、彩度、明度の変化量とサイズ、方向を変更できます。
数値の入力はレンジ入力でバーを動かすことでも変更できます。

グラデーション
横幅
10px~400pxの間で、グラデーションの横幅を指定することが出来ます。
グラデーション
縦幅
10px~300pxの間で、グラデーションの縦幅を指定することが出来ます。
色相-180°~+180°の間で元の色相からの変化量を指定することができます。
彩度-100%~+100%の間で元の彩度からの変化量を指定することができます。
0以下になる場合は0、100以上になる場合は100になります。
明度-100%~+100%の間で元の明度からの変化量を指定することができます。
0以下になる場合は0、100以上になる場合は100になります。
向きグラデーションの向きを指定します。
元の色から変化した色に向かって右向きを0度として、角度分だけ反時計回りに回転します。
変化後HSV変化した色のHSVを確認することができます。

作成画像サイズ

グラデーションの画像を作成する場合の、画像のサイズを変更することができます。
作成した画像が大きすぎて入らない場合は、画面に合わせて小さく表示されますが、保存すれば大きい画像で保存されます。

画像横幅10px~3000pxの間で、作成するグラデーションの画像の横幅を指定することが出来ます。
画像縦幅10px~3000pxの間で、作成するグラデーションの画像の縦幅を指定することが出来ます。

画像に変換

「JPG作成」または「PNG作成」をクリックするとそれぞれJPG画像、PNG画像が下に作成されるので、右クリックで保存などしてグラデーションをご利用ください。