Design Technologist
Public
Edited
Mar 1, 2023
1 star
colors = generate(color)
.map((c) => c.toString())
.reverse()
tuple = (hex) => {
const r = parseInt(hex.substring(1, 3), 16);
const g = parseInt(hex.substring(3, 5), 16);
const b = parseInt(hex.substring(5, 7), 16);
return [r, g, b];
}
getHct = (hex) => {
const [r, g, b] = tuple(hex);
const integerColor = (r << 16) + (g << 8) + b;
const { hue, chroma, tone } = colorUtil.Hct.fromInt(integerColor);
return [hue, chroma, tone];
}
// using color-space from npm
getLab = (hex) => {
const c = colorSpace.rgb.lab(tuple(hex));
return c;
}
// using custom implementation
getLab2 = (hex) => {
const c = ColorRGB.fromString(hex).toLAB();
return [c.L, c.A, c.B];
}
colorUtil = import("https://cdn.skypack.dev/@material/material-color-utilities")
colorSpace = (await import("color-space")).default
import { ColorRGB, ColorLAB, generate } from "@mateh/palette"
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.
