29:null 2a:["$","title",null,{"children":"Color Palette Analysis using OKLCH | Chris Henrick | Observable"}] 2f:T5ab,createPaletteVisVertical = (colorsArray = [], backgroundColor = "white") => { const size = SWATCH_SIZE + SWATCH_STROKE * 2; const paletteListItem = (index) => { const colorOklch = colorsArray[index]; return htl.html`

${dl(index)}

`; }; const dl = (index) => { const colorOklch = colorsArray[index]; const props = ["lightness", "chroma", "hue"]; return htl.html`

${colorOklch.coords.map((value, index) => dtdd(props[index], value) )}`; }; const dtdd = (key, value) => htl.html`

${key}:

${value?.toFixed(2)}

`; const container = htl.html`

${colorsArray.map((oklch, index) => paletteListItem(index))}

`; return container; }30:[] 2d:{"id":"95af1b7818a219f2","slug":"color-palette-analysis-using-oklch","title":"Color Palette Analysis using OKLCH","thumbnail":"490a5f857814ebe0cc92013117a717587932661305170d518a15d26b2dfa21ff","access_level":"public","create_time":"$D2024-07-29T20:15:17.654Z","update_time":"$D2024-08-28T00:15:25.744Z","view_time":null,"first_public_time":"$D2024-07-31T18:01:20.972Z","has_unpublished_edits":null,"fork":{"id":"85eea7b83e139717","slug":"exploring-oklch-color-using-colorjs","title":"Exploring OKLCH Color (using ColorJS)","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":2,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":481,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"},{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"97b72f049e01d6ba","slug":"color/2","title":"color","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"Color Palette Analysis using OKLCH","cells":[{"id":0,"value":"# Color Palette Analysis using OKLCH\n\nAnalyze an input color palette using the (OK)LCH color space. This helps get a sense of how the values for lightness, chroma, and hue change from the start to the end of the color palette. This can be helpful when inspecting a color palette for data viz such as sequential or diverging color palettes.\n\nThis notebook uses [ColorJS](https://colorjs.io/) to accomplish this, however it's worth noting that CSS now has its own [`oklch`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) function with a baseline of \"newly available\" meaning it's available in all modern and up to date browsers. ColorJS is able to detect whether the [browser being used supports `oklch()`](https://colorjs.io/docs/output#get-a-displayable-css-color-value) and if not provides a fallback in `rgb` or other desired color space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"viewof paletteInputTextbox = Inputs.textarea({\n label: \"Paste in color palette values. May be comma or newline delimited.\",\n value: defaultPalette.join(\", \")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"paletteVis = {\n const svg = createPaletteVis(inputPaletteParsed, \"white\", 120);\n return createPaletteContainer(svg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"~~~css\n/* The above palette as CSS ${inputPaletteParsed.every((color) => color.inGamut()) ? 'oklch' : 'hsl' } functions */\n${inputPaletteParsed.map(getCssColorString).join(\"\\n\")}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"## Lightness, Chroma, and Hue plotted as line graphs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"plots = htl.html`

\n ${lightnessPlot.cloneNode(true)}\n ${chromaPlot.cloneNode(true)}\n ${huePlot.cloneNode(true)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"inputPaletteToPlot","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"lightnessPlot = Plot.plot({\n x: { label: \"swatch step\" },\n y: { label: \"lightness (%)\" },\n title: \"Change in lightness \",\n // subtitle: \"Here is a subtitle\",\n // caption:\n // \"Lightness decreases linearily over the palette's swatches from a starting value of 99% to an ending value of 40%.\",\n marks: [\n Plot.frame({ strokeWidth: 1 }),\n Plot.gridY({ strokeOpacity: 0.3 }),\n Plot.lineY(\n inputPaletteToPlot.get(\"lightness\").map((d) => d * 100),\n { stroke: \"var(--color-accent)\", strokeWidth: 2, x: (d, i) => i + 1 }\n ),\n Plot.dot(\n inputPaletteToPlot.get(\"lightness\").map((d, i) => [i + 1, d * 100]),\n {\n fill: \"var(--color-accent)\",\n r: 4,\n stroke: \"var(--background-color)\"\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"chromaPlot = Plot.plot({\n x: { label: \"swatch step\" },\n y: { label: \"chroma\" },\n title: \"Change in chroma\",\n // caption:\n // \"Chroma increases from a starting value of 0.04 to a maximum value of 0.19 at step seven, then declines to 0.16 for the darkest swatch at step nine.\",\n marks: [\n Plot.frame({ strokeWidth: 1 }),\n Plot.gridY({ strokeOpacity: 0.3 }),\n Plot.lineY(inputPaletteToPlot.get(\"chroma\"), {\n stroke: \"var(--color-accent)\",\n strokeWidth: 2,\n x: (d, i) => i + 1\n }),\n Plot.dot(\n inputPaletteToPlot.get(\"chroma\").map((d, i) => [i + 1, d]),\n {\n fill: \"var(--color-accent)\",\n r: 4,\n stroke: \"var(--background-color)\"\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"huePlot = Plot.plot({\n x: { label: \"swatch step\" },\n y: { label: \"hue\" },\n title: \"Change in hue\",\n // caption:\n // \"Hue decreases from a starting value of 120 degrees to a minimum value of 20 degrees at step seven, then increases slightly to 30 degrees for the darkest swatch at step nine.\",\n marks: [\n Plot.frame({ strokeWidth: 1 }),\n Plot.gridY({ strokeOpacity: 0.3 }),\n Plot.lineY(inputPaletteToPlot.get(\"hue\"), {\n stroke: \"var(--color-accent)\",\n strokeWidth: 2,\n x: (d, i) => i + 1\n }),\n Plot.dot(\n inputPaletteToPlot.get(\"hue\").map((d, i) => [i + 1, d]),\n {\n fill: \"var(--color-accent)\",\n r: 4,\n stroke: \"var(--background-color)\"\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"defaultPalette = JSON.parse(\n '[\"#ffffe0\", \"#ffe0a9\", \"#ffbe84\", \"#ff986d\", \"#f47361\", \"#e35056\", \"#cb2f44\", \"#ae112a\", \"#8b0000\"]'\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"inputPalette = {\n let toReturn = [];\n try {\n JSON.stringify(paletteInputTextbox);\n toReturn = parseInputValues(paletteInputTextbox);\n } catch (error) {\n console.log(error);\n }\n return toReturn;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"parseInputValues = (str) => {\n const separatorNewline = \"\\n\";\n const separatorComma = \",\";\n const defaultSeparator = /\\s/;\n\n let split = [];\n\n if (str.includes(separatorNewline)) {\n split = str.split(separatorNewline);\n } else if (str.includes(separatorComma)) {\n split = str.split(separatorComma);\n } else {\n // resort to attempting to split on white space\n split = str.split(defaultSeparator);\n }\n\n return split.map((d) => d.replace(/('|\")/gi, \"\").trim());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"inputPaletteParsed = inputPalette.map(toColorOklch)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"inputPaletteToPlot = {\n const coords = inputPaletteParsed.map((color) => color.coords);\n const lightness = coords.map((values) => values[0]);\n const chromas = coords.map((values) => values[1]);\n const hues = coords.map((values) => values[2]);\n return new Map([\n [\"lightness\", lightness],\n [\"chroma\", chromas],\n [\"hue\", hues]\n ]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"toColorOklch = (colorStr) => new Color(colorStr).to(\"oklch\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"// `space` specifies a fallback color space if oklch is not supported,\n// see: https://colorjs.io/docs/output#get-a-displayable-css-color-value\ngetCssColorString = (color, space = \"hsl\") => color.display({ space })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"createPaletteContainer = (\n visPalette\n) => htl.html`

\n\n${visPalette}\n\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"createPaletteVis = (\n colorsArray,\n backgroundColor = \"white\",\n maxHeightPx = MAX_PALETTE_HEIGHT\n) => {\n const n = colorsArray.length;\n const w = n * SWATCH_SIZE + SWATCH_STROKE * 2;\n const h = SWATCH_SIZE + SWATCH_STROKE * 2;\n return htl.svg``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"createSwatch = (\n value,\n stroke = \"white\",\n x = SWATCH_STROKE,\n y = SWATCH_STROKE,\n w = SWATCH_SIZE,\n h = SWATCH_SIZE\n) =>\n htl.svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"MAX_PALETTE_HEIGHT = SWATCH_SIZE * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"SWATCH_SIZE = 32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"SWATCH_STROKE = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"linkStyles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"new Color(\"magenta\").toString({ format: \"hex\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"Color = (await import(\"https://unpkg.com/colorjs.io@0.5.0/dist/color.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"import { linkStyles } from \"@clhenrick/improve-link-styles-in-observable\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"