color_rgb = [
parseInt(color.slice(1, 3), 16) / 255,
parseInt(color.slice(3, 5), 16) / 255,
parseInt(color.slice(5, 7), 16) / 255
]
rgb_lrgb = {
function f(v) {
return v <= 0.04045
? v / 12.92
: ((v + 0.055) / 1.055) ** 2.4;
}
return function rgb_lrgb([r, g, b]) {
return [f(r), f(g), f(b)];
};
}
color_lrgb = rgb_lrgb(color_rgb)
matrix_lrgb_xyzd50 = [
0.4360747, 0.3850649, 0.1430804,
0.2225045, 0.7168786, 0.0606169,
0.0139322, 0.0971045, 0.7141733
]
function lrgb_xyzd50(rgb) {
return matrix_multiply_vector(matrix_lrgb_xyzd50, rgb);
}
color_xyzd50 = lrgb_xyzd50(color_lrgb)
matrix_lrgb_xyzd65 = [
0.4124564, 0.3575761, 0.1804375,
0.2126729, 0.7151522, 0.0721750,
0.0193339, 0.1191920, 0.9503041
]
matrix_xyzd65_xyzd50 = [
1.0478112, 0.0228866, -0.0501270,
0.0295424, 0.9904844, -0.0170491,
-0.0092345, 0.0150436, 0.7521316
]
matrix_multiply_vector(matrix_xyzd65_xyzd50, matrix_multiply_vector(matrix_lrgb_xyzd65, color_lrgb))
tristimulus_d50 = [
matrix_lrgb_xyzd50[0] + matrix_lrgb_xyzd50[1] + matrix_lrgb_xyzd50[2],
matrix_lrgb_xyzd50[3] + matrix_lrgb_xyzd50[4] + matrix_lrgb_xyzd50[5],
matrix_lrgb_xyzd50[6] + matrix_lrgb_xyzd50[7] + matrix_lrgb_xyzd50[8]
]
xyzd50_lab = {
function f(t) {
return t > ((6 / 29) ** 3)
? Math.cbrt(t)
: t / (3 * (6 / 29) ** 2) + (4 / 29);
}
return function xyzd50_lab([x, y, z]) {
const fx = f(x / tristimulus_d50[0]);
const fy = f(y / tristimulus_d50[1]);
const fz = f(z / tristimulus_d50[2]);
return [
116 * fy - 16,
500 * (fx - fy),
200 * (fy - fz)
];
};
}
color_lab = xyzd50_lab(color_xyzd50)
function rgb_lab(rgb) {
return xyzd50_lab(lrgb_xyzd50(rgb_lrgb(rgb)));
}
lab_xyzd50 = {
function f(t) {
return t > 6 / 29
? t ** 3
: 3 * (6 / 29) ** 2 * (t - 4 / 29);
}
return function lab_xyzd50([l, a, b]) {
const fl = (l + 16) / 116;
const fa = a / 500;
const fb = b / 200;
return [
tristimulus_d50[0] * f(fl + fa),
tristimulus_d50[1] * f(fl),
tristimulus_d50[2] * f(fl - fb)
];
};
}
inverse_xyzd50 = lab_xyzd50(color_lab)
matrix_xyzd50_lrgb = [
3.1338561, -1.6168667, -0.4906146,
-0.9787684, 1.9161415, 0.0334540,
0.0719453, -0.2289914, 1.4052427
]
function xyzd50_lrgb(rgb) {
return matrix_multiply_vector(matrix_xyzd50_lrgb, rgb);
}
inverse_lrgb = xyzd50_lrgb(inverse_xyzd50)
lrgb_rgb = {
function f(v) {
return v <= 0.0031308
? 12.92 * v
: 1.055 * (v ** (1 / 2.4)) - 0.055;
}
return function lrgb_rgb([r, g, b]) {
return [f(r), f(g), f(b)];
};
}
inverse_rgb = lrgb_rgb(inverse_lrgb)
inverse = `#${
Math.round(inverse_rgb[0] * 255).toString(16).padStart(2, "0")}${
Math.round(inverse_rgb[1] * 255).toString(16).padStart(2, "0")}${
Math.round(inverse_rgb[2] * 255).toString(16).padStart(2, "0")
}`
color
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
