配色に便利なウェブ・サイトやソフトウエア
ウェブ・デザインの中でも、とくに配色は むずかしい。「このサイトのイメージ・カラー」みたいに一色だけ決めれば良いのなら簡単ですが、色は組み合わせることで生きてくるのです。
昨日の記事で紹介した Solarized のように、使いやすいカラーリングをビシッ！ と作りたい。
今回は、配色を助けてくれるツールたちを紹介します。なかなかマニアックで楽しいヤツらですよ！
Accessible Color Palette Evaluator
NCSU IT Accessibility Resources
背景色と文字色とのコントラスト比が WCAG 2.0 基準（W3C 勧告）に適合しているかどうかを、複数の色を指定して確認できるサイトです。昨日も軽く紹介しましたね。
設定した色の状態を URL （パーマリンク）で保存できて便利です。Solarized の 16 色を設定したカラー・パレットをご覧ください。
左側に並んだ色のパレットをクリックすると、右側に配合の結果が表示される。WCAG 2.0 基準に適合・不適合した結果は、「PASS / FAIL」で分かります。けっこう厳しいので、参考までにどうぞ。
左下の「Back to palette creator」をクリックすると、色を指定する場面に移動します。受け付ける文字列は「RRGGBB」か「RGB」形式・カンマ区切りのみで、たとえば「#RRGGBB」と「#」が入っているとエラーになる。
どちらかと言うと、一行の URL で複数の色を見てもらうという用途に便利で、WCAG 2.0 うんぬんは、ほかのツールが良さそうに感じました。
ColorDrink
妖精館 [ Windows SoftWare ]: ColorDrink
数多くの配色を管理できる Windows 用アプリケーションです。設定した色は色相環の上に配置され、色と色との関係を客観的に見られる。
選んだ色たちは、一度に彩度や明度の変更が可能です。手軽にカラー・バリエーションが増やせますね。
ColorDrink 専用のプラグインで機能を拡張できることも特長です。とくに 色の情報をテキスト形式で出力する OutText は ありがたい。ほかのツールへ手軽にデータを渡せます。
また、前回の記事で取り上げた ColorDialogPlus と作者が同じで、配色の設定ファイルを流用できる。両方とも必携のツールですね！
HSL Color Schemer
HSL Color Schemer – color scheme by HSL to HEX color palette individual color codes
一見すると「よくある配色ツール」です。例によって、上のリンクから 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 を考慮したグラデーションが見られたら良いのになぁ……。