配色に迷ったときのお勧めサイトを紹介します。
配色はデザインの要素でとても重要なだけに悩むところです。
今回は紹介する配色の見本サイトは、私が使って実際にデザイン業務で使えるなコレ。ってものだけを選んでみました。
配色パターン見本
khroma
文字の色と背景の色の配色を探すのにとても便利なサイトです。他にもグラデーションの配色パターンや画像のパターンもあります。
COLOR SUPPLY
https://colorsupplyyy.com/app/
カラーホイールから色の組み合わせをイラストやパターン、グラデションなどを見ながら探せるサービスです。イラストで確認できるのはうれしい。
2〜3色の組み合わせたイラストの配色が実際に見れて色選びに役立ちそうです。
Coolers
https://coolors.co/e3e7d3-bdc2bf-989c94-25291c-e6e49f
使い方のチュートリアル付きなのでとてもわかりやすいです。
2色から5色までの配色を選べ、また個別の色合いも確認できます。
配色パターンから気に入った色をロックすると、その色にあった配色を探せます。
COOL COLORS
https://saruwakakun.com/design/gallery/palette
「親近感を感じさせる配色」など配色のもつイメージごとに分類されていてとても使いやすいです。
厳選40パターンだけあって、どれもいい配色です。無限のパターンから選ぶよりも選びやすいかもしれません。
なにより選んだ配色を使ったレイアウトのイメージがプレビューできるので、実用のイメージがわきやすいです。
Paletta
このサイトは類似色で調和の取れた色を表示してくれます。
カラーコードを入力するか、最初に表示されるパレットから色を選ぶと調和の取れた色を表示します。
グラデーション配色パターン見本
WebGradients
グラデーションの配色パターンを探すならここがおすすめ。背景にグラデーションを入れたいときなんかに参考になりそう。見本をクリックすると大きく表示され、イメージが掴みやすいです。
Grabient
グラデーションの配色パターンを探せるサイトです。
ここの特徴は用意されているグラデーションパターンを自分で調整できるところです。
色、グラデーションの角や長さ、色を増やしたりと自分好みのにカスタマイズ可能です。
まずは自分の作りたいイメージのパターンを探してそれを微調整する感じでしょうか。
出来上がったグラデーションはCSSコードでコピーとなります。
とっても便利！
coolHue 2.0
https://webkul.github.io/coolhue/
グラデーションのパターンを集めたサイトです。
ここの特徴は選んだパターンをそのままPNGデータでダウンロードできるところです。
コードを入力して作る手間が省けます。もちろんコードも表示できます。
色探しにおすすめ
NIPPON COLORS
このサイトは配色というよりも色探しができるサイトです。
250種類から日本の伝統色を選べ、和風のデザインにはとても参考になるのではないでしょうか。
CMYK、RGBのカラーコードの表示もついています。
色もいいけど、アニメーションが美しサイトです。
まとめ
いかがだったでしょうか。
また使えるサイトを見つけ次第、随時更新していきます。
参考になれば幸いです。
色のイメージの記事も参考に。
