Match sRGB to named color color-mix()Color matrix calculatorTowards reference ranges for unbounded color componentsChroma premultiplicationColor vision deficiency simulationHue interpolation fixupBlend modes in culoriNearest color, gazillion-colors editionNearest CSS named colorsChroma vs. RGB clamping for the CIELCh color spaceCulori scales testThe DIN99o Color SpaceColor difference formulas
Chromatic adaptation
Matrix multiplication helpers
RGB_to_XYZ = [
0.4123907992659593, 0.3575843393838780, 0.1804807884018343,
0.2126390058715102, 0.7151686787677560, 0.0721923153607337,
0.0193308187155918, 0.1191947797946260, 0.9505321522496607
];
XYZ_to_RGB = [
3.2409699419045226, -1.5373831775700939, -0.4986107602930034,
-0.9692436362808796, 1.8759675015077204, 0.0415550574071756,
0.0556300796969936, -0.2039769588889765, 1.0569715142428784
];
js
const RGB_to_XYZ_${Method.name} = ${print_matrix_js(
multiply(chromatic_adaptation(Method, SourceIlluminant, DestIlluminant), RGB_to_XYZ)
)};
/*
XYZ ${DestIlluminant.name} to
RGB ${SourceIlluminant.name}
*/
const XYZ_${Method.name}_to_RGB = ${print_matrix_js(
multiply(XYZ_to_RGB, chromatic_adaptation(Method, DestIlluminant, SourceIlluminant)
))};
Supporting functions
Matrices = [{
name: 'XYZ Scaling',
matrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
}, {
name: 'Von Kries',
matrix: [0.4002400, 0.7076000, -0.0808100, -0.2263000, 1.1653200, 0.0457000, 0, 0, 0.9182200]
}, {
name: 'Bradford',
matrix: [0.8951000, 0.2664000, -0.1614000, -0.7502000, 1.7135000, 0.0367000, 0.0389000, -0.0685000, 1.0296000],
inverse: [0.9869929, -0.1470543, 0.1599627, 0.4323053, 0.5183603, 0.0492912, -0.0085287, 0.0400428, 0.9684867]
}]
chromatic_adaptation = (method, source, dest) => {
let WS = tristimulus(source);
let WD = tristimulus(dest);
let m = method.matrix;
let m_inv = method.inverse || invert(m);
let LMS_Src = [
m[0] * WS.X + m[1] * WS.Y + m[2] * WS.Z,
m[3] * WS.X + m[4] * WS.Y + m[5] * WS.Z,
m[6] * WS.X + m[7] * WS.Y + m[8] * WS.Z
];
let LMS_Dest = [
m[0] * WD.X + m[1] * WD.Y + m[2] * WD.Z,
m[3] * WD.X + m[4] * WD.Y + m[5] * WD.Z,
m[6] * WD.X + m[7] * WD.Y + m[8] * WD.Z
];
let ratio = [
LMS_Dest[0] / LMS_Src[0], 0, 0,
0, LMS_Dest[1] / LMS_Src[1], 0,
0, 0, LMS_Dest[2] / LMS_Src[2]
];
return [...multiply(m_inv, multiply(ratio, m))];
}
Libraries
Styling
print_matrix_tex = (m, name) => tex`${name} = \begin{bmatrix}
${m[0]} & ${m[1]} & ${m[2]} \\
${m[3]} & ${m[4]} & ${m[5]} \\
${m[6]} & ${m[7]} & ${m[8]} \\
\end{bmatrix}`;
print_matrix_js = m => `[
${m[0]}, ${m[1]}, ${m[2]},
${m[3]}, ${m[4]}, ${m[5]},
${m[6]}, ${m[7]}, ${m[8]}
]`
import { invert, multiply } from '@danburzo/matrix-utilities'
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.
