The avatar for @clhenrick
Chris Henrick
Maps, Data, Viz, UX, Design
Public
Edited
Aug 31, 2024
Fork of Exploring OKLCH Color
•
1 fork
Importers
color
Sequential Color Palette Generation using OKLCH
Exploring OKLCH Color (using ColorJS)
Color Palette Analysis using OKLCH
Also listed in…
explainers
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