画像から色を取得

画像から色を取り出すのは本来 OS がやるべき類いの作業ですが、ほとんどの場合やってくれません。欲しい色は壁の写真の中、グラフのスクリーンショットの中、誰かが JPEG で送ってきたロゴの中にあり、必要なのはスタイルシートに貼り付けられる 16 進数 6 桁です。

ピクセルを指定するのは簡単な方の半分です。ピクセルを読む前に、画像を等倍で、かつスムージングを切って描画します。細かすぎる話に聞こえますが、そうではありません。スムージングが有効だとブラウザはそのピクセルと周囲のピクセルを混ぜた値を返すので、得られる色は画像に一度も存在しなかった色になり、貼り付けても一致しません。

パレットは難しい方の半分で、標準的な手法にはよく知られた欠陥があります。メディアンカットは色を箱に分け、教科書はそのあと各箱の平均を取ります。パレットツールが原画のどこにも存在しない濁った茶色を出すのはこのためです。赤い花と緑の葉の平均は泥だからです。ここでは各色を、その箱の中心に最も近い実在のピクセルとしています。ですから提示される色はすべて、あなた自身が指定できたはずの色です。割合は別に計算します。各ピクセルがどの色に最も近いかを調べるのです。メディアンカットは意図的に各箱へ同じ数のピクセルを配るので、それを割合として読むと、どう見ても大半が空の写真について、どの色も同じだけ占めていると主張することになります。

そして、これらが使い物になるかを決める数値があります。写真から取った色はたいてい文字の背景になり、それが成立するかは測れます。白と黒それぞれに対する WCAG コントラスト比で、しきい値も示します。ロゴでは美しく見えるブランドカラーが、白の上では 2.8:1 ということはよくあります。これは後から気づくのではなく、意図して決めたい事柄です。