サイトを作る時、悩ましいのが全体の配色(悩ましくない人もいるかもしれないけど…)。そんな配色を考える際に使えるツールや参考になるサイトの紹介です。
ある色を指定すると、その色と相性のいい色を教えてくれたり、様々な色を掲載しているサイトなど紹介します。
____________________
▼ 配色に使えるツール
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
まずはツールから。一つの色を指定すると、自動で相性のいい色を抽出してくれます。実際にはこんな感じ(画像はクリックで拡大します)。
赤枠部分に値を入力、あるいはマウスでカーソルを移動すると、最多で10色表示してくれます。
入手方法は以下の通り。まずは下のサイトへ移動
ColorMixers: Remixing RGB since 2003
「download」をクリック(画像はクリックで拡大します)。
PHP版とHTML版があります。PHP版では保存機能やPhotoshopやIllustrator形式での出力機能があるなどが使えるらしいですが、データベースが必要とかなんとか…、ちょっと意味不明…。なので今回はHTML版をダウンロードします。ということで下画像の赤枠部分「Download colormatch_nophp.zip(14.1k)」をクリック(画像はクリックで拡大します)。
ダウンロードしたzipファイルを解凍し、中の「index.html」をダブルクリック(実行)してください。(僕は既定のブラウザをFirefoxにしているのでアイコンが違う場合があります。とにかくindex.htmlです。画像はクリックで拡大します)
後は色を入力するのみです。解凍したフォルダは適当な場所に保存してください。
____________________
▼ 配色に使えるサイトいろいろ
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
上のツールのダウンロードがめんどくさいという方は、以下のサイトで同じような機能が使えます。
ColorBlender.com | Your free online color matching toolbox
また、色に関しては下のサイトも参考になります。原色、和色、洋色など、とにかくたくさんの色が見られます。色の履歴を残す事も出来ます。色にこんな和名があったなんてと、見てみるだけでも価値アリ。
WEB色見本 原色大辞典
グラデーションを考えるなら以下のサイト。グラデーションにコメントしたり、投票したり出来るようです。
COLOURlovers Coup.0 :: Color Trends & Palettes
ちょっと、このサイトの配色も見直してみようかなぁ…。
・関連記事
CSSを使ったメニューが簡単に作れる「CSS Tab Designer」
画像の全体的な色で並び替えが出来る「ImageSorter」
・トラックバック送信先
相性の良い色を自動でピックアップしてくれる「ColorBlender」 - GIGAZINEPR