こんにちは。新卒のSKです。
先日の記事「開発の現場で使えるツール紹介」より、
今回は”CSS Gradient Generator”についてご紹介します。

ページ制作をしていると、配色にこだわりを持つ人も多いと思います。
単に色のコードを知りたい人、RGBやHEXを読み替えたいだけの人
実際に自分の目で見て、絶妙な配色をしてみたい人などなど。

私も作成したサイトをCSSでアレンジしようとすると、
文字や背景、一本の横線に至るまで、配色にかなり時間をかけてしまいます。

そこで私は、こちらのサイトを参考にするようにしています。
CSS Gradient Generator
◆サイトはこちら：http://www.css3factory.com/linear-gradients/

動的に色が変わり視覚的にもチェックがしやすいので、
かなり重宝しています。画面もシンプルで見やすい。

グラデーションも作成でき、カラーをADDしていけば独自配色も可能です。
グラデーションサンプルが表示されている下のバーを動かせば、
それぞれの色についてどの程度表示させるか調整でき、Gradient Directionで方向も決められます。

さらに便利なのは、CSSのコードも動的に作成されること。
そのまま自分が必要な箇所へコピペして実装が可能です。

この手のサイトですが、ほかにもいろいろあるようです。
最後にいくつか紹介させていただきます。

・ColorPicker.com
https://www.webpagefx.com/web-design/color-picker/
カラーコードのみ確認できるシンプルなサイト。

・CSS matic
http://www.cssmatic.com/
基本的なカラー設定のほかに、Boxの丸角や影なども視覚的に作成できます。
もちろん、コードも動的に作成されます。

・w3schools.com
https://www.w3schools.com/
WEB用言語の総合的な勉強ができ、もちろんカラーコードも探せるサイト。CSS他、HTMLやJavaScript等もあります。こちらのツールだけで完結できそうな気がします。