カラーピッカー

このページの色はすべて sRGB で扱っています。sRGB は、1990年代後半にブラウザが採用して以来、Web の標準色空間となっているものです。画面は赤・緑・青の光を混ぜて色を作り、各チャンネルは256段階（0–255）で、合計16,777,216色になります。RGB はこの3つの数値をそのまま表記したものです。HEX は同じ3つの数値を16進数で、各2桁ずつ表記したもので、たとえば #FF6600 は赤255、緑102、青0です。3桁の省略形は各桁を2回繰り返したもので、#F60 は #FF6600 と同じ色です。

HSL と HSB（HSVとも呼ばれます）は、同じ色を手作業で調整しやすい形で表したものです。色相は色相環上の角度で、0°が赤、120°が緑、240°が青です。違いは最後の数値にあります。HSL では明度100%は常に白で、50%がその色相のもっとも純粋な色です。HSB では明度100%がその色相の純色で、白にするには彩度を0%にする必要があります。Photoshop や Figma などのデザインアプリはピッカーに HSB を使い、CSS は hsl() を標準でサポートしているため、上では両方を表示しています。

画面は光を加えて色を作りますが、プリンターはシアン・マゼンタ・イエロー・ブラックのインクで光を差し引いて色を作ります。この2つの方式は再現できる色の範囲（色域）が異なります。鮮やかなRGBの緑、電気的な青、蛍光オレンジのように彩度の高い画面上の色は、通常のインクでは再現できない範囲にあるため、モニターで見るよりくすんで印刷されます。

ここに表示するCMYKの数値は、ICCプロファイルを使わない単純な数式による変換です。おおよその指示には便利ですが、本番の印刷には向きません。印刷会社は用紙と印刷機に合ったプロファイル（欧州の FOGRA39、米国の GRACoL など）で変換するため、同じRGBの色でもプロファイルごとにインクの割合は変わります。印刷用途では、RGBまたはHEXの値と、印刷会社が指定するプロファイルを一緒に渡してください。

WCAG 2.1 では、2色の相対輝度を比較します。明るいほうに0.05を足した値を、暗いほうに0.05を足した値で割ります。結果は1:1（同じ色）から21:1（白地に黒）までの範囲になります。レベルAAでは、通常のテキストに 4.5:1 以上、大きなテキスト（18ポイント、または太字の14ポイント）に 3:1 以上が必要です。レベルAAAではそれぞれ7:1と4.5:1に引き上げられます。入力欄の枠線やアイコンなどのUI部品は、達成基準1.4.11により、周囲に対して3:1が必要です。

輝度の計算では、人の目がもっとも敏感な緑が青よりはるかに大きく重みづけされます。そのため、白地に黄色の文字は大きく基準を下回り、白地に濃い青は簡単に基準を満たします。どちらも彩度の高い色に見えるのにです。ロゴや純粋に装飾目的のテキストは、この基準の対象外です。

画像パレットは、ブラウザのキャンバスでファイルを読み取り、長辺が最大200ピクセルになるよう縮小して、1982年に Paul Heckbert が示したメディアンカット法で似たピクセルをグループ化します。色の範囲をもっとも幅の広いチャンネルに沿って6グループになるまで分割し続け、各グループの平均色がスウォッチになります。透明なピクセルは無視されるため、透明背景のロゴならロゴ本来の色が取得されます。

色を取得したあと、フラットなロゴはベクターにしたほうが扱いやすいことがよくあります。画像SVG変換なら、これらの色をそのまま保った図形としてトレースできます。また、チャンネルヘッダーを作る場合は、YouTubeバナーのサイズ変更で、セーフエリアを考慮しながらアートワークを2560 × 1440に合わせられます。