https://ja.wikipedia.org/wiki/%E8%89%B2%E5%B7%AE
Wikipediaによると CIEDE2000 (delta E00) が精度がいいらしく
CIEDE2000 で検索したら
https://qiita.com/hachisukansw/items/860f061a2ab7a4f2d06f
このサイトがヒットしたのでコードをお借りして
以下のようなテストコードを書いてみました
ただ一番最後が距離34で上2つより距離が離れてるんですが
自分の目には一番色が似ているように見えてしまいます
視覚の個人差やモニタの補正等のせいなのか
テストコードが間違ってるんでしょうか…
信頼度の高いライブラリがあれば教えていただきたいです
java javascript ruby python あたりだと嬉しいです
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<style>
div {
display: inline-block;
width: 40px;
height: 40px;
}
</style>
<body>
</body>
<script>
function rgbToLab(r,g,b) {
//https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
var r = r / 255;
var g = g / 255;
var b = b / 255;
r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
var x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);
var y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);
var z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);
//https://en.wikipedia.org/wiki/Lab_color_space#CIELAB-CIEXYZ_conversions
var L;
var a;
var b;
x *= 100;
y *= 100;
z *= 100;
x /= 95.047;
y /= 100;
z /= 108.883;
x = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (4 / 29);
y = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (4 / 29);
z = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (4 / 29);
L = (116 * y) - 16;
a = 500 * (x - y);
b = 200 * (y - z);
return [L, a, b];
}
function ciede2000(L1,a1,b1, L2,a2,b2, kL=1,kC=1,kH=1) {
//http://en.wikipedia.org/wiki/Color_difference#CIEDE2000
var radianToDegree = function(radian) {return radian * (180 / Math.PI);};
var degreeToRadian = function(degree) {return degree * (Math.PI / 180);};
var deltaLp = L2 - L1;
var L_ = (L1 + L2) / 2;
var C1 = Math.sqrt(Math.pow(a1, 2) + Math.pow(b1, 2));
var C2 = Math.sqrt(Math.pow(a2, 2) + Math.pow(b2, 2));
var C_ = (C1 + C2) / 2;
var ap1 = a1 + (a1 / 2) *
(1 - Math.sqrt(
Math.pow(C_, 7) /
(Math.pow(C_, 7) + Math.pow(25, 7))
)
);
var ap2 = a2 + (a2 / 2) *
(1 - Math.sqrt(
Math.pow(C_, 7) /
(Math.pow(C_, 7) + Math.pow(25, 7))
)
);
var Cp1 = Math.sqrt(Math.pow(ap1, 2) + Math.pow(b1, 2));
var Cp2 = Math.sqrt(Math.pow(ap2, 2) + Math.pow(b2, 2));
var Cp_ = (Cp1 + Cp2) / 2;
var deltaCp = Cp2 - Cp1;
var hp1;
if (b1 == 0 && ap1 == 0) {
hp1 = 0;
} else {
hp1 = radianToDegree(Math.atan2(b1, ap1));
if (hp1 < 0) {hp1 = hp1 + 360;}
}
var hp2;
if (b2 == 0 && ap2 == 0) {
hp2 = 0;
} else {
hp2 = radianToDegree(Math.atan2(b2, ap2));
if (hp2 < 0) {hp2 = hp2 + 360;}
}
var deltahp;
if (C1 == 0 || C2 == 0) {
deltahp = 0;
} else if (Math.abs(hp1 - hp2) <= 180) {
deltahp = hp2 - hp1;
} else if (hp2 <= hp1) {
deltahp = hp2 - hp1 + 360;
} else {
deltahp = hp2 - hp1 - 360;
}
var deltaHp = 2 * Math.sqrt(Cp1 * Cp2) * Math.sin(degreeToRadian(deltahp) / 2);
var Hp_;
if (Math.abs(hp1 - hp2) > 180) {
Hp_ = (hp1 + hp2 + 360) / 2
} else {
Hp_ = (hp1 + hp2) / 2
};
var T = 1 -
0.17 * Math.cos(degreeToRadian(Hp_ - 30)) +
0.24 * Math.cos(degreeToRadian(2 * Hp_)) +
0.32 * Math.cos(degreeToRadian(3 * Hp_ + 6)) -
0.20 * Math.cos(degreeToRadian(4 * Hp_ - 63));
var SL = 1 + (
(0.015 * Math.pow(L_ - 50, 2)) /
Math.sqrt(20 + Math.pow(L_ - 50, 2))
);
var SC = 1 + 0.045 * Cp_;
var SH = 1 + 0.015 * Cp_ * T;
var RT = -2 *
Math.sqrt(
Math.pow(Cp_, 7) /
(Math.pow(Cp_, 7) + Math.pow(25, 7))
) *
Math.sin(degreeToRadian(
60 * Math.exp(-Math.pow((Hp_ - 275) / 25, 2))
));
return Math.sqrt(
Math.pow(deltaLp / (kL * SL), 2) +
Math.pow(deltaCp / (kC * SC), 2) +
Math.pow(deltaHp / (kH * SH), 2) +
RT * (deltaCp / (kC * SC)) * (deltaHp / (kH * SH))
);
}
//////////////////////////
// ここまではりつけただけ
//////////////////////////
const r = (c) => (c >> 16) & 0xff;
const g = (c) => (c >> 8) & 0xff;
const b = (c) => c & 0xff;
const diff = (c1, c2) => {
const [L1, a1, b1] = rgbToLab(r(c1), g(c1), b(c1));
const [L2, a2, b2] = rgbToLab(r(c2), g(c2), b(c2));
return ciede2000(L1,a1,b1, L2,a2,b2);
}
const cssColor = c => 'rgb(' + r(c) + ',' + g(c) + ',' + b(c) + ')';
$('body').append($('<div>').css('background-color', cssColor(16751872)));
$('body').append($('<div>').css('background-color', cssColor(16711680)));
$('body').append($('<p>').text(diff(16751872, 16711680)));
$('body').append($('<br>'));
$('body').append($('<div>').css('background-color', cssColor(0xd62728)));
$('body').append($('<div>').css('background-color', cssColor(0x8c564b)));
$('body').append($('<p>').text(diff(0xd62728, 0x8c564b)));
$('body').append($('<br>'));
$('body').append($('<div>').css('background-color', cssColor(9702983)));
$('body').append($('<div>').css('background-color', cssColor(7291136)));
$('body').append($('<p>').text(diff(9702983, 7291136)));
</script>
https://qiita.com/shinido/items/2904fa1e9a6c78650b93
あとこちらの java 版のサイトもあったので以下のような同じ色の差分を計算をしてみたんですが
javascript 版と数値が違いますがやはり最後が一番差が大きいと出てしまいます
public class Test {
public static void main(String[] args) throws Exception {
ColorDifference cd = new FastCIE2kDif();
//ColorDifference cd = new CIE2kDifference();
DColor c1, c2;
double diff;
c1 = new DColor(16751872);
c2 = new DColor(16711680);
diff = cd.difference(c1, c2);
System.out.println(diff);
c1 = new DColor(0xd62728);
c2 = new DColor(0x8c564b);
diff = cd.difference(c1, c2);
System.out.println(diff);
c1 = new DColor(9702983);
c2 = new DColor(7291136);
diff = cd.difference(c1, c2);
System.out.println(diff);
}
}
実行結果
> java Test
0.48409231292165805
0.16428244693415858
0.5751661393465889