input
function invert(color, style) {
if (typeof color === "string") {
color = parseColor(color);
}
if (style === "rgb") {
return parseColor(`rgb(${color.rgb.map((c) => 255 - c)})`).hex;
}
const [h, s, v] = color[style];
return parseColor(
`hs${style === "hsl" ? "l" : "v"}(${h}, ${v}, ${
style === "hsl" ? (s + 50) % 100 : s
})`
).hex;
}
swatch = color => html`
<span class="swatch" style="--color: ${color}">${color}</span>
`
// combined using the rollup REPL. sourced from the `parse-color@1.0.0` module and its dependencies.
parseColor = import(await FileAttachment("parse-color@4.js").url()).then(
m => m.default
)
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.
