ウェブ上で配色を手伝ってくれるサービスがいくつはありますが、ボクは Adobe Kuler を使っています。

色んな配色パターンをつくれるのと、他の人がつくったパターンを見られるのがいいですね。
似たようなものにColor Schemerがありますが、こちらは有料ソフト。でもさすがにツールは使いやすく色盲のチェックやらサンプルサイトを表示できたりと優れています。ウェブ版はフリーですがそちらは用途が少し違うんですよね。

と、いうわけでコストの面もあってKulerに落ち着いています。

第1部 Kuler とは？

Kuler とは？

ツールを起動しよう

ツールにアクセスする

カラーテーマ作成画面へ移動する

カラーを変えてみる

Kuler とは？

Kuler とは？

KulerはAdobe製のオンラインカラースキーマで、カラーテーマをつくったり他の人が作ったカラーテーマを見ることができます。
デスクトップやFlickrの画像から色を抽出できたり、スウォッチにインポートできるファイル（.ase：Adobe Swatch Exchange）で保存できるなどをウェブサービスながら十分な機能があります。
詳しくはこの記事あたりを

カラーテーマとは、自由に選択した色の組み合わせ（最大5色）のこと。
この記事ではKulerを使ってウェブデザイン向けのカラーテーマをつくって配色してみます。

ツールを起動しよう

ツールにアクセスする

Kuler にアクセスするとツールが起動され、他のユーザーがつくったカラーテーマ（過去30日以内で人気の高かったもの）が表示されます。

何千というカラーテーマが登録されているのでこれを眺めるだけでもかなり勉強になります。

カラーテーマ作成画面へ移動する

カラーテーマをつくる時は、 左メニュー ->【Create】へ進みます。

以下のような画面が表示されます。
なんだかそれらしくなってきた。

中央にあるカラーホイール（色相と彩度）、明度スライダーで色を選択できます。

カラーホイールは角度で色相が変わり、円の中心ほど彩度が低く外側ほど高くなります。
明度スライダーは左にいくほど暗く、右に行くほど明るくなります。

プレビューの下の値やスライダーを直接変更することもできます。

カラーを変えてみる

カラーホイールに5本のセレクターが表示されていると思います。二重丸になっているセレクターがベースカラー、他のセレクターがサブカラーです。

ベースカラー

ベースカラーは全体的なイメージとなる色で、もっとも多くの領域を占めるカラーです。 なのでベースカラーを変更すると、他の色もそれに合わせて変化します。 明度を下げれば他の色の明度も低くなり、彩度を変えれば他の色の彩度も変わります。
ウェブデザインではベースカラーは背景になることがほとんどです。そして全体のほとんどの領域が彩度を高かったり明るすぎると目が疲れやすいので、原色など明るくて彩度の高い色は向きません。明るくても彩度の低い色を選びましょう。

サブカラー

サブカラーは彩度と明度は個別に変えられますが、色相を変えると他のサブカラーも同時に変化します。アソートカラー（ベースカラーに合わせる色）、アクセントカラー（目立たせる色）もこれに属します。

なぜ他の色も一緒に変わるのか？

一色だけ変えたいのに他の色まで変わってしまう・・・。と思うかもしれませんが、これは配色のセオリーに基づいて変化しています。
配色のセオリーには、Identity、Analogy、Opornentなどいくつかあり、Kulerではそれに基づいたカラールールというものが設けられています。このルールに従い色を決めればバランスのいい配色が作れる。というわけです。

カラールールは破ることもできますが、とりあえずカラールールに従って実際にカラーテーマをつくっていきましょう。