グラデーションカラー制作におすすめな参考見本色サイト
グラデーションの制作時に色の参考にしたり、画像をダウンロードしたり。参考サイトを使うと、より手軽にきれいなグラデーションできます。
Grabient
カラーのところにカーソルを合わせると色番号が表示されるので、カラーの参考に。
Grab yourself a gradient
Beautiful and simple UI for generating web gradients.
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/image.jpg?resize=1000%2C699&ssl=1)
gradients.cssgears
2色で構成されているのでコピペで綺麗な色が表現できます。
CSS GEARS - Gradients Cards
The Ultimate gradients guide for your next project sketch,Adobe xd and css Gradients
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/image-1.jpg?resize=1000%2C513&ssl=1)
0to255
指定した色の彩度グラデーションを表示してくれるサイト。RGBやHEXなど表示が分かれていて便利
A Most Useful Color Picker | 0to255
Find lighter and darker colors based on any color. Discover why over two million people have used 0to255 to choose color...
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/image-2.jpg?resize=1000%2C584&ssl=1)
uiGradients
全画面表示されるので広範囲のグラデーション制作の参考になるよ。
![](https://piyo-piyo-piyo.com/wp-content/uploads/cocoon-resources/blog-card-cache/b68e0514d4d4012ea83d66aa0b9ef0aa.jpg)
uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/image-7.jpg?resize=1000%2C546&ssl=1)
itmeo
丸型の塗りつぶしの時に参考になるサイト。PNG形式の画像としてダウンロードすることもできるよ。
![](https://piyo-piyo-piyo.com/wp-content/uploads/cocoon-resources/blog-card-cache/0862d4a5cecbc5489282449d0b566b18.jpg)
Free Gradients Collection by itmeo.com
Free collection of 180 background gradients that you can use as content backdrops in any part of your website.
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/image-3.jpg?resize=1000%2C455&ssl=1)
CSS GRADIENT BUTTONS
ボタンを作るときに参考になるサイト
![](https://gradientbuttons.colorion.co/share.jpg)
Gradient buttons
Gradient buttons
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/image-4.jpg?resize=1000%2C348&ssl=1)
Free Mesh Gradient Collection
グラデーション画像をダウンロードできるサイト。.sketch、.webp、.ai、.webp、.eps に対応しています。
![](https://s3-eu-west-1.amazonaws.com/lstore/OG/Gradients.jpg)
Free Mesh Gradient Collection
100 mesh gradients in .sketch, .png, .ai, .jpg, .eps
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/image-6.jpg?resize=1000%2C599&ssl=1)
CoolHue
ダウンロードもコピペに使えるよ。
![](https://piyo-piyo-piyo.com/wp-content/uploads/cocoon-resources/blog-card-cache/50f2e28f96db53c632afb3c2a1889e2c.png)
Gradient Colors Collection Palette - CoolHue 2.0
Get coolest handpicked gradient colors collection palette for your next project, alternatively copy css or download as i...
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/2023-05-11-3.38.56.jpg?resize=1000%2C488&ssl=1)
Adobe Color
手持ちの画像からグラデーションカラーが作成できます。
https://color.adobe.com/ja/create/image-gradient
![](https://i0.wp.com/piyo-piyo-piyo.com/wp-content/uploads/2023/05/image-9.jpg?resize=1000%2C499&ssl=1)
他にもグラデーションまとめサイトはこちらから
コメント