color
oklab = (L, a, b) => {
const l_ = 0.99999999845 * L + 0.39633779217 * a + 0.21580375806 * b;
const m_ = 1.00000000888 * L - 0.10556134232 * a - 0.06385417477 * b;
const s_ = 1.00000005467 * L - 0.08948418209 * a - 1.29148553786 * b;
const l = l_ * l_ * l_;
const m = m_ * m_ * m_;
const s = s_ * s_ * s_;
return d3.rgb(
255 * gamma(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
255 * gamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
255 * gamma(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)
);
}
oklabInverse = (c) => {
c = d3.rgb(c);
const r = gamma_inv(c.r / 255);
const g = gamma_inv(c.g / 255);
const b = gamma_inv(c.b / 255);
const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
const l_ = Math.cbrt(l);
const m_ = Math.cbrt(m);
const s_ = Math.cbrt(s);
return {
L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_
};
}
gamma = x => (x >= 0.0031308 ? 1.055 * Math.pow(x, 1 / 2.4) - 0.055 : 12.92 * x)
gamma_inv = x =>
x >= 0.04045 ? Math.pow((x + 0.055) / (1 + 0.055), 2.4) : x / 12.92
ramp(t => oklab(l, t - .5, b))
ramp(t => oklab(l, a, t - .5))
ramp(t => oklab(t, a, b))
viewof l = Inputs.range([0, 1], { label: "l" })
ramp(t =>
oklab(0.5, .5 * Math.sin(2 * Math.PI * t), .5 * Math.cos(2 * Math.PI * t))
)
ramp(t => d3.hsv(t * 360, 0.9, 0.9))
ramp(t => d3.hsl(0, 0, oklabInverse(d3.hsv(t * 360, 0.9, 0.9)).L))
ramp(t => d3.hsl(t * 360, 0.9, 0.6))
ramp(t => d3.hsl(0, 0, oklabInverse(d3.hsl(t * 360, 0.9, 0.6)).L))
ramp(t => d3.hcl(t * 360, 90, 70))
ramp(t => d3.hsl(0, 0, oklabInverse(d3.hcl(t * 360, 110, 70)).L))
import { ramp } from "@mbostock/color-ramp"
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.
