マテリアルデザインにも使える「配色パターン」!!厳選3サイト+αをまとめて見ました!

2019 11/02
マテリアルデザインにも使える「配色パターン」!!厳選3サイト+αをまとめて見ました!

ブログやサイトを作成する時に悩むのが「配色パターン
シンプルに「ヘッダーとフッターは黒」で「他は白」みたいにするもの良いけれど
やっぱり他の色でサイトを作りたいですよね。

そこで、自分のサイトにも使える「配色を参考に出来るサイト」をまとめてみました。
他のサイトでは10サイト20サイトと載ってたりもしますが、逆に迷ってしまった経験があるので
今回は厳選3サイト+αでの紹介をしています。
参考にしてみてください!

目次

厳選3サイト

Color Hunt

画像

4色構成で作成されたカラーパレット。気になる色の上にマウスカーソルを合わせるとカラーコードが表示される。そのカラーコードをクリックすると簡単にカラーコードがコピーできる。

色んな配色パターンがあるので参考程度でも役に立つサイトです。

URL:https://colorhunt.co/

material palette

画像

画像でお伝えすると、左側の配色パネルを気になる順に2つ選択すると右側上部にスマホサイズのプレビューが出現する。ちなみに、1回目にクリックをした色はヘッダー色、2回目にクリックした色はフローティングボタンに反映される。ただ、左側の配色パネルの数が若干少ないので、選択できる配色が狭い印象を受けます。

URL:https://www.materialpalette.com/

Flat UI Colors

画像

濃い色や薄めの色など、気になるパネルをクリックするとカラーの詳細に入ることが出来る。後は始めに紹介をしたColor Huntのようにカラーコードがコピーできる。

URL: https://flatuicolors.com/

プラスα、基本サイトとグラデーション参考サイト

「色」についての基本サイト「原色大辞典」

画像

原色大辞典では「 色の名前とカラーコード 」が表示されています。「色」について調べることに特化しているので、サイトのベース色を探してみるのもいいですね。

URL: https://www.colordic.org/

グラデーションならを参考にしたいなら「Grabient」

画像

そのままでも参考になるようなグラデーションが揃っているが、このサイトでは気になるグラデーションパネルを自分自身で変更が出来るのです。例えば「上から下にかけてグラデーションになっている」パネルを調整して「左から右にグラデーションに変える」って事も出来ます。

URL:https://www.grabient.com

配色パターンのまとめ

いかがでしたでしょうか?配色パターンが参考になるサイトは他にも多数存在しますが、色んなサイトを見て回ると逆に混乱してしまいます。少なくとも私は混乱をしてしまったので・・。
厳選サイトの中でも最初に書いた「Color Hunt」は本当に参考になるので
ぜひ1度、サイトを訪れてみてください。

この記事が気に入ったら
フォローしてね!

目次
目次