カラーコンバーター

仕組み

HEX値は正規表現で2桁ずつ3組に分割され、16進数としてR・G・Bそれぞれ0〜255の値にパースされます。HSLは標準的な計算式に従います。明度は最大チャンネルと最小チャンネルの平均、彩度はその差を明度が両極端にどれだけ近いかでスケーリングした値、色相はどのチャンネルが優勢かによって決まり、赤・緑・青をそれぞれ0度・120度・240度に固定し、残り2チャンネルから正確な角度を補間します。CMYKは単純な変換式を使用します。K(黒)は最も強いチャンネルを1から引いた値、C・M・Yはそれぞれ黒を差し引いた後に足りない分として算出され、純粋な黒はゼロ除算を避けるため特別扱いされます。4つの出力値はすべて読みやすさのために整数に丸められるため、変換を繰り返すと数値が少しずつずれることがあります。

このCMYK値についての注意点です。これは出発点であって、印刷そのものの正解ではありません。画面の色はsRGBで定義されており、それをインクの被覆率へ正しく変換するには、特定の印刷機・インク・用紙を記述したICCカラープロファイルが本来必要です。ここで使われている式は現実には存在しない理想的なインクを前提としており、鮮やかなオレンジや電光ブルーなど画面上の彩やかな色の多くは、コート紙で再現できる範囲の外にあります。印刷会社はどのみち自社のプロファイルで再変換するため、このツールのCMYK値は意図を伝える目安として使い、プルーフは画面より少しくすんで見えると考えておいてください。

上記の計算はすべてこのページ内の小さな関数で完結しており、色を選ぶたびにローカルな演算とDOM更新が走るだけです。開発者ツールの「ネットワーク」タブを見れば、何も送信されていないことを確認できます。