📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Jun 19, 2022
1 star
Hello Color JS!
color = (await import('https://cdn.skypack.dev/color@4.2.3?min')).default
colors = {
const a = color('rgb(255, 255, 255)')
const b = color({r: 255, g: 255, b: 255})
const c = color.rgb(255, 255, 255)
const d = color.rgb([255, 255, 255])
yield {a,b,c,d}
}
colors.a.hsl().string()
colors.b.cmyk().round().array()
sample_color = color('#7743CE').alpha(0.5).lighten(0.5);
{
const cc = color("purple")
yield html`<div style="background-color:${cc.alpha(alphaRange).lighten(lightenRange)}; padding: 20px;"></div>`
}
viewof alphaRange = Inputs.range([0, 1], {label: "Alpha", step: .1})
viewof lightenRange = Inputs.range([0, 1], {label: "Lighten", step: .1})
{
const cc = color("purple")
yield html`<div style="background-color:${cc.mix(color("yellow"), mixRange)}; padding: 20px;"></div>`
}
viewof mixRange = Inputs.range([0, 1], {label: "Mix", step: .1})
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.
