センスのいい配色を決めよう！カラージェネレーター７種
ブログなどのWebサイト、見やすさはもちろん、見た目の「素敵だな」「かわいい！」「センスいいなぁ」は色で決まると言ってもいいのではないでしょうか。
自分で配色を決めようとすると、これがなかなか難しい。お洋服なら、センスよくできるのに…なんか違う。と、なることもあります。Webデザインは、洋服の合わせとは違うようです。なら、教えてもらえるもので調べよう！
今回は、色そのものやグラデーション、相性のいい色などを無料で調べることのできる、カラージェネレーターをご紹介します。
色を調べるのにイチオシのサイト
英語が多い中で、すごく優秀な日本のサイトを見つけました。
配色の見本帳|キーカラーで選ぶ配色パターン
日本語なので、見に行っていただければわかります。
右上にある、リンク『マンガ配色検索』『色検索』『旅する配色見本』『配色の見本帳』も、おもしろい。
このサイトをイチオシする理由は、色を１つ選んでみるとわかっていただけると思います。こんなに丁寧に、いろんな解説をしてくれてるサイトは他にない。
fromkato色見本
日本語です。日本の伝統色を載せてくれてるのが特徴。
例えば『銀鼠』を選んでみると
下の画像のように詳しく見ることができます。グラデーションも調べられます。
NIPPON COLORS-日本の伝統色
異色なサイトだと思います。日本の伝統色も綺麗。
WEB色見本 原色大辞典-HTMLカラーコード
このサイトも秀逸。
メニューいろいろある中で、おもしろいのが『ストライプメーカー』。単語入れると作ってくれます。
『成分解析』もおもしろい。こういうの、そのままブログカラーにしてみてもいいのでは？
色のグラデーションを調べられるサイト
ここからは、英語のサイトです。
０ to ２５５
下に出てる色をクリックしてもいい。
調べたいカラーコードがわかっているなら、右側の 黒い Get Started now 矢印が指す『PICK A COLOR』を押すと、下の画像
10進数（例：#123456）の６桁、アルファベット + 数字 を入力する窓が開きます。入力して『Pick color』を押すと、下の画像のようなグラデーションを見ることができます。
上の画像は『RANDOM COLOR』を押してみた結果。
左側の黒いところで、直接カラーコードの入力もできます。
Material UI
カード状に並んでいる見本から、左上の『Meterial Design Color』を選んでみたのが、下の画像。
このサイトは『Social Colors』で各ソーシャルメディアの、特有のカラーコードを教えてくれるのが特徴的です。
Coloreminder
任意のカラーコードを入力して調べるタイプのサイト。
グラデーションや、相性のいい色を教えてくれるだけでなく
下の方に、CSSコードが出るのが特徴です。
カラーだけでなくちょっと便利
ブログに適用してみたときのイメージを調べられるサイトと、カラーコードを変換してくれるサイトをご紹介します。
ウェブ配色ツール Ver2.0
右側の『基本色』さえ入れれば、自動で合う配色にしてくれます。日本語だから、安心。
RGB変換
知ってると意外に便利なサイト。10進数 → 16進数、その反対も調べることができます。
さいごに
英語のサイトが多い中で、日本語サイトを見つけられたのが収穫でした。
ブログ作りのセンスは、センスのよいサイトをたくさん見るのがよいそうです。「好みだな」と感じるサイトで使われている色を調べて、ご紹介したジェネレーターを使い、自分のものにしていくのもいいのかもしれません。
色味を２色か３色におさえて、シンプルにするのもいいですね。たくさんの色を使ったとしても、色味が揃っているとごちゃごちゃ感は軽減されるそうです。私は、どちらも好き。当ブログも、ちょこちょこ色変えをしています。