こんにちは！プロクラスの渡辺です。
決まった色があるときも、そうでない時もデザインを進めていくと配色に困ってしまう時ってありますよね。
基本的に「ベースカラー：70%、メインカラー：25%、アクセントカラー：5%」と言われていますが、そもそも色がなにも決まってない！という時が1番厄介です 😥
そこで配色のヒントになりそうなサイトを集めてみました！
目次
Color-Simple.com
普段わたしが1番お世話になっている色見本配色サイトです。
IllustratorやPhotoshopで作業をすることが多いので、カラーピッカーで色を決めれるのも楽しくて好きなのですが、パレットボタンを押して詳細ページに進むと色についての説明、近似色や配色など参考になる情報が多いので助かっています 😉
Happy Hues
実際にWEBサイトに反映したらどうなるのか、わかりやすく確認できるサイトです。
背景はこの色、ボタンはこの色…とわかりやすく表示してくれているのでイメージがしやすいです！
配色に悩んだ時や、デザイン中の息抜きに左のバーから配色を変えて眺めていることが多いサイトです 🙂
itmeo
グラデーションって実は結構配色が難しかったりするので、こちらのサイトからヒントをいただくことも多いです。
グラデーションの最初と最後をカラーコードで表示してくれているので、Illustratorでもパパと変更しやすくて便利なのですが、なによりcssのコピーができるのが助かります！
配色の見本帳（カラー成分測定「色とりどり」）
画像をアップロードしたら配色パターンを提案してくれるサイトです。
画像内のカラーバンドやカラーチップなどもみれるので参考サイトのカラーバンドを知りたいときにも便利です！
※ただし、アップロードした画像から抽出するので参考程度に…
私は「この写真の色合いかわいいな〜」と思ったときに、こちらのサイトで色を抽出していただくことが多いです 😀
実際どう使うの？
本当に配色に困った時もそれぞれのサイトを参考にさせてもらっていますが、デザインをしている時やコーディングをしている時、息抜きに配色サイトを開いてぼんやり眺めて「この配色かわいいな〜」とか「この色（グラデーション）使ってみたいな〜」という感じでインプットしています 😉
配色サイトって結構たくさんあるので、自分にあったサイトを見つけるのも楽しいです！
眺めるだけでも勉強になるので、配色でいつも困ってしまう方はぜひ自分好みの配色サイトを見つけてみてください 😳