${c.code} · Hue: ${c.hue.toFixed(2)} · Lum: ${c.luminance.toFixed( 2 )}

30:T813,{ const width = 640; const height = 340; const r = 6; const strokeWidth = 1; let margin = { x: r + strokeWidth, y: r + strokeWidth }; const numOfYTicks = 10; const numOfXTicks = 36; const innerWidth = width - 2 * margin.y; const innerHeight = height - 2 * margin.x; const xScale = d3 .scaleLinear() .domain([0, 1]) .range([0, innerWidth]); const yScale = d3 .scaleLinear() .domain([0, 1]) .range([innerHeight, 0]); const yTicks = linspace(numOfYTicks); const xTicks = linspace(numOfXTicks); const drawYTicks = () => { const yTicksGs = yTicks.map( tick => `` ); const xTicksGs = xTicks.map( tick => `` ); return ` ${yTicksGs.join()} ${xTicksGs.join()} `; }; const drawColorsSwatches = () => { const swatches = parsedColors.map( c => ` ${c.code} · Hue: ${c.hue.toFixed(2)} · Lum: ${c.luminance.toFixed( 2 )} ` ); return `${swatches.join()}`; }; const svg = html`

0Hue360

1Luminance0

`; yield svg; }31:T80f,{ const width = 640; const height = 340; const r = 6; const strokeWidth = 1; let margin = { x: r + strokeWidth, y: r + strokeWidth }; const numOfYTicks = 10; const numOfXTicks = 36; const innerWidth = width - 2 * margin.y; const innerHeight = height - 2 * margin.x; const xScale = d3 .scaleLinear() .domain([0, 1]) .range([0, innerWidth]); const yScale = d3 .scaleLinear() .domain([0, 1]) .range([innerHeight, 0]); const yTicks = linspace(numOfYTicks); const xTicks = linspace(numOfXTicks); const drawYTicks = () => { const yTicksGs = yTicks.map( tick => `` ); const xTicksGs = xTicks.map( tick => `` ); return ` ${yTicksGs.join()} ${xTicksGs.join()} `; }; const drawColorsSwatches = () => { const swatches = parsedColors.map( c => ` ${c.code} · Hue: ${c.hue.toFixed(2)} · chroma: ${c.chroma.toFixed( 2 )} ` ); return `${swatches.join()}`; }; const svg = html`

0Hue360

150Chroma0

`; yield svg; }32:T807,{ const width = 640; const height = 340; const r = 6; const strokeWidth = 1; let margin = { x: r + strokeWidth, y: r + strokeWidth }; const numOfYTicks = 10; const numOfXTicks = 15; const innerWidth = width - 2 * margin.y; const innerHeight = height - 2 * margin.x; const xScale = d3.scaleLinear().domain([0, 1]).range([0, innerWidth]); const yScale = d3.scaleLinear().domain([0, 1]).range([innerHeight, 0]); const yTicks = linspace(numOfYTicks); const xTicks = linspace(numOfXTicks); const drawYTicks = () => { const yTicksGs = yTicks.map( (tick) => `` ); const xTicksGs = xTicks.map( (tick) => `` ); return ` ${yTicksGs.join()} ${xTicksGs.join()} `; }; const drawColorsSwatches = () => { const swatches = parsedColors.map( (c) => ` ${c.code} · Chroma: ${c.chroma.toFixed( 2 )} · Lum: ${c.luminance.toFixed(2)} ` ); return `${swatches.join()}`; }; const svg = html`

0Chroma150

1Luminance0

`; yield svg; }33:[] 2e:{"title":"Color Plots","cells":[{"id":142,"value":"md`# Color Plots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"viewof colors = Inputs.textarea({\n label: md`**Colors (hex, rgb, or hsl)**
_One color on each line_`,\n rows: 10,\n value:\n // Colors from Tailwind CSS. https://tailwindcss.com/docs/background-color\n `#f9fafb\n#f3f4f6\n#e5e7eb\n#d1d5db\n#9ca3af\n#6b7280\n#4b5563\n#374151\n#1f2937\n#111827\n\n#fef2f2\n#fee2e2\n#fecaca\n#fca5a5\n#f87171\n#ef4444\n#dc2626\n#b91c1c\n#991b1b\n#7f1d1d\n`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`## Hue Vs Luminance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`## Hue Vs Chroma`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"## Contrast","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"viewof highlightContrast = Inputs.radio(\n new Map([\n [\"Minimum (3:1)\", 3],\n [\"AA (4.5:1)\", 4.5],\n [\"AAA (7:1)\", 7]\n ]),\n {\n label: \"Highlight contrast\",\n value: 3\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"contrastTable = {\n const header = htl.html`${colorCodes.map(\n (h) => html`${swatchHtml(h)}`\n )}`;\n\n const body = contrastMap.map((row, i) => {\n const cells = row.map((col, j) => {\n const v = contrastMap[i][j];\n return htl.html`= highlightContrast\n }>${formatContrast(v)}`;\n });\n return htl.html`${swatchHtml(colorCodes[i])}${cells}`;\n });\n\n return htl.html`

\n \n ${header}\n ${body}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`## Chroma Vs Luminance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"formatContrast = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"colorCodes = {\n let codes = colors\n .split(\"\\n\")\n .map((l) => l.trim())\n .filter((c) => chroma.valid(c));\n\n let hex = codes.map((d) => chroma(d).hex());\n\n if (!hex.includes(\"#ffffff\")) {\n codes = [...codes, \"#ffffff\"];\n }\n\n if (!hex.includes(\"#000000\")) {\n codes = [...codes, \"#000000\"];\n }\n return codes;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"contrastMap = colorCodes.map((row, i) =>\n colorCodes.map((col, j) => (row === col ? null : chroma.contrast(row, col)))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"contrastingTextColor = (color) => (d3.lab(color).l < 65 ? \"white\" : \"black\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"swatchHtml(\"#ff0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"swatchHtml = (code) =>\n htl.html`

${code}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"parsedColors = {\n return colorCodes.map((c) => {\n const luminance = getLuminance(c);\n const chroma = getChroma(c);\n const hue = getHue(c);\n const sat = getSaturation(c);\n const lit = getLightness(c);\n return {\n code: c,\n chroma,\n chromaUV: chromaUV(chroma),\n luminance,\n luminanceUV: luminance,\n hue,\n hueUV: hue / 360,\n sat,\n lit\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"getLuminance = code => chroma(code).luminance();","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"getChroma = code => {\n const [, c] = chroma(code).lch();\n return c;\n };","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"getHue = c => {\n const [h] = chroma(c).hsl();\n\n if (isNaN(h)) return 0;\n\n return h;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"getSaturation = c => {\n const [_, s] = chroma(c).hsl();\n\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"getLightness = c => {\n const [h,s,l] = chroma(c).hsl();\n\n return l;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"chromaUV = d3.scaleLinear().domain([0, 150])","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"linspace = n => Array.from({ length: n }).map((_, i) => i / (n - 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"chroma = require(\"chroma-js@2.1.0/chroma.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}