2e:null 2f:["$","title",null,{"children":"My confusion with color colour. | Michael Bricknell | Observable"}] 34:Tfb8,function displayColors(width, height, palette, cs, show, colorized, format) { let f = d3.format(".2~f"); let swatch = ""; let o = ""; let rgbList = []; let hexList = []; let display = format ? format : "rgb"; for (let x in palette) { swatch += `

`; rgbList.push(d3.rgb(palette[x]).toString()); hexList.push(d3.color(palette[x]).formatHex().toString()); } if (show) { if (["luv", "lab", "hsl", "hcl", "rgb"].indexOf(cs) > -1) { if (cs == "luv") { o += `| l | u | v | distance | -------- | -------- | -------- | --------`; for (let x in palette) { let j = []; palette.map((d) => { //x,y u,v getDistance j.push( ` ` + f( getDistance( d3Hsluv.hsluv(palette[x]).u, d3Hsluv.hsluv(palette[x]).v, d3Hsluv.hsluv(d).u, d3Hsluv.hsluv(d).v ) ) + "" ); }); let c = d3Hsluv.hsluv(palette[x]); o += ` ${showColor(palette[x], display)} |${f(c.l)} | ${f(c.u)} | ${f( c.v )}|[${j.toString()}]|`; } } if (cs == "rgb") { o += `| r | g | b | distance | -------- | -------- | -------- | --------`; for (let x in palette) { let j = []; palette.map((d) => { j.push( ` ` + f(diff.differenceEuclideanRGB(palette[x], d)) + "" ); }); let c = d3.rgb(palette[x]); //console.log(palette[x - 1]); o += ` ${showColor(palette[x], display)} |${f(c.r)} | ${f(c.g)} | ${f( c.b )} | [${j.toString()}]|`; } } if (cs == "lab") { o += `| L* | a* | b* | distance | -------- | -------- | -------- | --------`; for (let x in palette) { let j = []; palette.map((d) => { j.push( ` ` + +f(diff.differenceEuclideanLab(palette[x], d)) + "" ); }); let c = d3.lab(palette[x]); o += ` ${showColor(palette[x], display)} |${f(c.l)} | ${f(c.a)} | ${f( c.b )} | [${j.toString()}]|`; } } if (cs == "hsl") { o += `| h | s | l | distance | -------- | -------- | -------- | --------`; for (let x in palette) { let j = []; palette.map((d) => { j.push( ` ` + +f(diff.differenceEuclideanHsl(palette[x], d)) + "" ); }); let c = d3.hsl(palette[x]); o += ` ${showColor(palette[x], display)} |${f(c.h)} | ${f(c.s)} | ${f( c.l )}|[${j.toString()}]|`; } } if (cs == "hcl") { o += `| h | c | l | distance | -------- | -------- | -------- | --------`; for (let x in palette) { let j = []; palette.map((d) => { j.push( ` ` + +f(diff.differenceEuclideanHcl(palette[x], d)) + "" ); }); let c = d3.hcl(palette[x]); o += ` ${showColor(palette[x], display)} |${f(c.h)} | ${f(c.c)} | ${f( c.l )}|[${j.toString()}]|`; } } } swatch += o; } swatch += `
["${hexList.join('","')}"]
["${rgbList.join('","')}"] `; return md`${swatch}`; }35:T1791,function plotColorRadar(colors, options = {}) { const { space = "rgb", width = 600, height = 600, showLabels = true } = options; // Handle single color or array const colorArray = Array.isArray(colors) ? colors : [colors]; // Define channels and their max values for normalization const channelConfigs = { rgb: [ { name: "Red", max: 255 }, { name: "Green", max: 255 }, { name: "Blue", max: 255 } ], hsl: [ { name: "Hue", max: 360 }, { name: "Saturation", max: 100 }, { name: "Lightness", max: 100 } ], lab: [ { name: "L*", max: 100, min: 0 }, { name: "a*", max: 127, min: -128 }, { name: "b*", max: 127, min: -128 } ] }; const channels = channelConfigs[space]; const numChannels = channels.length; const angleStep = (2 * Math.PI) / numChannels; const radius = Math.min(width, height) / 2 - 60; // Extract and normalize color data const colorData = colorArray.map((colorInput, colorIndex) => { const color = d3.color(colorInput); const rgb = d3.rgb(color); const hsl = d3.hsl(color); const lab = d3.lab(color); let values; if (space === "rgb") { values = [rgb.r, rgb.g, rgb.b]; } else if (space === "hsl") { values = [hsl.h || 0, hsl.s * 100, hsl.l * 100]; } else if (space === "lab") { values = [lab.l, lab.a, lab.b]; } // Normalize values to 0-1 range const normalizedValues = values.map((val, i) => { const min = channels[i].min || 0; const max = channels[i].max; return (val - min) / (max - min); }); return { color: color.toString(), colorIndex, values: normalizedValues, rawValues: values }; }); // Create radar chart data const radarData = []; const gridData = []; const labelData = []; // Create grid circles for (let level = 0.2; level <= 1; level += 0.2) { const points = []; for (let i = 0; i <= numChannels; i++) { const angle = i * angleStep - Math.PI / 2; const x = Math.cos(angle) * radius * level; const y = Math.sin(angle) * radius * level; points.push([x, y]); } gridData.push({ type: "circle", level, points, label: Math.round(level * 100) + "%" }); } // Create axis lines and labels for (let i = 0; i < numChannels; i++) { const angle = i * angleStep - Math.PI / 2; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; radarData.push({ type: "axis", channel: channels[i].name, x1: 0, y1: 0, x2: x, y2: y }); if (showLabels) { const labelX = Math.cos(angle) * (radius + 30); const labelY = Math.sin(angle) * (radius + 30); labelData.push({ x: labelX, y: labelY, text: channels[i].name, maxValue: channels[i].max }); } } // Create color polygons const colorPolygons = colorData.map((d) => { const points = []; for (let i = 0; i <= numChannels; i++) { // Close the polygon const channelIndex = i % numChannels; const angle = channelIndex * angleStep - Math.PI / 2; const value = d.values[channelIndex]; const x = Math.cos(angle) * radius * value; const y = Math.sin(angle) * radius * value; points.push([x, y]); } return { type: "polygon", color: d.color, colorIndex: d.colorIndex, points, values: d.rawValues }; }); // Create dots for each value const dotData = colorData.flatMap((d) => d.values.map((value, i) => { const angle = i * angleStep - Math.PI / 2; const x = Math.cos(angle) * radius * value; const y = Math.sin(angle) * radius * value; return { x, y, color: d.color, channel: channels[i].name, value: d.rawValues[i], normalizedValue: value }; }) ); return Plot.plot({ title: `${space.toUpperCase()} Color Radar`, width, height, x: { domain: [-radius - 50, radius + 50], axis: null }, y: { domain: [-radius - 50, radius + 50], axis: null }, color: { type: "identity" }, marks: [ // Grid circles ...gridData.map((grid) => Plot.line([grid.points], { x: (d) => d[0], y: (d) => d[1], stroke: "#e0e0e0", strokeWidth: 1 }) ), // Grid labels ...gridData.map((grid) => Plot.text([{ x: radius * grid.level + 10, y: -5, text: grid.label }], { x: "x", y: "y", text: "text", fontSize: 10, fill: "#666" }) ), // Axis lines Plot.link( radarData.filter((d) => d.type === "axis"), { x1: "x1", y1: "y1", x2: "x2", y2: "y2", stroke: "#ccc", strokeWidth: 1 } ), // Color polygons ...colorPolygons.map((poly) => Plot.line([poly.points], { x: (d) => d[0], y: (d) => d[1], stroke: poly.color, strokeWidth: 3, fill: poly.color, fillOpacity: 0.1 }) ), // Value dots Plot.dot(dotData, { x: "x", y: "y", fill: "color", r: 6, stroke: "white", strokeWidth: 2, tip: true }), // Channel labels ...(showLabels ? [ Plot.text(labelData, { x: "x", y: "y", text: "text", fontSize: 12, fontWeight: "bold", textAnchor: "middle" }) ] : []), // Center dot Plot.dot([{ x: 0, y: 0 }], { x: "x", y: "y", r: 3, fill: "black" }) ] }); } // Usage: // plotColorRadar(["#ff6b35", "#2196F3", "#4CAF50"]) // plotColorRadar("#ff6b35", {space: "hsl"}) // plotColorRadar(["#ff0000", "#00ff00", "#0000ff"], {space: "lab"})36:T2727,function plotColorSwarm(colors, options = {}) { const { space = "hsl", projection = "auto", // "auto", "circular", "pca", "grid" width = 800, height = 800, dotSize = 25, showLabels = true, showGrid = true, header = "" } = options; // Handle single color or array const colorDataArray = Object.entries(colors).flatMap(([name, value]) => { const colors = Array.isArray(value) ? value : [value]; // 2. Create a data point for EACH color in the array return colors.map((color, index) => ({ // If there are multiple colors, give them a unique name like "trio [1]", "trio [2]" name: colors.length > 1 ? `${name} [${index + 1}]` : name, color: color })); }); // Extract color values based on space const colorData = colorDataArray.map((colorInput, index) => { const { name, color: colorString } = colorInput; // Get name and color const color = d3.color(colorString); const rgb = d3.rgb(color); const hsl = d3.hsl(color); const lab = d3.lab(color); let x, y, z, label; if (space === "rgb") { // Map RGB: R vs B, with G as size/opacity x = rgb.r / 255; y = rgb.b / 255; z = rgb.g / 255; label = `R:${Math.round(rgb.r)} G:${Math.round(rgb.g)} B:${Math.round( rgb.b )}`; } else if (space === "hsl") { // Map HSL: Hue as angle, Saturation as radius, Lightness as size const h = ((hsl.h || 0) * Math.PI) / 180; const s = hsl.s || 0; x = s * Math.cos(h) * 0.5 + 0.5; y = s * Math.sin(h) * 0.5 + 0.5; z = hsl.l; label = `H:${Math.round(hsl.h || 0)}° S:${Math.round( hsl.s * 100 )}% L:${Math.round(hsl.l * 100)}%`; } else if (space === "lab") { // Map LAB: a* vs b*, L* as size x = (lab.a + 128) / 255; y = (lab.b + 128) / 255; z = lab.l / 100; label = `L:${Math.round(lab.l)} a:${Math.round(lab.a)} b:${Math.round( lab.b )}`; } else if (space === "rg") { // Chromaticity diagram: r vs g const sum = rgb.r + rgb.g + rgb.b; x = sum > 0 ? rgb.r / sum : 0; y = sum > 0 ? rgb.g / sum : 0; z = sum / (255 * 3); label = `r:${x.toFixed(2)} g:${y.toFixed(2)}`; } return { name: colors.length > 1 ? `${name} [${index + 1}]` : name, color: color.toString(), hex: color.formatHex(), x, y, z, label, index }; }); // Apply projection transformations let projectedData = [...colorData]; if (projection === "circular" || (projection === "auto" && space === "hsl")) { // Already handled in HSL space above } else if (projection === "grid") { // Arrange in a grid const cols = Math.ceil(Math.sqrt(colorDataArray.length)); projectedData = colorData.map((d, i) => ({ ...d, x: (i % cols) / (cols - 1 || 1), y: Math.floor(i / cols) / (Math.ceil(colorDataArray.length / cols) - 1 || 1) })); } else if (projection === "pca" && colorDataArray.length > 2) { // Simple PCA-like projection using RGB values const rgbData = colorDataArray.map((c) => { const rgb = d3.rgb(c); return [rgb.r / 255, rgb.g / 255, rgb.b / 255]; }); // Center the data const mean = [0, 1, 2].map((i) => d3.mean(rgbData, (d) => d[i])); const centered = rgbData.map((d) => d.map((v, i) => v - mean[i])); // Simple projection onto first two principal components // (This is a simplified version, not full PCA) const pc1 = [0.577, 0.577, 0.577]; // Equal weights const pc2 = [0.707, -0.707, 0]; // R-G contrast projectedData = colorData.map((d, i) => { const c = centered[i]; return { ...d, x: (c[0] * pc1[0] + c[1] * pc1[1] + c[2] * pc1[2]) * 2 + 0.5, y: (c[0] * pc2[0] + c[1] * pc2[1] + c[2] * pc2[2]) * 2 + 0.5 }; }); } // Scale to plot dimensions const margin = 60; const plotWidth = width - 2 * margin; const plotHeight = height - 2 * margin; const scaledData = projectedData.map((d) => ({ ...d, plotX: margin + d.x * plotWidth, plotY: margin + (1 - d.y) * plotHeight, // Flip y axis size: dotSize * (0.5 + d.z) // Size varies with z dimension, simplified calculation })); // Create title based on space and projection let title = `${header} Color Space: ${space.toUpperCase()}`; if (space === "hsl") { title += " (Hue-Saturation wheel)"; } else if (space === "rgb") { title += " (Red vs Blue)"; } else if (space === "lab") { title += " (a* vs b*, size = L*)"; } else if (space === "rg") { title += " (Chromaticity diagram)"; } const marks = []; // Add grid if requested if (showGrid) { if (space === "hsl") { // Circular grid for HSL const circles = [0.2, 0.4, 0.6, 0.8, 1.0]; circles.forEach((r) => { const points = Array.from({ length: 37 }, (_, i) => { const angle = (i * 10 * Math.PI) / 180; return { x: margin + plotWidth / 2 + ((r * plotWidth) / 2) * Math.cos(angle), y: margin + plotHeight / 2 - ((r * plotHeight) / 2) * Math.sin(angle) }; }); marks.push( Plot.line(points, { x: "x", y: "y", stroke: "#e0e0e0", strokeWidth: 1 }) ); }); // Radial lines for hues for (let h = 0; h < 360; h += 30) { const angle = (h * Math.PI) / 180; marks.push( Plot.link( [ { x1: margin + plotWidth / 2, y1: margin + plotHeight / 2, x2: margin + plotWidth / 2 + (plotWidth / 2) * Math.cos(angle), y2: margin + plotHeight / 2 - (plotHeight / 2) * Math.sin(angle) } ], { x1: "x1", y1: "y1", x2: "x2", y2: "y2", stroke: "#f0f0f0", strokeWidth: 1 } ) ); } } else { // Regular grid const gridLines = 5; for (let i = 0; i <= gridLines; i++) { const pos = margin + (i / gridLines) * plotWidth; marks.push( Plot.ruleX([pos], { stroke: "#e0e0e0", strokeWidth: 1 }), Plot.ruleY([margin + (i / gridLines) * plotHeight], { stroke: "#e0e0e0", strokeWidth: 1 }) ); } } } // Add axis labels if (showLabels) { const labels = []; if (space === "hsl") { // Hue labels around circle const hueLabels = [ { angle: 0, text: "Red", color: "#ff0000" }, { angle: 60, text: "Yellow", color: "gold" }, { angle: 120, text: "Green", color: "#00ff00" }, { angle: 180, text: "Cyan", color: "#00ffff" }, { angle: 240, text: "Blue", color: "#0000ff" }, { angle: 300, text: "Magenta", color: "#ff00ff" } ]; hueLabels.forEach(({ angle, text, color }) => { const rad = (angle * Math.PI) / 180; labels.push({ x: margin + plotWidth / 2 + (plotWidth / 2 + 25) * Math.cos(rad), y: margin + plotHeight / 2 - (plotHeight / 2 + 25) * Math.sin(rad), text, color }); }); marks.push( Plot.text(labels, { x: "x", y: "y", text: "text", fill: "color", fontSize: 18, fontWeight: "bold", textAnchor: "middle" }) ); } else { // Axis labels for cartesian plots let xLabel, yLabel; if (space === "rgb") { xLabel = "Red →"; yLabel = "Blue →"; } else if (space === "lab") { xLabel = "a* (green-red) →"; yLabel = "b* (blue-yellow) →"; } else if (space === "rg") { xLabel = "Red chromaticity →"; yLabel = "Green chromaticity →"; } marks.push( Plot.text( [{ x: margin + plotWidth / 2, y: height - 20, text: xLabel }], { x: "x", y: "y", text: "text", fontSize: 11, textAnchor: "middle" } ), Plot.text([{ x: 20, y: margin + plotHeight / 2, text: yLabel }], { x: "x", y: "y", text: "text", fontSize: 11, textAnchor: "middle", rotate: -90 }) ); } } // Add color dots marks.push( Plot.dot(scaledData, { x: "plotX", y: "plotY", r: 10, fill: "color", tip: true, channels: { Name: "name", Color: "hex", Details: "label" } }) ); // Add connecting lines if few colors if ( colorDataArray.length <= 10 && colorDataArray.length > 1 && projection !== "grid" ) { const sortedData = [...scaledData].sort((a, b) => { if (space === "hsl") { const hslA = d3.hsl(a.color); const hslB = d3.hsl(b.color); return (hslA.h || 0) - (hslB.h || 0); } return a.index - b.index; }); marks.push( Plot.line(sortedData, { x: "plotX", y: "plotY", stroke: "#999", strokeWidth: 1, strokeOpacity: 0.3, strokeDasharray: "2,2" }) ); } return Plot.plot({ style: { background: "white" // or any color }, title, width, height, x: { domain: [0, width], axis: null }, y: { domain: [0, height], axis: null }, marks }); } // Usage examples: // plotColor2D(["#ff6b35", "#2196F3", "#4CAF50"]) // Default HSL space // plotColor2D(colors, {space: "rgb"}) // RGB space // plotColor2D(colors, {space: "lab"}) // LAB space // plotColor2D(colors, {space: "rg"}) // Chromaticity diagram // plotColor2D(colors, {space: "hsl", dotSize: 12}) // Larger dots // plotColor2D(colors, {projection: "grid"}) // Grid layout // plotColor2D(colors, {projection: "pca"}) // PCA-like projection37:Te94,function checkContrast(color, palette) { let f = d3.format(".2~f"); // Create container div const container = document.createElement("div"); // Add CSS const style = document.createElement("style"); style.textContent = ` .contrast-rect, .contrast-row { transition: all 0.2s ease; } .contrast-rect:hover, .contrast-rect.highlight { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.3); border: 2px solid #007bff; } .contrast-row:hover, .contrast-row.highlight { background-color: #f0f8ff !important; transform: scale(1.02); } .contrast-rect { cursor: pointer; border: 1px solid #ccc; box-sizing: border-box; margin: 2px; } .contrast-row { cursor: pointer; } `; container.appendChild(style); // Helper functions const highlightRow = (index) => { removeHighlight(); const row = container.querySelector( `tr.contrast-row[data-index="${index}"]` ); if (row) row.classList.add("highlight"); }; const highlightRect = (index) => { removeHighlight(); const rect = container.querySelector( `div.contrast-rect[data-index="${index}"]` ); if (rect) rect.classList.add("highlight"); }; const removeHighlight = () => { container.querySelectorAll(".highlight").forEach((el) => { el.classList.remove("highlight"); }); }; // Create rectangles container const rectsContainer = document.createElement("div"); for (let x in palette) { const rect = document.createElement("div"); rect.className = "contrast-rect"; rect.dataset.index = x; rect.style.cssText = `width:40px;height:40px;padding:5px;font-size:24px;float:left;background-color:${palette[x]};color:${color}`; rect.textContent = "Aa"; rect.addEventListener("mouseover", () => highlightRow(x)); rect.addEventListener("mouseout", removeHighlight); rectsContainer.appendChild(rect); } container.appendChild(rectsContainer); // Clear float const clearDiv = document.createElement("div"); clearDiv.style.clear = "both"; container.appendChild(clearDiv); // Create table const table = document.createElement("table"); table.id = "contrast-table"; table.style.cssText = "border-collapse: collapse; margin-top: 10px;"; // Table header const thead = document.createElement("thead"); const headerRow = document.createElement("tr"); [ "text color", "background", "AA [sm,lg,ghx]", "AAA [sm,lg,ghx]", "contrast" ].forEach((text) => { const th = document.createElement("th"); th.textContent = text; th.style.cssText = "border: 1px solid #ccc; padding: 8px; background: #f5f5f5;"; headerRow.appendChild(th); }); thead.appendChild(headerRow); table.appendChild(thead); // Table body const tbody = document.createElement("tbody"); for (let x in palette) { const row = document.createElement("tr"); row.className = "contrast-row"; row.dataset.index = x; const cells = [ showColor(color, false), showColor(palette[x], false), `[ ${checkAA(contrast(color, palette[x]))} ]`, `[ ${checkAAA(contrast(color, palette[x]))} ]`, `${f(contrast(color, palette[x]))}` ]; cells.forEach((cellContent) => { const td = document.createElement("td"); td.innerHTML = cellContent; td.style.cssText = "border: 1px solid #ccc; padding: 8px;"; row.appendChild(td); }); row.addEventListener("mouseover", () => highlightRect(x)); row.addEventListener("mouseout", removeHighlight); tbody.appendChild(row); } table.appendChild(tbody); container.appendChild(table); return container; }38:[] 32:{"id":"a9ccc3f84e82c618","slug":"color","title":"My confusion with color colour.","thumbnail":"afd5f3712ef2dcfd9d4f42fbeb9301ce4e72265704a5f9772fc05e4a74197fc5","access_level":"public","create_time":"$D2022-12-21T14:45:08.671Z","update_time":"$D2025-10-14T10:22:22.924Z","view_time":null,"first_public_time":"$D2022-12-24T17:30:15.255Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":2134,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"My confusion with color colour.","cells":[{"id":407,"value":"# My confusion with ~~color~~ ${'colour.'.split('').map((d,i) => `${d}` )}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1714,"value":"checkContrast(\"#f25D27\", [\n \"#000000\",\n \"#1b1b1b\",\n \"#303030\",\n \"#474747\",\n \"#5e5e5e\",\n \"#777777\",\n \"#919191\",\n \"#ababab\",\n \"#c6c6c6\",\n \"#e2e2e2\",\n \"#ffffff\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"colors = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"] //ROYGBIV","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"I'll admit I don't really know much beyond the color wheel, rgb or cmyk when it comes to different color coordinate spaces. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"### Color spaces that are designed for computers / machine readable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"**HSL** (for hue, saturation, lightness) and **HSV** (for hue, saturation, value; also known as **HSB**, for hue, saturation, brightness) are alternative representations of the **RGB** (red, green, blue) color model,","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"d3.hsl()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"d3.rgb()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"### Color spaces that are designed for humans / human friendly","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"International Commission on Illumination
\n*Commission internationale de l'éclairage (CIE)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"**CIELAB** (a.k.a. “Lab”) *nonlinear*
\n**CIELChab** (a.k.a. “LCh” or “HCL”)
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"- L: lightness: in the range [0, 100]\n- C is the polar coordinates of chroma, relative saturation in [0, 230]\n- H is the hue angle of the hue in the CIELAB color wheel (degree [0, 360])","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"*CIELChab (lch)* ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"d3.lch()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"*CIELChab (hcl)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"d3.hcl()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"*CIELAB* (L\\*a\\*b\\*) perceptually uniform using a more simple formula than CIEXYZ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"d3.lab()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":" - L* for perceptual lightness (0 - 100, black - white)\n - a\\*, b\\* for the four unique colors of human vision: red, green, blue and yellow.\n - a\\* axis represents green(*negative*) – red(*positive*)\n - b\\* axis represents blue(*negative*) – yellow(*positive*)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"CIELUV L\\*u\\*v\\* ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"d3Hsluv.hsluv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":583,"value":"| Color Model (computer readable) | min | max |\n| ---------------------- |\n| **sRGB** (r,g,b)|||\n|- red|0|255|\n|- green|0|255|\n|- blue|0|255|\n| **HSL** (h,s,l) or (h,s,b) or (h,s,v)|||\n|- hue|0|360|\n|- saturation|0|1|\n|- lightness / brightness / value|0|1|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":610,"value":"| Color Model (human readable) | min | max |\n| ---------------------- |\n|**CIEHLCHab** (h,c,l / l,c,h)|||\n|- h hue angle|0|360|\n|- c chroma relative saturation or polar coordinate?|0|230|\n|- l lightness|0|100|\n| **CIELAB L\\*a\\*b\\*** (L,a,b)|||\n|- L* perceptial lightness|0 (white)|100 (black)|\n|- a* (ranges from green – red) (unbound finite)|-128| 127|\n|- b* (ranges from blue – yellow) (unbound finite)|-128| 127|\n| **HSLuv** (L,u,v) HSLuv is a human-friendly alternative to HSL.| |||\n|- luminance|0|360|\n|- u (chromaticity coordinates of a \"specified white object\")|0|100|\n|- v (chromaticity coordinates of a \"specified white object\")|0|100|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":745,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1773,"value":"d3-color does all the hard math for us.
Below is showing the interpretation of the text \"*red*\" in different color coordinates (rgb, hsl, lch, hcl, lab, hsluv) from above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"rgb_red = d3.rgb(\"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"hsl_red = d3.hsl(\"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"lch_red = d3.lch(\"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"hcl_red = d3.hcl(\"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"lab_red = d3.lab(\"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"hsluv_red = d3Hsluv.hsluv(\"red\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1759,"value":"Using a function made with d3-color we can access and manipulate those parameters, and convert back into machine readable code to visualize it.

showColor('color','format')\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"$${showColor(\"red\")}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1761,"value":"$${showColor(\"red\",'hex')}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1763,"value":"$${showColor(\"red\",'hsl')}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1842,"value":"$${swatch(\"red\")}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":743,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1793,"value":"What 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. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"sRGB is capped at a value of 255, there is no displayable value above 255, or *brightness* when using rgb. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1160,"value":"How do we tell if a color is similar or different. Distance (but more complicated than just d = ( x₂ − x₁ ) ² + ( y₂− y₁)²). 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.

The most basic request is if I have a color, what is considered by a human the same as what a computer considers darker or lighter than the original color.

Starting with red, in RGB, is there a darker or brighter concept within that coordinate system?

\n```color.darker(k), d3.color(), color.brighter(k)```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"displayColors(\n 20,\n 20,\n [\n rgb_red.darker().toString(),\n rgb_red.toString(),\n rgb_red.brighter().toString()\n ],\n \"rgb\",\n true,\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"What about HSL?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":559,"value":"displayColors(\n 20,\n 20,\n [\n hsl_red.darker().toString(),\n hsl_red.toString(),\n hsl_red.brighter().toString()\n ],\n \"hsl\",\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1822,"value":"What about HCL?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":755,"value":"displayColors(\n 20,\n 20,\n [\n hcl_red.darker().toString(),\n hcl_red.toString(),\n hcl_red.brighter().toString()\n ],\n \"hcl\",\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"What about Lab?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"displayColors(\n 20,\n 20,\n [\n lab_red.darker().toString(),\n lab_red.toString(),\n lab_red.brighter().toString()\n ],\n \"lab\",\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"What about HLuv?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":538,"value":"displayColors(\n 20,\n 20,\n [\n hsluv_red.darker().toString(),\n hsluv_red.toString(),\n hsluv_red.brighter().toString()\n ],\n \"luv\",\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1462,"value":"c = [0, 180, 45, 180 + 45].map((d) => d3Hsluv.hsluv(d, 100, 60))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"g = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((d) => d3.lab(d, 0, 0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"displayColors(20, 20, c, \"luv\", true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"displayColors(20, 20, g, \"lab\", true, false, \"hex\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"displayColors(20, 20, colors, \"luv\", true, true, \"hex\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1853,"value":"//sorted by L\n\ndisplayColors(\n 20,\n 20,\n [\n d3[\"schemeCategory10\"][5],\n d3[\"schemeCategory10\"][0],\n d3[\"schemeCategory10\"][3],\n d3[\"schemeCategory10\"][4],\n d3[\"schemeCategory10\"][7],\n d3[\"schemeCategory10\"][2],\n d3[\"schemeCategory10\"][1],\n d3[\"schemeCategory10\"][9],\n d3[\"schemeCategory10\"][8]\n ],\n \"lab\",\n true,\n true,\n \"hex\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"displayColors(20, 20, g2, \"lab\", true, false, \"hex\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1897,"value":"lab2 = [\n [35, 22, 16],\n [42, -8.8, -40.17],\n [46, 65, 46],\n [50, 31, -38],\n [53, 0, 0],\n [57, -49.89, 47.68],\n [66, 46, 72],\n [70, -35, -20],\n [75, -12, 69]\n].map((d) => d3.lab(d[0], d[1], d[2]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"displayColors(20, 20, lab2, \"lab\", true, true, \"hex\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"make adjustments to the L* and reapply to the colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1862,"value":"g2 = [35, 42, 46, 50, 53, 57, 66, 70, 75].map((d) => d3.lab(d, 0, 0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"displayColors(20, 20, [\"#9d4327\", \"#ce6e53\", \"#edc4b2\"], \"rgb\", true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"displayColors(\n 20,\n 20,\n [\n d3Hsluv.hsluv(\"#9d4327\").toString(),\n d3Hsluv.hsluv(\"#ce6e53\").toString(),\n d3Hsluv.hsluv(\"#edc4b2\").toString()\n ],\n \"luv\",\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"displayColors(\n 20,\n 20,\n [\n d3Hsluv.hsluv(\"#9d4327\"),\n d3Hsluv.hsluv(\"#9d4327\").brighter(),\n d3Hsluv.hsluv(\"#9d4327\").brighter().brighter()\n ],\n \"luv\",\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"displayColors(\n 20,\n 20,\n [\n d3Hsluv.hsluv(\"rgb(225, 99, 60)\").darker(),\n d3Hsluv.hsluv(\"rgb(225, 99, 60)\"),\n d3Hsluv.hsluv(\"rgb(225, 99, 60)\").brighter()\n ],\n \"luv\",\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1547,"value":">The WCAG guidelines have three levels of conformance that you can meet; A, AA and AAA, and each is progressively harder.\n\n>Level A is a subset of Level AA. There are 25 criteria that you have to meet to reach Level A.\nTo reach Level AA you have to meet 13 more criteria in addition to the 25 for Level A.\nLevel AAA is the icing on the cake with 23 more criteria.\n\n>WCAG 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\n>Large 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":2133,"value":"demo = `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1617,"value":"checkContrast(\"#e3b740\", [\"#c5cec9\", \"#a1b0b0\", \"#ffffff\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"checkContrast(\"#e68a17\", [\n \"#000000\",\n \"#1b1b1b\",\n \"#303030\",\n \"#474747\",\n \"#5e5e5e\",\n \"#777777\",\n \"#919191\",\n \"#ababab\",\n \"#c6c6c6\",\n \"#e2e2e2\",\n \"#ffffff\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"checkContrast(\"#2e75b8\", [\n \"#000000\",\n \"#1b1b1b\",\n \"#303030\",\n \"#474747\",\n \"#5e5e5e\",\n \"#777777\",\n \"#919191\",\n \"#ababab\",\n \"#c6c6c6\",\n \"#e2e2e2\",\n \"#ffffff\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"checkContrast(\"#5c8c42\", [\n \"#000000\",\n \"#1b1b1b\",\n \"#303030\",\n \"#474747\",\n \"#5e5e5e\",\n \"#777777\",\n \"#919191\",\n \"#ababab\",\n \"#c6c6c6\",\n \"#e2e2e2\",\n \"#ffffff\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1747,"value":"checkContrast(\"#3b8991\", [\n \"#000000\",\n \"#1b1b1b\",\n \"#303030\",\n \"#474747\",\n \"#5e5e5e\",\n \"#777777\",\n \"#919191\",\n \"#ababab\",\n \"#c6c6c6\",\n \"#e2e2e2\",\n \"#ffffff\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"checkContrast(\"#a65583\", [\n \"#000000\",\n \"#1b1b1b\",\n \"#303030\",\n \"#474747\",\n \"#5e5e5e\",\n \"#777777\",\n \"#919191\",\n \"#ababab\",\n \"#c6c6c6\",\n \"#e2e2e2\",\n \"#ffffff\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"checkContrast(\"#bd3823\", [\n \"#000000\",\n \"#1b1b1b\",\n \"#303030\",\n \"#474747\",\n \"#5e5e5e\",\n \"#777777\",\n \"#919191\",\n \"#ababab\",\n \"#c6c6c6\",\n \"#e2e2e2\",\n \"#ffffff\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"checkContrast(\"#b5a06D\", [\n \"#000000\",\n \"#1b1b1b\",\n \"#303030\",\n \"#474747\",\n \"#5e5e5e\",\n \"#777777\",\n \"#919191\",\n \"#ababab\",\n \"#c6c6c6\",\n \"#e2e2e2\",\n \"#ffffff\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"function showColor(str, format, name) {\n let output = d3.rgb(str);\n if (format != false) {\n if (format == \"hex\") {\n output = d3.rgb(str).formatHex();\n }\n if (format == \"hsl\") {\n let t = d3.rgb(str).formatHsl();\n let hsl = d3.hsl(str);\n console.log(hsl);\n let truncated = `hsl(${hsl.h.toFixed(2) || 0}, ${hsl.s.toFixed(\n 2\n )}, ${hsl.l.toFixed(2)}%)`;\n output = truncated;\n }\n if (format == \"rgb\") {\n output = d3.rgb(str);\n }\n name = name ?? \"\";\n return `${name} ${output}${str}
`;\n } else {\n return `${str}
`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":"plotColorSwarm([\"#ff0000\", \"#00ff00\", \"#0000ff\"], { space: \"lab\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2036,"value":"plotColorSwarm(\n [\n \"#77443a\",\n \"#006aa5\",\n \"#d02325\",\n \"#9164b8\",\n \"#7f7f7f\",\n \"#289d29\",\n \"#fa7b0a\",\n \"#20bdce\",\n \"#bebe25\"\n ],\n { space: \"hsl\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2060,"value":"plotColorRadar([\"#ff0000\", \"#00ff00\", \"#0000ff\"], {\n space: \"rgb\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2010,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2067,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1973,"value":"d3.rgb().formatHsl()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1850,"value":"function swatch(str) {\n let output = d3.rgb(str);\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1994,"value":" function checkAA(contrast) {\n let large = false;\n let small = false;\n let graphics = false;\n\n if (contrast >= 3) {\n large = true;\n graphics = true;\n if (contrast >= 4.5) {\n small = true;\n }\n }\n return [small ? \"✅\" : \"❌\", large ? \"✅\" : \"❌\", graphics ? \"✅\" : \"❌\"];\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1998,"value":"function checkAAA(contrast) {\n let large = false;\n let small = false;\n let graphics = false;\n\n if (contrast >= 4.5) {\n large = true;\n graphics = true;\n if (contrast >= 7) {\n small = true;\n }\n }\n return [small ? \"✅\" : \"❌\", large ? \"✅\" : \"❌\", graphics ? \"✅\" : \"❌\"];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"function luminance(r, g, b) {\n var a = [r, g, b].map(function(v) {\n v /= 255;\n return v <= 0.03928 ?\n v / 12.92 :\n Math.pow((v + 0.055) / 1.055, 2.4);\n });\n return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;\n}\n//https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"function contrast(color1, color2) {\n let rgb1 = d3.rgb(color1);\n let rgb2 = d3.rgb(color2);\n var lum1 = luminance(rgb1.r, rgb1.g, rgb1.b);\n var lum2 = luminance(rgb2.r, rgb2.g, rgb2.b);\n var brightest = Math.max(lum1, lum2);\n var darkest = Math.min(lum1, lum2);\n return (brightest + 0.05) / (darkest + 0.05);\n}\n//https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"d3jnd = require(\"d3-jnd\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"function getDistance(x1, y1, x2, y2) {\n let y = x2 - x1;\n let x = y2 - y1;\n\n return Math.sqrt(x * x + y * y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"diff = require(\"d3-color-difference\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"d3Hsluv = require(\"d3-hsluv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"import { ramp } from \"@mbostock/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"http://vrl.cs.brown.edu/color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"