Web Platform Advocate at @CloudinaryLtd
Published
Edited
Aug 24, 2022
color = new Color("dodgerblue").to('lab'); // lab is D50! sRGB is d65.
gray = desaturateBasedOnSpacesWhitepoint(color)
compliment = getCompliment( color )
// Find the point with zero chominance but the same luminosity as the input color (based on the white point of the input color’s colorspace)
desaturateBasedOnSpacesWhitepoint = ( color ) => {
// doing this in XYZ-D65 but I thiiink this could be any whitepoint XYZ space?
const whitePoint = new Color('xyz-d65', color.space.white);
// Chromasticity of the whitepoint
// converting XYZ to chromasticity and vice versa: https://en.wikipedia.org/wiki/CIE_1931_color_space#CIE_xy_chromaticity_diagram_and_the_CIE_xyY_color_space
const whitePointChromasticity = {
little_x: whitePoint.x / (whitePoint.x + whitePoint.y + whitePoint.z),
little_y: whitePoint.y / (whitePoint.x + whitePoint.y + whitePoint.z),
little_z: whitePoint.z / (whitePoint.x + whitePoint.y + whitePoint.z)
};
// graypoint is what we're looking for. White point's chromasticity and input color's luminosity.
const colorY = color.to('xyz-d65').y;
const grayPointX = (colorY / whitePointChromasticity.little_y) * whitePointChromasticity.little_x;
const grayPointZ = (colorY / whitePointChromasticity.little_y) * whitePointChromasticity.little_z;
const grayPoint = new Color('xyz-d65', [
grayPointX, colorY, grayPointZ
]);
return grayPoint.to(color.space);
}
getCompliment = ( color ) => {
const gray = desaturateBasedOnSpacesWhitepoint( color );
// 200% mix -- go to the gray, and then go the same vector, again.
return color.mix( gray, 2, { space: color.space } );
}
Color = import("https://colorjs.io/dist/color.js").then((d) => d.default)
show = (color) => html`<div
style="
background-color: ${ color.to('sRGB').toString() };
padding: 1em;
color: ${ color.lch.l > 60 ? "black" : "white" };
${ color.inGamut('srgb') ? '' : 'outline: 2px solid red;' }
"
><code>${ color.toString() }</code></div>`;
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.
