palette = picker.length === 1 ? [startHex, ..._.tail(picker), endHex] : picker
interpolateStopsWithSubstops = (stops, mode) => {
return [
...R.aperture(2, stops).flatMap(([a, b]) => {
const interpolator = culori.interpolate([a, b], mode);
return d3.range(0, 1, 1 / (substops + 1)).map((i) => interpolator(i));
}),
_.last(stops)
].map((color) => {
// Convert from hex if hex
color = culori.parse(color) ? culori.parse(color) : color;
return {
oklab: culori.converter("oklab")(color),
oklch: culori.converter("oklch")(color),
rgb: culori.converter("rgb")(color),
hex: culori.formatHex(color)
};
});
}
interpolateStopsWithAllModes = (stops) => [
{ name: "RGB", points: interpolateStopsWithSubstops(stops, "rgb") },
{ name: "Lab", points: interpolateStopsWithSubstops(stops, "lab") },
{ name: "Oklab", points: interpolateStopsWithSubstops(stops, "oklab") },
{ name: "HSL", points: interpolateStopsWithSubstops(stops, "hsl") },
{ name: "Okhsl", points: interpolateStopsWithSubstops(stops, "okhsl") },
{ name: "HSV", points: interpolateStopsWithSubstops(stops, "hsv") },
{ name: "Okhsv", points: interpolateStopsWithSubstops(stops, "okhsv") }
// { name: "LCH", points: interpolateStopsWithSubstops(stops,"lch") },
// { name: "Oklch", points: interpolateStopsWithSubstops(stops,oklch") }
]
interpolations = interpolateStopsWithAllModes(palette)
cssInterpolation = (interpolation) => `
background-image: linear-gradient(${(angle, viewof angle.deg + 90)}deg,
${interpolation.points.map((d) => d.hex).join(",\n")}
);
`
render3dPlot = ({ interpolations, height, width, div }) => {
const data = [
...interpolations.map(({ points, name }) => ({
x: points.map((point) => point.oklab.a),
y: points.map((point) => point.oklab.b),
z: points.map((point) => point.oklab.l),
// hovertext: points.map((point) => tooltip(point)),
name,
mode: "markers",
type: "scatter3d",
marker: {
size: 10,
color: points.map((point) => point.hex),
opacity: 1
}
})),
{
x: rgbGamutInOklab.map((point) => point.a),
y: rgbGamutInOklab.map((point) => point.b),
z: rgbGamutInOklab.map((point) => point.l),
mode: "markers",
name: "RGB gamut",
type: "scatter3d",
marker: {
size: 5,
color: rgbGamutInOklab.map((point) => point.hex),
opacity: 0.1
}
}
];
const layout = {
margin: {
l: 0,
r: 0,
b: 0,
t: 0
},
height,
width,
scene: {
camera: {
eye: {
x: 1,
y: -1,
z: 1
}
},
aspectmode: "manual",
aspectratio: {
x: 1,
y: 1,
z: 1
},
xaxis: {
title: {
text: "a"
},
range: [-0.23, 0.28]
},
yaxis: {
title: {
text: "b"
},
range: [-0.311, 0.2]
},
zaxis: {
title: {
text: "L"
},
range: [0, 1]
}
}
};
return Plotly.react(div, data, layout);
}
startOklch = culori.oklch(startHex)
rotatedHueOklch = ({
...startOklch,
h: (startOklch.h + hueRotation) % 360
})
lightenedOklch = ({
...rotatedHueOklch,
l: rotatedHueOklch.l + lightenCoefficient / rotatedHueOklch.l
})
lightenedAndSaturatedOklch = ({
...lightenedOklch,
c: lightenedOklch.c + saturateMagnitude
})
endHex = culori.formatHex(lightenedAndSaturatedOklch)
synthesizedInterpolations = interpolateStopsWithAllModes([
startHex,
endHex
]).flatMap(({ name, points }) => points.map((point) => ({ ...point, name })))
vectors = [
{
text: "Rotate",
h1: startOklch.h,
l1: startOklch.l,
a1: culori.oklab(startOklch).a,
b1: culori.oklab(startOklch).b,
//
h2: rotatedHueOklch.h,
l2: rotatedHueOklch.l,
a2: culori.oklab(rotatedHueOklch).a,
b2: culori.oklab(rotatedHueOklch).b
},
{
text: "Lighten",
h1: rotatedHueOklch.h,
l1: rotatedHueOklch.l,
a1: culori.oklab(rotatedHueOklch).a,
b1: culori.oklab(rotatedHueOklch).b,
//
h2: lightenedOklch.h,
l2: lightenedOklch.l,
a2: culori.oklab(lightenedOklch).a,
b2: culori.oklab(lightenedOklch).b
},
{
text: "Saturate",
h1: lightenedOklch.h,
l1: lightenedOklch.l,
a1: culori.oklab(lightenedOklch).a,
b1: culori.oklab(lightenedOklch).b,
//
h2: lightenedAndSaturatedOklch.h,
l2: lightenedAndSaturatedOklch.l,
a2: culori.oklab(lightenedAndSaturatedOklch).a,
b2: culori.oklab(lightenedAndSaturatedOklch).b
}
]
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.
