ColorDrink

（色という色を──飲み尽くせ！）

ウェブ・デザインの中でも、とくに配色はむずかしい。「このサイトのイメージ・カラー」みたいに一色だけ決めれば良いのなら簡単ですが、色は組み合わせることで生きてくるのです。

昨日の記事で紹介した Solarized のように、使いやすいカラーリングをビシッ！と作りたい。

今回は、配色を助けてくれるツールたちを紹介します。なかなかマニアックで楽しいヤツらですよ！

（クリックすると拡大・実際のサイトは下のリンク）

背景色と文字色とのコントラスト比が WCAG 2.0 基準（W3C 勧告）に適合しているかどうかを、複数の色を指定して確認できるサイトです。昨日も軽く紹介しましたね。

設定した色の状態を URL （パーマリンク）で保存できて便利です。Solarized の 16 色を設定したカラー・パレットをご覧ください。

左側に並んだ色のパレットをクリックすると、右側に配合の結果が表示される。WCAG 2.0 基準に適合・不適合した結果は、「PASS / FAIL」で分かります。けっこう厳しいので、参考までにどうぞ。

左下の「Back to palette creator」をクリックすると、色を指定する場面に移動します。受け付ける文字列は「RRGGBB」か「RGB」形式・カンマ区切りのみで、たとえば「#RRGGBB」と「#」が入っているとエラーになる。

どちらかと言うと、一行の URL で複数の色を見てもらうという用途に便利で、WCAG 2.0 うんぬんは、ほかのツールが良さそうに感じました。

（これもクリックで画像が拡大）

数多くの配色を管理できる Windows 用アプリケーションです。設定した色は色相環の上に配置され、色と色との関係を客観的に見られる。

選んだ色たちは、一度に彩度や明度の変更が可能です。手軽にカラー・バリエーションが増やせますね。

ColorDrink 専用のプラグインで機能を拡張できることも特長です。とくに色の情報をテキスト形式で出力する OutText はありがたい。ほかのツールへ手軽にデータを渡せます。

また、前回の記事で取り上げた ColorDialogPlus と作者が同じで、配色の設定ファイルを流用できる。両方とも必携のツールですね！

（やっぱりクリックで拡大）

一見すると「よくある配色ツール」です。例によって、上のリンクから Solarized 仕様のパレットをご覧ください。

上下 2 段になっているパレットのうち、上のパレットから色を選びましょう。次に、右側のラジオ・ボタンを押すと、「Triadic （3 色のカラーリング）」や「Linear by Luminance （明るさを変化）」した例が下のパレットに反映されます。

「Linear by Hue （色相を変化）」で「45 度」を選ぶと、（360 割る 45 で） 8 色になるわけですが──、とても同じような色の変化には見えません。具体的には、緑色の付近では似た色が並んでいる。

これは、ごく大ざっぱに言えば、人間の目は緑色の変化に敏感であるのに、モニタの表現できる色の範囲には限界があるからですね。

上で紹介した ColorDrink の画面を見ると分かるように、Solarized には「緑色」がほとんどありません。ずいぶんと偏ったバランスになっている。この点がモニタ上で見やすい配色の秘密でしょうね。

上の HSL Color Schemer を公開している WorkWithColor.com には、カラーリングに使えるさまざまなウェブ・サービスがまだまだあります。

色の情報を RGB だけではなく、HSB・HEX（#RRGGBB）・CMYK などで見られる Color Converter も使い道が多い。ぜひ、ブックマークしておきましょう。

このサイトにあるツールは、たいへん珍しいことに、色の情報として「Luminance Value」が見られる。これは（おそらく）、色をグレー・スケールにした時の明るさですね。「55% LUM」といった感じで表示されます。

Luminance Value を調べると、たとえ HLS の L 値が同じでも、赤は暗く・緑は明るい。色を決める時には、この点を頭に置いておく必要があります。

HSL Color Schemer ツールなどでも、この Luminance を考慮したグラデーションが見られたら良いのになぁ……。