Developer @Observable
Public
Edited
Sep 25, 2023
culori = require("culori@2.0.3")
viewof form = Inputs.form({
hue: Inputs.range([0, 360], { label: "Base hue", step: 1, value: 161 }),
saturation: Inputs.range([0, 1], {
label: "Saturation",
step: 0.01,
value: 0.83
}),
lightness: Inputs.range([0, 1], {
label: "Lightness",
step: 0.01,
value: 0.83
})
})
htl.html`<div class="swatch-set">${Array.from({ length: 5 }, (d, i) =>
swatch(
culori.okhsl({
h: (form.hue + (360 / 5) * i) % 360,
s: form.saturation,
l: form.lightness
})
)
)}</div>`
import { swatch, style } with {
swatchSpace,
formatColor
} from "@mythmon/random-colors"
swatchSpace = width / 5 - 10
formatColor = (c) => {
let { mode, ...rest } = c;
let rv = `${mode} {`;
for (let [k, v] of Object.entries(rest)) {
alert(v);
let vs = v.toFixed(2);
if (vs.length == 5) {
vs = vs.slice(0, -1);
} else if (vs.length == 6) {
vs = vs.slice(0, -3);
}
rv += `\n ${k}: ${vs},`;
}
rv += "\n}\n";
rv += culori.formatHex(culori.rgb(c));
return rv;
}
style
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.
