センスのいい配色を決めよう!カラージェネレーター7種

2016.5.30

ブログなどのWebサイト、見やすさはもちろん、見た目の「素敵だな」「かわいい!」「センスいいなぁ」は色で決まると言ってもいいのではないでしょうか。
自分で配色を決めようとすると、これがなかなか難しい。お洋服なら、センスよくできるのに…なんか違う。と、なることもあります。Webデザインは、洋服の合わせとは違うようです。なら、教えてもらえるもので調べよう!
今回は、色そのものやグラデーション、相性のいい色などを無料で調べることのできる、カラージェネレーターをご紹介します。

色を調べるのにイチオシのサイト

英語が多い中で、すごく優秀な日本のサイトを見つけました。

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

日本語なので、見に行っていただければわかります。
右上にある、リンク『マンガ配色検索』『色検索』『旅する配色見本』『配色の見本帳』も、おもしろい。

haisyokumihoncho1

このサイトをイチオシする理由は、色を1つ選んでみるとわかっていただけると思います。こんなに丁寧に、いろんな解説をしてくれてるサイトは他にない。

配色の見本帳

fromkato色見本

日本語です。日本の伝統色を載せてくれてるのが特徴。

fromkato-iromihon1

例えば『銀鼠』を選んでみると

fromkato-iromihon2

下の画像のように詳しく見ることができます。グラデーションも調べられます。

fromkato-iromihon3

fromkato色見本

NIPPON COLORS-日本の伝統色

異色なサイトだと思います。日本の伝統色も綺麗。

nippon-colors

NIPPON COLORS

WEB色見本 原色大辞典-HTMLカラーコード

このサイトも秀逸。

gensyokudaijiten1

メニューいろいろある中で、おもしろいのが『ストライプメーカー』。単語入れると作ってくれます。

gensyokudaijiten2

『成分解析』もおもしろい。こういうの、そのままブログカラーにしてみてもいいのでは?

gensyokudaijiten3

WEB色見本

色のグラデーションを調べられるサイト

ここからは、英語のサイトです。

0 to 255

color-picker1

下に出てる色をクリックしてもいい。
調べたいカラーコードがわかっているなら、右側の 黒い Get Started now 矢印が指す『PICK A COLOR』を押すと、下の画像

color-picker2

10進数(例:#123456)の6桁、アルファベット + 数字 を入力する窓が開きます。入力して『Pick color』を押すと、下の画像のようなグラデーションを見ることができます。

color-picker3

上の画像は『RANDOM COLOR』を押してみた結果。
左側の黒いところで、直接カラーコードの入力もできます。

0 to 255

Material UI

materialui1

カード状に並んでいる見本から、左上の『Meterial Design Color』を選んでみたのが、下の画像。

materialui2

このサイトは『Social Colors』で各ソーシャルメディアの、特有のカラーコードを教えてくれるのが特徴的です。

materialu3

Material UI

Coloreminder

任意のカラーコードを入力して調べるタイプのサイト。

coloreminder1

グラデーションや、相性のいい色を教えてくれるだけでなく

coloreminder2

下の方に、CSSコードが出るのが特徴です。

coloreminder3

Coloreminder

カラーだけでなくちょっと便利

ブログに適用してみたときのイメージを調べられるサイトと、カラーコードを変換してくれるサイトをご紹介します。

ウェブ配色ツール Ver2.0

右側の『基本色』さえ入れれば、自動で合う配色にしてくれます。日本語だから、安心。

web-haisyoku-site

ウェブ配色ツール
新しいのができてました。Ver3

RGB変換

知ってると意外に便利なサイト。10進数 → 16進数、その反対も調べることができます。

rgb

RGB変換

さいごに

英語のサイトが多い中で、日本語サイトを見つけられたのが収穫でした。
ブログ作りのセンスは、センスのよいサイトをたくさん見るのがよいそうです。「好みだな」と感じるサイトで使われている色を調べて、ご紹介したジェネレーターを使い、自分のものにしていくのもいいのかもしれません。
色味を2色か3色におさえて、シンプルにするのもいいですね。たくさんの色を使ったとしても、色味が揃っているとごちゃごちゃ感は軽減されるそうです。私は、どちらも好き。当ブログも、ちょこちょこ色変えをしています。

  ここでご紹介したジェネレーターを効率よく使ってみると、どうなるか?をご紹介します。
【前編】ブログの配色は好きな色で決めちゃえ!