Wise Fool.
Visioneer.
Public
Edited
Oct 12, 2023
namedSwatches(SikkensRijksKleuren)
SikkensRijksKleuren = [
{name: "RIJKS puur rood" , hex: "#79453E"},
{name: "RIJKS rood" , hex: "#A46454"},
{name: "RIJKS zacht rood" , hex: "#D7C5B2"},
{name: "RIJKS puur groen" , hex: "#5D635E"},
{name: "RIJKS groen" , hex: "#848676"},
{name: "RIJKS zacht groen" , hex: "#B2AB9B"},
{name: "RIJKS puur bruin" , hex: "#807466"},
{name: "RIJKS bruin" , hex: "#AA9D8B"},
{name: "RIJKS zacht bruin" , hex: "#BCB19E"},
{name: "RIJKS puur terra" , hex: "#9A765B"},
{name: "RIJKS terra" , hex: "#BF9771"},
{name: "RIJKS zacht terra" , hex: "#D6C2A5"},
{name: "RIJKS puur oker" , hex: "#B5986C"},
{name: "RIJKS oker" , hex: "#C4AE8C"},
{name: "RIJKS zacht oker" , hex: "#DED2BE"},
{name: "RIJKS zwart grijs" , hex: "#424346"},
{name: "RIJKS donker grijs", hex: "#6E6E6E"},
{name: "RIJKS warm grijs" , hex: "#827E7A"},
{name: "RIJKS groen grijs" , hex: "#8C8F8A"},
{name: "RIJKS midden grijs", hex: "#AEAFA9"},
{name: "RIJKS koel grijs" , hex: "#C6C7C6"},
{name: "RIJKS licht grijs" , hex: "#CFCCC3"},
{name: "RIJKS wit grijs" , hex: "#E8E5D8"},
]
namedSwatches = (colors) => html`${colors.map(({name, hex}) => `<div title="${hex}" style="
// align-items: flex-end;
// column-count: 3;
// column-width: 100px;
margin: 3px;
padding-left: 3px;
// width: ${36*6}px;
min-height: 72px;
background: ${hex};
font-family: sans-serif;
color: ${contrast(hex)};
text-transform: uppercase;
">
${name.replace(/^RIJKS/, "<b>RIJKS </b>")}
</div>`)}`;
import {lrgb_luminance, rgb_lrgb} from "@mbostock/wcag-contrast-ratio"
contrast = (color) => lrgb_luminance(rgb_lrgb(d3.rgb(color))) >= 1/2 ? "black" : "white"
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.
