配色に便利なウェブ・サイトやソフトウエア

glasses
(色という色を──飲み尽くせ!)

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

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

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

Accessible Color Palette Evaluator

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

ColorDrink
(これもクリックで画像が拡大)

妖精館 [ Windows SoftWare ]: ColorDrink

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

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

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

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

HSL Color Schemer

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 色になるわけですが──、とても同じような色の変化には見えません。具体的には、緑色の付近では似た色が並んでいる

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

色域 - Wikipedia

上で紹介した 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 を考慮したグラデーションが見られたら良いのになぁ……。

[2] このページの一番上へ戻る