2e:null 2f:["$","title",null,{"children":"Werner’s Nomenclature of Colours | Michael Bricknell | Observable"}] 34:T2988,function renderColorPalette(colorObj) { // Text mode states: 0 = none, 1 = black/white text, 2 = AA testing, 3 = AAA testing let textMode = 0; Object.entries(colorObj).forEach(([name, value]) => { if (name.includes("designer")) { groups.designer[name] = value; } else if (name.includes("utility")) { groups.utility[name] = value; } else { groups.base[name] = value; } }); // Copy functions const copyToClipboard = (text) => { navigator.clipboard.writeText(text).then(() => { console.log("Copied:", text); }); }; const copyGroup = (groupColors, button) => { const groupText = JSON.stringify(groupColors, null, 2); copyToClipboard(groupText); const originalText = button.textContent; button.textContent = "Copied!"; setTimeout(() => { button.textContent = originalText; button.style.background = "#b74a70"; }, 1000); }; // The copyFlattened function is updated to format the output as a JSON array string. const copyFlattened = (groupColors, button) => { // Get all values, flatten them into a single array, and then stringify it. // This automatically adds the brackets and quotes as requested. const flattenedText = JSON.stringify(Object.values(groupColors).flat()); copyToClipboard(flattenedText); // Provide visual feedback to the user. const originalText = button.textContent; button.textContent = "Copied!"; setTimeout(() => { button.textContent = originalText; }, 1000); }; const copyColor = (value, swatchDiv) => { const colorText = Array.isArray(value) ? value.join(", ") : value; copyToClipboard(colorText); window.parent.postMessage( { event: "swatch_click", color_value: colorText }, "*" ); const confirmationEl = swatchDiv.querySelector(".copy-confirmation"); const contrastContainerEl = swatchDiv.querySelector(".contrast-container"); contrastContainerEl.style.display = "none"; confirmationEl.style.display = "flex"; setTimeout(() => { contrastContainerEl.style.display = "flex"; confirmationEl.style.display = "none"; }, 1000); }; const copyHexOnly = (hexCode, element) => { copyToClipboard(hexCode); const originalColor = element.style.color; element.style.color = "#DA5724"; element.style.fontWeight = "bold"; setTimeout(() => { element.style.color = originalColor; element.style.fontWeight = "normal"; }, 500); }; const getContrastText = (textColor, bgColor, standard) => { const ratio = contrast(textColor, bgColor); const threshold = standard === "AAA" ? 7.0 : standard === "Viz" ? 3.0 : 4.5; const largeThreshold = standard === "AAA" ? 4.5 : 3.0; const passNormal = ratio >= threshold; const passLarge = ratio >= largeThreshold; if (standard === "Viz") { return passNormal ? `${ratio.toFixed(1)} ✓` : `${ratio.toFixed(1)} ✗`; } if (passNormal) { return `${ratio.toFixed(1)} ✓`; } else if (passLarge) { return `${ratio.toFixed(1)} ✓L`; } else { return `${ratio.toFixed(1)} ✗`; } }; const toggleTextMode = (container) => { textMode = (textMode + 1) % 5; const whiteTextElements = container.querySelectorAll(".white-text"); const blackTextElements = container.querySelectorAll(".black-text"); whiteTextElements.forEach((element) => { const bgColor = element.dataset.bgColor; element.style.display = textMode === 0 ? "none" : "block"; switch (textMode) { case 1: element.textContent = "Text"; break; case 2: element.textContent = `Text ${getContrastText( "white", bgColor, "AA" )}`; break; case 3: element.textContent = `Text ${getContrastText( "white", bgColor, "AAA" )}`; break; case 4: element.textContent = `DataViz ${getContrastText( "white", bgColor, "Viz" )}`; break; } }); blackTextElements.forEach((element) => { const bgColor = element.dataset.bgColor; element.style.display = textMode === 0 ? "none" : "block"; switch (textMode) { case 1: element.textContent = "Text"; break; case 2: element.textContent = `Text ${getContrastText( "black", bgColor, "AA" )}`; break; case 3: element.textContent = `Text ${getContrastText( "black", bgColor, "AAA" )}`; break; case 4: element.textContent = `DataViz ${getContrastText( "black", bgColor, "Viz" )}`; break; } }); const toggleBtn = container.querySelector(".text-toggle"); const modeNames = ["None", "Text", "AA Test", "AAA Test", "DataViz"]; toggleBtn.textContent = `Mode: ${modeNames[textMode]}`; }; const renderGroup = (groupName, colors) => { const groupDiv = document.createElement("div"); groupDiv.style.marginBottom = "20px"; const headerDiv = document.createElement("div"); headerDiv.style.display = "flex"; headerDiv.style.alignItems = "center"; headerDiv.style.marginBottom = "10px"; const title = document.createElement("h3"); title.textContent = ``; title.style.margin = "0"; const copyBtn = document.createElement("button"); copyBtn.textContent = `Copy as JSON`; copyBtn.style.cssText = `margin-left: 10px; padding: 5px 10px; background: "#719ba2"; color: black; border: 1px solid black; border-radius: 3px; cursor: pointer`; copyBtn.onclick = () => copyGroup(colors, copyBtn); const copyFlattenedBtn = document.createElement("button"); copyFlattenedBtn.textContent = `Copy Flattened`; copyFlattenedBtn.style.cssText = `margin-left: 4px; padding: 5px 10px; background: #719ba2; color: black; border: 1px solid black; border-radius: 3px; cursor: pointer;`; copyFlattenedBtn.onclick = () => copyFlattened(colors, copyFlattenedBtn); headerDiv.appendChild(title); headerDiv.appendChild(copyBtn); headerDiv.appendChild(copyFlattenedBtn); const colorsDiv = document.createElement("div"); colorsDiv.style.display = "flex"; colorsDiv.style.flexWrap = "wrap"; Object.entries(colors).forEach(([name, value]) => { const swatchDiv = document.createElement("div"); swatchDiv.style.cssText = `position: relative; z-index: 1; display: inline-block; margin: 5px; text-align: center; cursor: pointer; transition: all 0.1s; border: 1px solid #777777;background-color:white`; swatchDiv.onmouseover = () => { swatchDiv.style.transform = "scale(1.5)"; swatchDiv.style.zIndex = "10"; }; swatchDiv.onmouseout = () => { swatchDiv.style.transform = "scale(1)"; swatchDiv.style.zIndex = "1"; }; swatchDiv.onclick = () => copyColor(value, swatchDiv); const isArray = Array.isArray(value); const bgColor = isArray ? value[0] : value; const hexDisplay = isArray ? value .map( (hex) => `

${hex}` ) .join(" | ") : `${value}

`; swatchDiv.innerHTML = `

Text

${name}

${hexDisplay}

`; swatchDiv.querySelectorAll(".hex-code").forEach((hexSpan) => { hexSpan.onclick = (e) => { e.stopPropagation(); copyHexOnly(hexSpan.dataset.hex, hexSpan); }; }); colorsDiv.appendChild(swatchDiv); }); groupDiv.appendChild(headerDiv); groupDiv.appendChild(colorsDiv); return groupDiv; }; const container = document.createElement("div"); const globalHeader = document.createElement("div"); globalHeader.style.cssText = `display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;`; const toggleBtn = document.createElement("button"); toggleBtn.className = "text-toggle"; toggleBtn.textContent = "Mode: None"; toggleBtn.style.cssText = `padding: 8px 15px; background:#719ba2; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.2s; z-index: 500;`; toggleBtn.onclick = () => toggleTextMode(container); const toggleLabel = document.createElement("span"); toggleLabel.textContent = "Click to cycle: None → Text → AA Test → AAA Test → DataViz"; toggleLabel.style.cssText = `margin-left: 10px; font-size: 14px; color: #666;`; globalHeader.appendChild(toggleBtn); globalHeader.appendChild(toggleLabel); container.appendChild(globalHeader); Object.entries(groups) .filter(([_, colors]) => Object.keys(colors).length > 0) .forEach(([groupName, colors]) => { container.appendChild(renderGroup(groupName, colors)); }); return container; }35:Tdd8,color = ({ "Snow White": ["#f1e9cd"], "Reddish White": ["#f2e7cf"], "Purplish White": ["#ece6d0"], "Yellowish White": ["#f2eacc"], "Orange coloured White": ["#f3e9ca"], "Greenish White": ["#f2ebcd"], "Skimmed milk White": ["#e6e1c9"], "Greyish White": ["#e2ddc6"], "Ash Grey": ["#cbc8b7"], "Smoke Grey": ["#bfbbb0"], "French Grey": ["#bebeb3"], "Pearl Grey": ["#b7b5ac"], "Yellowish Grey": ["#bab191"], "Bluish Grey": ["#9c9d9a"], "Greenish Grey": ["#8a8d84"], "Blackish Grey": ["#5b5c61"], "Greyish Black": ["#555152"], "Bluish Black": ["#413f44"], "Greenish Black": ["#454445"], "Pitch or Brownish Black": ["#423937"], "Reddish Black": ["#433635"], "Ink Black": ["#252024"], "Velvet Black": ["#241f20"], "Scotch Blue": ["#281f3f"], "Prussian Blue": ["#1c1949"], "Indigo Blue": ["#4f638d"], "China Blue": ["#383867"], "Azure Blue": ["#5c6b8f"], "Ultramarine Blue": ["#657abb"], "Flax-Flower Blue": ["#6f88af"], "Berlin Blue": ["#7994b5"], "Verditter Blue": ["#6fb5a8"], "Greenish Blue": ["#719ba2"], "Greyish Blue": ["#8aa1a6"], "Bluish Lilac Purple": ["#d0d5d3"], "Bluish Purple": ["#8590ae"], "Violet Purple": ["#3a2f52"], "Pansy Purple": ["#39334a"], "Campanula Purple": ["#6c6d94"], "Imperial Purple": ["#584c77"], "Auricula Purple": ["#533552"], "Plum Purple": ["#463759"], "Red Lilac Purple": ["#bfbac0"], "Lavender Purple": ["#77747f"], "Pale Blackish Purple": ["#4a475c"], "Celadine Green": ["#b8bfaf"], "Mountain Green": ["#b2b599"], "Leek Green": ["#979c84"], "Blackish Green": ["#5d6161"], "Verdigris Green": ["#61ac86"], "Bluish Green": ["#a4b6a7"], "Apple Green": ["#adba98"], "Emerald Green": ["#93b778"], "Grass Green": ["#7d8c55"], "Duck Green": ["#33431e"], "Sap Green": ["#7c8635"], "Pistachio Green": ["#8e9849"], "Asparagus Green": ["#c2c190"], "Olive Green": ["#67765b"], "Oil Green": ["#ab924b"], "Siskin Green": ["#c8c76f"], "Sulphur Yellow": ["#ccc050"], "Primrose Yellow": ["#ebdd99"], "Wax Yellow": ["#ab9649"], "Lemon Yellow": ["#dbc364"], "Gamboge Yellow": ["#e6d058"], "Kings Yellow": ["#ead665"], "Saffron Yellow": ["#d09b2c"], "Gallstone Yellow": ["#a36629"], "Honey Yellow": ["#a77d35"], "Straw Yellow": ["#f0d696"], "Wine Yellow": ["#d7c485"], "Sienna Yellow": ["#f1d28c"], "Ochre Yellow": ["#efcc83"], "Cream Yellow": ["#f3daa7"], "Dutch Orange": ["#dfa837"], "Buff Orange": ["#ebbc71"], "Orpiment Orange": ["#d17c3f"], "Brownish Orange": ["#92462f"], "Reddish Orange": ["#be7249"], "Deep Reddish Orange": ["#bb603c"], "Tile Red": ["#c76b4a"], "Hyacinth Red": ["#a75536"], "Scarlet Red": ["#b63e36"], "Vermilion Red": ["#b5493a"], "Aurora Red": ["#cd6d57"], "Arterial Blood Red": ["#711518"], "Flesh Red": ["#e9c49d"], "Rose Red": ["#eedac3"], "Peach Blossom Red": ["#eecfbf"], "Carmine Red": ["#ce536b"], "Lake Red": ["#b74a70"], "Crimson Red": ["#b7757c"], "Purplish Red": ["#612741"], "Cochineal Red": ["#7a4848"], "Veinous Blood Red": ["#3f3033"], "Brownish Purple Red": ["#8d746f"], "Chocolate Red": ["#4d3635"], "Brownish Red": ["#6e3b31"], "Deep Orange-coloured Brown": ["#864735"], "Deep Reddish Brown": ["#553d3a"], "Umber Brown": ["#613936"], "Chestnut Brown": ["#7a4b3a"], "Yellowish Brown": ["#946943"], "Wood Brown": ["#c39e6d"], "Liver Brown": ["#513e32"], "Hair Brown": ["#8b7859"], "Broccoli Brown": ["#9b856b"], "Clove Brown": ["#766051"], "Blackish Brown": ["#453b32"] })36:[] 32:{"id":"b4279992e504676d","slug":"werners-nomenclature-of-colours","title":"Werner’s Nomenclature of Colours","thumbnail":"e6b448f57f3cca2c4b186c2fb4b5f6fc10e0f7708729909d633ba2859110cd3a","access_level":"public","create_time":"$D2025-09-14T01:05:10.966Z","update_time":"$D2026-05-19T11:35:56.339Z","view_time":null,"first_public_time":"$D2025-09-20T12:02:03.001Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":1122,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Werner’s Nomenclature of Colours","cells":[{"id":0,"value":"# Werner’s Nomenclature of Colours \nBy P. Syme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"https://www.c82.net/werner/#colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":392,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"[Web Content Accessibility Guidelines (WCAG)](https://www.wcag.com/solutions/why-contrast-checkers-matter-for-web-accessibility/) \n✓ = Passes for normal text (meets higher threshold) \n✓L = Passes for large text (meets lower threshold) \n✗ = Fails both normal and large text\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"# Black vs white text visibility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"demo = html`${renderColorPalette(color)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"The WCAG guidelines have three levels of conformance that you can meet; A, AA and AAA, and each is progressively harder.\n\nLevel A is a subset of Level AA. There are 25 criteria that you have to meet to reach Level A. To reach Level AA you have to meet 13 more criteria in addition to the 25 for Level A. Level AAA is the icing on the cake with 23 more criteria.\n\nWCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.\n\nLarge text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.\nhttps://webaim.org/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":500,"value":"# Deep Dive","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"# Hued text over grayscale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":787,"value":"viewof selectedGroup = Inputs.select(Object.keys(groups), {\n label: \"Select Group\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"viewof selectedColorName = Inputs.select(Object.keys(groups[selectedGroup]), {\n label: \"Select Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"selectedColorArray = groups[selectedGroup][selectedColorName]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"viewof colorVariant = selectedColorArray.length > 1\n ? Inputs.toggle({\n label: \"Dull / Saturated\",\n value: false // false = index 0 (dull), true = index 1 (saturated)\n })\n : Inputs.toggle({ label: \"Dull / Saturated\", value: false, disabled: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"myColor = selectedColorArray[colorVariant ? 1 : 0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"html`${showColor(myColor, \"hsl\", selectedColorName)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"## Text Color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"checkContrast(myColor, [\n \"#8F3602\",\n \"#03795F\",\n \"#FFCAA7\",\n \"#D7AE73\",\n \"#f0e4d8\",\n \"#A1BEB5\",\n \"#d8E2E5\",\n \"#2E453A\",\n \"#000000\",\n \"#FFFFFF\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":851,"value":"## Background Color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":664,"value":"checkContrast([\"white\"], [myColor])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"checkContrast(\n [\"black\"],\n [\n myColor\n /*d3.rgb(myColor[0]).brighter(0.219),\n d3.hsl(myColor[0]).copy({ s: d3.hsl(myColor[0]).s * 1.3 }),\n d3.hsl(myColor[0]).copy({ l: d3.hsl(myColor[0]).l * 1.082 })*/\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":839,"value":"# Deeper Dive","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"\"color distance\" \n\nWhat are the limitations of working within a color space? RGB has no concept of Brightness or Saturation. We may have become comfortable working with color pickers or UI that bypasses the understanding of what we are actually doing to a color. I believe we shouldn't explain to others or ourselves in the RGB lexicon. This needs more R, or less G, is meaningless to most who do not speak RGB. This should only be used for the agreed upon result, and used in replicating the color choice.\n\nsRGB is capped at a value of 255, there is no displayable value above 255, or brightness when using rgb.\n\nHow do we tell if a color is similar or different. Distance (but more complicated than just d = ( x2 − x1 ) 2 + ( y2− y1)2). By converting color coordinates to Euclidean space (x,y) or (x,y,z) / (r,g,b), we can measure distance. However, something near something doesn't necessarily mean sameness, but it a start to understanding.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":506,"value":"displayColors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"cs = colorspace, \"hex, hsl, rgb\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"cs","database":"$undefined"},{"id":508,"value":"displayColors(\n 20,\n 20,\n colorsDark.concat(\"#281f3f\"),\n \"rgb\", // <-- analysis table\n true, // <-- show detail\n false, // <-- colorize (silly)\n \"hsl\" // <-- first column defaults to rgb\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"demoSwatch = displayColors(\n 20,\n 20,\n [].concat(\"#ead665\", \"#93b778\", \"#657abb\", \"#dfa837\", \"#ce536b\"),\n \"hsl\",\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"plotColorRadar(\n [\n \"#9dcab9\",\n \"#8cc7b0\",\n \"#77b49d\",\n \"#52b18c\",\n \"#55927a\",\n \"#198b5e\",\n \"#386654\",\n \"#016841\",\n \"#144733\",\n \"#00472b\"\n ],\n { space: \"hsl\", dotSize: 10 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"plotDemo = plotColorSwarm(groups.base, {\n space: \"hsl\",\n dotSize: 25,\n header: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"colors = [\"#ead665\", \"#93b778\", \"#657abb\", \"#dfa837\", \"#ce536b\", ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"colorsDark = [\"#711518\", \"#d09b2c\", \"#33431e\", \"#533552\", \"#612741\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"---\n# Sandbox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":551,"value":"https://observablehq.com/@danburzo/color-difference-formulas-with-d3-color-difference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1035,"value":"colorArray","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"groups = Object.entries(color).reduce(\n (acc, [key, value]) => {\n if (key.includes(\"utility\")) {\n acc.utility[key] = value;\n } else if (key.includes(\"designer\")) {\n acc.designer[key] = value;\n } else {\n acc.base[key] = value;\n }\n return acc;\n },\n { base: {}, utility: {}, designer: {} }\n) // Start with the empty group structure","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"viewof selectedBase = Inputs.select(\n [\n ...Object.keys(groups.base),\n ...Object.keys(groups.utility),\n ...Object.keys(groups.designer)\n ],\n {\n label: \"Select one\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"selectedColor = groups.base[selectedBase] ??\n groups.utility[selectedBase] ??\n groups.designer[selectedBase]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"function getNameHex(colorsArray, hexValue) {\n const foundColor = colorsArray.find((color) => color.value === hexValue);\n\n // Use optional chaining (?.) for a safer lookup\n return foundColor?.name;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"import {\n swatch,\n showColor,\n displayColors,\n contrast,\n checkContrast,\n plotColorSwarm,\n plotColorRadar,\n checkAA,\n checkAAA\n} from \"@mbrickmaps/color\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"colorArray = {\n let result = [];\n for (const key in color) {\n const value = color[key];\n if (Array.isArray(value) && value.length > 1) {\n result.push({\n name: `${key}_dull`,\n value: value[0]\n });\n result.push({\n name: `${key}_vibrant`,\n value: value[1]\n });\n } else {\n result.push({\n name: key,\n value: Array.isArray(value) ? value[0] : value\n });\n }\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"👇 THIS CONTROLS ALL COLORS 👇","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"