function swatches_with_names(color_map, size="1em") {
var swatches = "";
var i = 0;
color_map.forEach((value, key, map) => {
swatches += `<div title="${key}" style="
display: inline-block;
margin-right: 1em;
width: ${size};
height: ${size};
background: ${value};
">
<p style="vertical-align: baseline; text-align: center; font-weight: 600">
${key}
</p>
<p style="vertical-align: baseline; text-align: center; font-weight: 600">
${i}
</p>
</div>`;
i += 1;
});
return html`${swatches}`;
}