カラーコード変換

HEXとRGBは同じものを別の書き方にしただけです。`#663399` は十六進数の二桁が三組 — 102、51、153 — であり、`rgb(102 51 153)` はその数を十進数で書いたものです。基数が変わるだけなので、変換で失われるものはありません。

HSLとHSVは、同じ色を画面の側からではなく人の側から記述します。赤・緑・青をどれだけ混ぜるかではなく、色相を色相環上の角度として与え、次に彩度と明度を与えます。デザイナーがこれを使うのはそのためです。色を一割明るくするのは、HSLでは数値ひとつ、RGBでは意味の読めない数値三つになります。

このページのそれ以外は、同じ三つの数を並べ替えたものです。CMYKは違います。紙の上のインクを表すものであり、シアン・マゼンタ・イエロー・ブラックの配合が実際にどう見えるかは、印刷機と紙とカラープロファイルによって決まります。どんな計算式もそれらを知りません。

ここで得られるのは、プロファイルを尋ねずにCMYKを出すツールがみな行っている、標準的な名目上の変換です。当たりをつけるには十分で、印刷用の指定値にはなりません。色が本当に重要なら、印刷所はHEXを求め、自社のプロファイルで分版します。

アルファは引き継がれます。`#663399cc`、`rgba(102, 51, 153, 0.8)`、`rgb(102 51 153 / 80%)` はいずれも不透明度80%の同じ色で、三つとも正しく読まれます。八桁のHEXは目にする機会がもっとも少なく、多くのツールがつまずく形式ですが、実際には六桁の形式に不透明度用の四組目を足しただけのものです。

CMYKに対応するものはありません。インクは紙に乗るか乗らないかのどちらかだからです。入力した色が部分的に透明な場合、CMYKの数値はそれを不透明なものとして表します。

表記の下にある二つの数値は、その色の白に対する、そして黒に対するコントラスト比です。WCAGの定義に基づくもので、単純な明るさの平均ではありません。目は青より緑にはるかに敏感なため各チャンネルには重みが付き、いずれも事前に線形化されます。

実際の用途は、背景にどの文字色を載せるかの判断です。本文には4.5、大きな見出しには3がしきい値なので、良いほうの比が4.5を下回る背景は、文字を大きくするか背景を変える必要があります。デザイン案では良く見えるブランドカラーがアクセシビリティ検査を通らないと気づく、いちばん早い方法です。

読み取れない色は、黙って置き換えられるのではなく、読めないものとして報告されます。当たり前に聞こえますが、実際には珍しいことです。このページを作る一般的な方法は、文字列をブラウザに渡して計算結果を読み返すというもので、四行で済むかわりに `#12345` に対して直前の色を返します。

そのため桁の抜けが変換の成功のように見え、別の場所で色が合わないときにようやく気づきます。ここでは明示的に解析します。CSSの色名百四十八個の表を持つ費用と引き換えに、もっともらしい誤答ではなくエラーが返ります。