記事
Web向けのカラーツール：hex、パレット、アクセシビリティ
Web サイトの色を選ぶのは簡単に見えますが、同じものを別々の方法で表す hex コード、RGB の三つ組、HSL の角度に直面すると話は変わります。この記事では、これらの形式がどう関係しているか、ひとつのブランドカラーを使えるパレットに変える方法、そして色の見え方が異なる人にも結果が読みやすいままになるよう確かめる方法を解説します。
hex、RGB、HSL は同じ色を表す
画面上の色は赤、緑、青の光を混ぜて作られます。hex 表記はこの三つのチャンネルを #2563eb のような六文字のコードで書き、各二文字の組が 00 から ff までの一つのチャンネルを表します。RGB は同じ三つの数値を 0 から 255 の十進数で書くもので、読みやすいだけで意味は変わりません。HSL は別の見方をとります。色を色相（カラーホイール上の 0 から 360 度の位置）、彩度（どれだけ鮮やかか）、明度（白や黒にどれだけ近いか）で表します。明度を上げたり色相をずらしたりするのが、三つの結びついた数値ではなく一つの直感的な変更で済むため、色を少し調整したいときにデザイナーが手に取る形式が HSL です。コンバーターを使えばこの三つを行き来でき、ある形式で読んだ値を別の形式で使えます。
ひとつの色をパレットに変える
ブランドカラーが一つだけでは足りないことがほとんどです。実用的なパレットには通常、メインの色、一つか二つのアクセント、そしてテキストや背景に使う中間的なグレーの一式が必要です。色どうしの関係はカラーホイール上の単純な規則に従います。補色は互いに向かい合い、類似色は穏やかな印象のために隣り合い、トライアド配色は三つの色を均等に広げて、ぶつかることなくコントラストを生みます。配色ツールはこれらの規則を出発点の色に当てはめ、対応する hex コードを返すので、角度を手計算する必要はありません。気に入った雰囲気の画像がすでにあるなら、パレット抽出ツールがそこから主要な色を読み取ります。写真やロゴをもとにサイトを組み立てる手早い方法です。
コントラストと色覚異常
自分の画面で見栄えのするパレットでも、読み手にとってはうまくいかないことがあります。およそ男性の十二人に一人、女性の二百人に一人が何らかの色覚の特性を持ち、最も多いのは赤と緑を見分けにくいというものです。エラーを示す唯一の手がかりが緑のボタン上の赤い文字なら、こうした読み手はそれを見落とします。解決策は色を避けることではなく、色だけに頼らないことです。アイコンやラベル、形と組み合わせ、テキストとその背景の間に十分な明度の差を保ちます。色覚シミュレーターは、一般的な色覚のタイプでパレットがどう見えるかを示すので、苦情が来てからではなく公開する前に問題に気づけます。
これらすべてをブラウザーで行う
これらの手順にサーバーは必要ありません。hex コードの変換、配色の生成、画像からの色の読み取り、色覚異常のシミュレーションは、いずれもブラウザーが瞬時にこなす小さな計算です。これは、抽出元の画像が未公開のデザインやクライアントのロゴであるときに重要です。ここにあるツールでは、ファイルは自分の端末に残り、何もアップロードされません。作品を渡すことなく、オンラインサービスと同じ結果が得られます。カラーコンバーター、配色ジェネレーター、パレット抽出ツール、色覚シミュレーターはすべてローカルで動き、ページの読み込みが済めばオフラインでも同じように使えます。
OKLCHとより広い色空間
Hex、RGB、HSLはいずれも、これまでのスクリーンが使ってきたsRGBガモット内の色を表します。新しいディスプレイはより広い色域を表示でき、CSSではcolor()関数とDisplay P3空間を使ってその色域に到達できるようになっています。Display P3は、sRGBでは表現できない鮮やかな緑や赤を追加します。より大きな変化はOKLCHです。OKLCHは、色を輝度（lightness）、彩度（chroma）、色相（hue）で記述する方式で、人間の目が実際に明るさを知覚する仕組みに対応しています。HSLでは、同じ50%の輝度を持つ黄色と青は見た目が全く異なります。黄色は明るく見え、青は暗く見えます。OKLCHでは、輝度を固定して色相だけを変えても、知覚される明るさが一定に保たれます。これにより、1つの数値を固定するだけで全シェードが同じコントラスト目標を達成するパレットを構築できるため、各色を手作業で調整する必要がなくなります。
この記事で紹介するツール
よくある質問
hex と RGB の違いは何ですか。
どちらも同じ色を書き表す二つの方法です。hex は赤、緑、青のチャンネルを 16 進数の六文字のコードにまとめ、RGB は同じ三つのチャンネルを 0 から 255 の十進数で並べます。#ff0000 と rgb(255, 0, 0) はまったく同じ赤です。hex はコンパクトで CSS やデザインファイルでよく使われ、RGB はひと目で読みやすく、両者の変換で色そのものは何も変わりません。
自分の色が色覚異常のユーザーに読みやすいかどうかを、どう確かめればよいですか。
パレットを色覚シミュレーターに通してください。一般的な各タイプの色覚を持つ人に見えるように、色を描き直してくれます。同じ濃淡に潰れてしまう組み合わせ、とくに赤と緑に注意してください。最も安全な習慣は、色を唯一の手がかりにしないことです。テキストやアイコン、模様で裏づけ、前景と背景の間に明確な明度の差を保てば、色相が伝わらなくても意味は残ります。