The avatar for @eeeps
Eric Portis
Web Platform Advocate at @CloudinaryLtd
Public
Edited
Jun 12, 2024
Insert cell
Insert cell
ColorLib = import("https://colorjs.io/dist/color.js")
Insert cell
Color = ColorLib.default
Insert cell
veryMagenta = new Color("rec2020", [1, 0.25, 0.3])
Insert cell
print = function( cObj ) { const cStr = cObj.toString({ precision: 9 }); return html`<code style="background-color: ${ cStr }">${cStr}</code>`; }
Insert cell
Insert cell
mapTosRGB = function( cObj ) { return cObj.clone().toGamut({ space: 'sRGB' }) }
Insert cell
clipTosRGB(veryMagenta)
Insert cell
clipTosRGB = function( cObj ) {
return cObj.clone().toGamut({ space: 'sRGB', method: 'clip'})
}
Insert cell
new Color("oklch(70% 0.33 33)").to("srgb").toString({inGamut:false})
Insert cell
new Color("color(prophoto-rgb 0.9 0.25 0)").to('oklch').toString({inGamut: false})
Insert cell
veryMagenta.to("srgb").toString({inGamut:false})
Insert cell
veryMagenta.to("rec2020").toString({inGamut:false})
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