ブログの配色を考えるのに役立つサイト・ツール6選

ブログのデザインに使う色は、ブログの印象を決める重要な要素だと思います。
自分の好きな色は知っているのですが、複数の色を組み合わせるのははなかなか難しいです。

今回は、私がひとつの色を選ぶときや、ブログの配色を考えるときに使っているサイトを中心に、ブログの配色を考えるのに役立つサイト・ツールを6つ紹介します。

スポンサーリンク

1.Search by Muzli

Search by Muzliは、ネット上の膨大な作品の中から、配色を探すことができるウェブサイトです。

色の名前やカラーコード、キーワードなどで検索をすると、様々な画像が検索結果に表示されます。
その画像で使われている配色のパレットを表示・ダウンロードしたり、その配色を使ったライブビューを確認したりすることができます。

「青と赤を使ったサンプルを見たいな」というときや、「紫にはどんな色が合うのだろう」というときなど、複数の色の組み合わせのサンプルをたくさん見たいときに便利です。

私は最近はこのサイトばかり使っています。

 

 

2.Khroma

Khromaは、AIを利用した配色ツールです。

はじめに好きな色を50色選ばなければいけませんが、それを元にAIがおすすめの色や組み合わせを教えてくれます。

5つのモードがあり、どれもスクロールすれば無限にサンプルが表示されるので、見ているだけでもおもしろいです。

全て、使われている色のコード(HEX、RGB)を表示しクリップボードにコピーすることもできます。
また、お気に入りを登録しておく機能もあり、便利です。

▼背景色と文字色の組み合わせ

▼2色の組み合わせ

▼グラデーション

▼画像

▼カラーパレット

3.ColorHexa

ColorHexaも海外のサイトですが、直感的で使いやすいと思います。
ひとつの色を選ぶときに便利なサイトです。

[Enter any color value]に好きな色を入力し、検索ボタンを押すと、その色に関する様々な情報や関連色を見ることができます。

「グレーが好きなんだけど、いつもと少し違うグレーを使いたい」というように、微妙に違う色(より薄い・濃いなど)を見たいときに使っています。

例として、gray(#808080)を検索します。

・Shades and Tints:シェード(黒を混ぜた色)とティント(白を混ぜた色)
・Tones:色調

・Color Schemes:配色例
・Alternatives:代替色

Color Schemes(配色例)がグレーだと分かりにくかったので、赤(#ea1616)のものを載せておきます。

4.原色大辞典

原色大辞典は、色を探したいときなどに利用しています。
「原色大辞典」、「和色大辞典」、「洋色大辞典」、「モノトーン」などがあり、どれも見やすいです。

色をクリックするとその色の詳細情報を見ることができ、名前の通り「色の辞典」として使えます。

また、配色大辞典 – Color Schemeというページもあります。

5.COOL COLORS(サルワカ)

サルワカという、HTML/CSS、Wordpress、Photoshop、WEBデザインなどに関する情報を配信しているサイトの、「配色パターン見本」です。

このサイトは、とにかく解説が丁寧で、分かりやすく、しかも見やすいので、色々なページをよく見ています。

デザインや色も統一性があり、参考になります。

6.HUE 360

HUE 360は、RGBではなく、マンセル表色系(色相 明度/彩度)の色相環から配色を探すことができるサイトです。
サイトの見た目がシンプルかつ直感的で、操作がしやすいと思います。

画面左下の設定を変更することで、表示する色の絞り込みをすることができます。

・Color Space:色空間。マンセル(色相 明度/彩度)、RGB、RGB+の3種類から選択可能
・Hue Step:色相の表示数
・Chroma Step:明度の表示数
・M&S Judge:ONにすると、最初に選択した色にマッチする色のみ表示する

さいごに

この6つのサイトだけで(むしろSearch by Muzliだけでも)、かなり参考になると思います。
ここに挙げた以外では、好きな雑誌やサイトを見て配色の参考にすることもあります。

どれも触っているだけで楽しいサイトなので、是非使ってみて下さい。

Comments

タイトルとURLをコピーしました