【ノンデザイナー向け】配色に困ったら即使える！配色パターン参考サイト

こんにちはこんばんは、大変お久しぶりのshiromaruです。

いつの間にやら、季節は夏ですね。

梅雨とは思えない雨の少なさで、干からびそうです。

ラーメンを食べて水分補給しましょう！

さて、最近社内で『デザインについて使えるツール・サイト』について情報共有したのですが、

「これ、割といいんじゃない？」と思い、こちらでもアウトプットさせていただきます。

すでにいろんなサイト様でも取り上げられているネタですが、どうぞお付き合いください。

1.配色の見本帳｜キーカラーで選ぶ配色パターン

こちらはとても有名なサイトですね！

メインカラーを選択すると、選択したメインカラーを中心に彩度や明度、

更には相性の良い色の組み合わせ、その組み合わせの印象なども表示してくれるサイトです。

彩度・明度の表示は、ボタンの色や、見出しの色に悩んだときに便利です。

色の組み合わせ、組み合わせの印象の表示は、目立たせたい箇所、リンクの色、さし色を考える時間をカットできますね！

2.[ HUE / 360 ] The Color Scheme Application

サイトの印象が暗く感じたり、もっと落ち着いた色にしたいなと思った時に役立つサイトです。

おしゃれで使って入れも気持ちよく、感覚で操作できるのがよいですね！

3.shade

グラデーションを作ることができるサイトで、ベースカラーを決めカラーコードを入力すると、色やグラデーションの各種値を調整して作ってくれます。

作成した色のCSSプロパティが表示されるので、そのままコピーして使えます！

色の調整は下記のようにできます。（右2つは使わなくても問題ないかと思います。）

見出しやボタンの配色に困った時に便利ですね！

4.Web Colors Data

例えばクライアントから、「このサイトと同じようなサイトが作りたい」というような要望があった場合、こちらのサイトがオススメです。

サイトのURLを入力すると、そのサイトに使われている色が表示されます。

色の一覧の他、色相の分布図やカラーホイール、似た色を使った他サイトも表示してくれます。

使用されている色を表示してくれるのはもちろん、色の一覧で配分も表示してくれるので、とても便利です。

5.paletton

パレット上でWebサイトを作ったときの色サンプルを確認することができます。
指定した色の仮想ページの表示やHTML・CSS・LESS・XML・TEXTなどの出力もしてくれます。

個人的にこのサイトを知って感動したことは、サイトイメージに色を設定してどんな見え方になるのか表示してくれるところです。

まとめ

以上、5つのサイトを厳選しました。

今回紹介したのは、すぐ使える配色の見本サイトでしたが、いかがでしたでしょうか。

配色とはこういう論理で～というのは、この記事では紹介していません。

プログラマーの方など、ちょっとボタンの色を変えたーいという方にオススメしたいサイトを厳選しています。

参考になれば幸いです！

色の論理については、またいつか書かせてもらう…か…も。

ありがとうございました！