result = {
const fg = parseHex(foreground);
const bg = parseHex(background);
const r = Math.round((fg.r - bg.r + bg.r * opacity) / opacity);
const g = Math.round((fg.g - bg.g + bg.g * opacity) / opacity);
const b = Math.round((fg.b - bg.b + bg.g * opacity) / opacity);
if (isValid(r) && isValid(g) && isValid(b)) {
return html`${swatch(
toHex(r, g, b)
)} • <code>rgba(${r}, ${g}, ${b}, ${opacity})</code>`;
} else {
return html`<p style="color: #c00">Impossible color ${[r, g, b].join(
', '
)}`;
}
}
isValid = n => 0 <= n && n <= 255
parseHex = hex => {
const [, r1, r2, g1, g2, b1, b2] = hex;
const toNum = (...digits) => parseInt(digits.join(''), 16);
return {
r: toNum(r1, r2),
g: toNum(g1, g2),
b: toNum(b1, b2)
};
}
toHex = (r, g, b) => '#' + [r, g, b].map(n => n.toString(16)).join('')
html`<style>input[type=text] { font-family: Fira Code, monospace; font-size: 14px !important }`
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.
