色差アルゴリズムの違いをビジュアル化してみた #JavaScript

２つの色の知覚的な差を定量化するアルゴリズムがいつくか公開されていて、このアルゴリズムを使って計算すると色の違いを数量化することができます。値が小さければ小さいほど似て（又は同じ色）に見え、大きければ大きいほど異なって見えるということらしいです。

以前Color difference（Wikipedia）で公開されていた色差を求める計算式をJavaScriptで作ってみたことがあったので、それぞれの結果の違いをビジュアル化してみました。

色差計算およびカラーサンプル作成に使ったHSVからRGBに変換するスクリプトはページの最後にリンク先を載せていますので、間違っている等、お気づきのところがあったら教えてくれると助かります。

どうやってビジュアル化する？

以下のようなHSVカラーサンプルを作って、それを変換することで確認してみたいと思います。

変換先の色として私でもイメージできそうな以下の13色（赤、橙、黄、黄緑、緑、青、紫、桃、白、黒、灰、茶、水）を用意しました。

それをJavaScriptで定義するとこんな感じ。

色の指定

let colorNames = [
    {name:"赤", reading:"あか", hex:"#e60033"},
    {name:"橙", reading:"だいだい", hex:"#ee7800"},
    {name:"黄", reading:"きい", hex:"#ffd900"},
    {name:"黄緑", reading:"きみどり", hex:"#b8d200"},
    {name:"緑", reading:"みどり", hex:"#3eb370"},
    {name:"青", reading:"あお", hex:"#0095d9"},
    {name:"紫", reading:"むらさき", hex:"#884898"},
    {name:"桃", reading:"もも", hex:"#f09199"},
    {name:"白", reading:"しろ", hex:"#ffffff"},
    {name:"黒", reading:"くろ", hex:"#2b2b2b"},
    {name:"灰", reading:"はい", hex:"#7d7d7d"},
    {name:"茶", reading:"ちゃ", hex:"#965042"},
    {name:"水", reading:"みず", hex:"#bce2e8"}
]

プログラムとしては用意した13色の中で最も近い（差が小さい）色を探し、その色に置き換えていくという感じです。以下はそのサンプルです。サンプルなのでrgbからLabへの変換や色差を求めるプログラムは含めていませんので、このままでは動きません。それらの情報はページの最後に載せているリンクを参考にしてください。またテキストからPNGへの変換については「ImageMagickで画像を座標＋RGB値のテキストに変換する、またその逆」を参考にしてください。

変換（サンプル）

//rgbとlabを計算
for (let o of colorNames) {
    o.rgb = [
            parseInt(o.hex.substring(1,3), 16),
            parseInt(o.hex.substring(3,5), 16),
            parseInt(o.hex.substring(5,7), 16)
    ];
    o.lab = rgbToLab(...o.rgb);
}

//カラーサンプルを作成
let colorSample = [];
for(let s=1;s<=100;s++) {
    for(let h=0; h<360; h++){
        let o = {x:h, y:s-1, rgb:hsvToRgb(h, s/100, 1)};
        o.lab = rgbToLab(...o.rgb);
        colorSample.push(o);
    }
}

//最も近い色で変換
for (let o of colorSample) {
    o.euclidean = colorNames.map(p=>[p, euclidean(...p.rgb, ...o.rgb)]).reduce((a,b)=>a[1]<b[1]?a:b)[0];
    o.cie76 = colorNames.map(p=>[p, cie76(...p.lab, ...o.lab)]).reduce((a, b)=>a[1]<b[1]?a:b)[0];
    o.cie94 = colorNames.map(p=>[p, cie94(...p.lab, ...o.lab)]).reduce((a, b)=>a[1]<b[1]?a:b)[0];
    o.ciede2000 = colorNames.map(p=>[p, ciede2000(...p.lab, ...o.lab)]).reduce((a, b)=>a[1]<b[1]?a:b)[0];
}

//保存
let fs = require('fs');
let imageText = []
imageText.push("# ImageMagick pixel enumeration: 360,500,255,srgb");

for (let o of colorSample) {
    imageText.push(`${o.x},${o.y      }: (${o.rgb.join(",")})`);
    imageText.push(`${o.x},${o.y + 100}: (${o.euclidean.rgb.join(",")})`);
    imageText.push(`${o.x},${o.y + 200}: (${o.cie76.rgb.join(",")})`);
    imageText.push(`${o.x},${o.y + 300}: (${o.cie94.rgb.join(",")})`);
    imageText.push(`${o.x},${o.y + 400}: (${o.ciede2000.rgb.join(",")})`);
}

fs.writeFileSync('diff.txt', imageText.join("\n"));

//実行後 convert diff.txt diff.png でPNG形式に変換。

それではGO!

Euclidean（ユークリッド）

もっとも単純そうな計算式です。３次元での距離を求める計算式と似ています。

（「Color difference」（5 Feb 2017, at 02:30. UTC）『ウィキペディア』より引用）

CIE76

計算式は以下のようになっています。

（「Color difference」（5 Feb 2017, at 02:30. UTC）『ウィキペディア』より引用）

式はユークリッドとほとんど同じにみえるのですがRGBではなくLabが使われています。Lab色空間はLab color space - Wikipediaに情報があるのですが、XYZ色空間からの変換方法しか書かれていません。そしてsRGB - WikipediaにはRGBからXYZ色空間への変換方法が書かれています。つまりRGB→XYZ→Labという計算を行わないと計算が行えないことになります。で計算した結果が以下のとおりです。