カラーツール
これらのカラーツールは、近似式ではなく実際のカラーサイエンスの式を使って、ブラウザ内で色の変換・比較・生成を行います。sRGBの実際の伝達関数、WCAG 2.xの相対輝度、知覚に関わる計算にはOKLab、色覚特性のシミュレーションにはMachadoの行列です。データはどこにも送信されず、表示される数値はすべて手計算で検証できます。
変換
ブラウザベースのカラーツールはどんなときに使うべきですか？
カラーツールには特異な失敗モードがあります。壊れたPDFツールは壊れたPDFを出力するので、すぐに分かります。静かに誤っているカラーツールは、もっともらしい数値を出します。それをスタイルシートに貼り付けても、何も教えてはくれません。ブラウザも、ビルドも、レビューもです。低い視力の人があなたのボタンを読めない、あるいは印刷されたパンフレットのブランドブルーがわずかに違って届くまで。
誤りは具体的で、繰り返し現れます。sRGBの実際の区分的伝達関数を使わずにチャンネルを2.2乗する。すべてのコントラスト比がわずかにずれ、境界線上の組み合わせは合否が反転します。色相の式で剰余を飛ばす。色空間の6分の1が負の角度を報告します。半透明の前景を何もない背景に合成し、画面に一度も現れない色のコントラスト比を報告する。HSLの明度を順に刻んでパレットを生成する。どれも、まったくもっともらしい出力を生みます。
そのためここの計算は、出回る近似式ではなく仕様に沿って書かれています。コントラストは区分的伝達関数を用いたWCAG 2.xの相対輝度で、アルファを実際の背景に合成した後で計算します。知覚に関わるものすべて（スケール、混色、グラデーション、合格できる最接近色）はOKLabで計算します。OKLabはLabの概念の2020年改訂版で、旧来の色空間が抱えていた青系色相のずれをようやく解消したものです。色覚シミュレーションには、Machado、Oliveira、Fernandesの行列をガンマエンコードされた値ではなくリニアRGBに適用します。ここに、シミュレーションと色の溶けた絵との違いがあります。
ツールは推測も拒みます。5桁のhexは色ではなくタイプミスなので、それらしい値に補完するのではなく拒否します。誤った入力に黙って黒を返すコンバーターは、疑う理由のない色見本を手渡してくるに等しいのです。変換がどうしても正確になれない場合（印刷プロファイルのないCMYK、sRGBの色域外のOKLCH座標）、正確な数値と同じ自信で数値を出力するのではなく、ページがその旨を伝えます。
どれもサーバーを必要としません。色の変換は3つの数値に対する数十行の算術であり、画像のシミュレーションはブラウザがすでに持っているcanvas上のループです。このサイトのContent-Security-Policyはconnect-src 'self'を設定しているため、シミュレーターに投入したブランドパレットや未公開のスクリーンショットは、ここで送信を試みるものがあったとしても、タブの外に出られません。
どこから始めるか。1つの色とそのトーン全体にはカラーピッカー、組み合わせがAAを通る必要があるときはコントラストチェッカー、形式間の移動にはカラーコンバーター、名前のついた色のhex値を調べるにはカラーコード、そして、あなたと同じように赤と緑を見られない12人に1人程度の男性から見たインターフェースの姿には色覚テストを。
よくある質問
CSSでは実際にはどの色形式を使うべきですか？
一度入力して二度と触れない値にはHex。コンパクトで、どこでも通じ、劣化しないためです。人が手で編集する値にはHSL。「少し暗く」「彩度を下げて」が数値1つの変更で済むからです。プログラムが色を計算する場合（生成されるスケール、グラデーション、補間されたhover状態）にはOKLCH。3つのうち明度の数値が目の報告と一致するのはOKLCHだけで、等間隔の数値は見た目にも等間隔になります。
同じhexなのに、ツールが違うとHSLの値が違うのはなぜですか？
ほとんどの場合、意見の違いではなく丸めの問題です。通常の書き方のHSL（整数の色相と0.1%刻みの彩度・明度）が保持できる値の数は、hexが表現できる1,670万より少ないため、複数のhex値が同じHSLに縮退し、逆変換は式が生成した値に落ち着きます。ツールが本当に異なるのはグレーの報告方法です。彩度がゼロの色の色相は未定義で、0を出力するものもあれば、計算で出た値をそのまま出力するものもあります。
ここのコントラスト比は、Lighthouseが使っているものと同じですか？
はい。WCAG 2.xの式です。sRGBの区分的伝達関数で各チャンネルをリニア化し、0.2126、0.7152、0.0722で重み付けし、両方の輝度に0.05を足して、大きい方を小さい方で割ります。自作実装で最も多い誤りは、代わりにチャンネルを2.2乗することです。近い値にはなりますが、比がずれるため、境界線上の組み合わせが合格から不合格へ反転することがあります。横に表示されるAPCAの数値はまったく別のモデルで、参考情報であり、適合を主張できる規格ではありません。
印刷用途で、Webツールが出すCMYKの数値を信頼できますか？
出発点としては信頼できますが、仕様としては無理です。CMYKはデバイス依存です。同じsRGBの色でも、コート紙と非コート紙ではインクの割合が変わり、プリスやインクが異なる印刷機ではまた変わります。ICCプロファイルがエンコードしているのはそのことであり、あなたのプリンター用のプロファイルを持つWebページは存在しません。印刷会社にはsRGBかPantoneの参照色を渡し、その案件用のプロファイルで変換してもらってください。
オンラインの色覚テストはどのくらい正確ですか？
スクリーニングの目安であって、診断ではありません。臨床の結果は、校正済みディスプレイと制御された照明の下でのアノマロスコープから得られるものであり、その条件はどれもあなたの机の上にはありません。オンラインテストが正直にできるのは、典型的な色覚の人と同じ図形が読めているかを示すことであり、追跡検査に値するかどうかの判断には十分です。ここのプレートは、権利で保護されたプレート一式をスキャンしたのではなく、シミュレーションで見つけた混同ペアから生成しています。これにより、よくあるオンライン版の最大の誤差要因——1917年版の印刷物のJPEGが再圧縮され、スキャナーの色精度のままであること——が取り除かれます。
ここの色の濃淡は、他で作ったものより均等に見えるのはなぜですか？
HSLの明度を順に刻む代わりにOKLChで生成しているからです。人間の視覚は緑を青の約10倍重み付けするのに、HSLは3つのチャンネルを等しく扱います。そのため同じ数値でも、HSLで作ったランプは黄色系で明るく、青系で暗く見えます。OKLChの明度をカーブに沿って刻み、色相を保ち、両端で彩度を絞れば、測定値のとおりに見える段階が得られます。さらに各段階はsRGBの色域内へクランプして戻されるため、単色にクリップされた平坦な色として描画されることはありません。