Public
Edited
Jul 21, 2023
1 fork
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
<div>
${Object.entries(colors).map(([name, color], index) => {
return htl.html`
<div style="
background:${color};
color:${(name === 'white') ? colors.black : colors.white};
padding: 0.25rem 0.5rem;
font-weight: bold;
">${name}</div>
`
})}
</div>
Insert cell
Insert cell
<div style="
background: ${colors.red};
color: ${colors.white};
padding: 0.25rem 0.5rem;
font-weight: bold;
">color.red</div>
Insert cell
Insert cell
<div style="
background: ${colors.blue.darker(0.5)};
color: ${colors.white};
padding: 0.25rem 0.5rem;
font-weight: bold;
">color.blue.darker(0.5)</div>
<div style="
background: ${colors.blue};
color: ${colors.white};
padding: 0.25rem 0.5rem;
font-weight: bold;
">color.blue</div>
<div style="
background: ${colors.blue.brighter(0.5)};
color: ${colors.white};
padding: 0.25rem 0.5rem;
font-weight: bold;
">color.blue.brighter(0.5)</div>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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