The avatar for @clhenrick
Chris Henrick
Maps, Data, Viz, UX, Design
Public
Edited
Aug 31, 2024
Fork of Exploring OKLCH Color
•
1 fork
Importers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
colorStart
Insert cell
getOklchArr = (colorStr) => new Color(colorStr).to("oklch").coords
Insert cell
Insert cell
Insert cell
createPaletteVis = (
colorsArray,
n = colorsArray.length,
backgroundColor = "white"
) => {
console.log("n: ", n);
const w = n * SWATCH_SIZE + SWATCH_STROKE * 2;
const h = SWATCH_SIZE + SWATCH_STROKE * 2;
return htl.svg`<svg viewBox="0 0 ${w} ${h}" style="max-height:${MAX_PALETTE_HEIGHT}px;">
<rect x="0" y="0" width="${w}" height="${h}" fill="${backgroundColor}" />
${colorsArray.map((oklch, index) =>
createSwatch(
getCssColorString(oklch),
backgroundColor,
index * SWATCH_SIZE + SWATCH_STROKE
)
)}
</svg>`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more