31:[] 2f:{"title":"Sequential Color Palette Generation using OKLCH","cells":[{"id":0,"value":"# Sequential Color Palette Generation using OKLCH\n\nUsing the LCH color space we can extract the lightness, chroma, and hue properties of an input color to create a single hue sequential color palette. We adjust the lightness and chroma of the input color while keeping its hue the same.\n\nIt's worth noting that this approach is a bit naive. Common color palettes in data visualization such as those found in [Color Brewer](https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=7) don't keep the hue exactly the same for each color in a single hue sequential palette, nor do they adjust the lightness and chroma linearly. The latter option may be implemented here by choosing an exponential scale instead of a linear scale.\n\nYou may analyze a color palette created here by copying and pasting its `oklch` CSS values into the [Color Palette Analyzer using OKLCH Notebook](https://observablehq.com/@clhenrick/color-palette-analysis-using-oklch).","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"viewof inputColor = Inputs.color({ label: \"Source color\", value: \"#0055a9\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"colorAnalysis = {\n const labels = [\"lightness\", \"chroma\", \"hue\"];\n return htl.html`

\n\n

Source color LCH analysis

${label}:: ${format(\n colorOkLchArr[index]\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"viewof numberColors = Inputs.range([5, 12], {\n label: \"Number of Colors\",\n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof minLightness = Inputs.range([0, 0.5], {\n label: \"Minimum Lightness\",\n step: 0.01,\n value: 0.4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof maxLightness = Inputs.range([0.5, 1], {\n label: \"Maximum Lightness\",\n step: 0.01,\n value: 0.95\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof minChroma = Inputs.range([0, 0.4], {\n label: \"Minimum Chroma\",\n step: 0.01,\n value: 0.04\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"viewof maxChroma = Inputs.range([0.01, 0.4], {\n label: \"Maximum Chroma\",\n step: 0.01,\n value: colorOkLchArr[1] - 0.01 > 0 ? colorOkLchArr[1] - 0.01 : 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof scaleType = Inputs.radio([\"Linear\", \"Exponential\"], {\n label: \"Scale Type\",\n value: \"Exponential\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"viewof exponent = Inputs.range([1.1, 10], {\n label: \"Exponent\",\n step: 0.1,\n value: 1.7\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"createPaletteVis(sequentialPalette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"~~~css\n/* the above palette as oklch CSS functions: */\n${sequentialPaletteOklch.join(\"\\n\")}\n\n/* the above palette as CSS hex codes */\n${sequentialPaletteHexCodes.join(\"\\n\")}\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"sequentialPaletteOklch = sequentialPalette.map(([l, c, h]) =>\n new Color(`oklch(${l} ${c} ${h})`).toString()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"sequentialPaletteHexCodes = sequentialPalette\n .map(([l, c, h]) => new Color(\"oklch\", [l, c, h]))\n .map((color) => color.to(\"srgb\").toString({ format: \"hex\" }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"colorOkLchArr = new Color(inputColor).to(\"oklch\").coords","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"sequentialPalette = {\n const [l, c, h] = colorOkLchArr;\n const palette = lightnessValues.map((value, index) => [\n value,\n chromaValues[index],\n h\n ]);\n return palette;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"scale = {\n if (scaleType === \"Linear\") {\n return d3.scaleLinear;\n } else if (scaleType === \"Square Root\") {\n return d3.scaleSqrt;\n } else {\n return d3.scalePow;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"lightnessScale = {\n const ls = scale([0, numberColors - 1], [maxLightness, minLightness]);\n if (scaleType === \"Exponential\") {\n ls.exponent(exponent);\n }\n return ls;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"chromaScale = {\n const cs = scale([0, numberColors - 1], [minChroma, maxChroma]);\n if (scaleType === \"Exponential\") {\n cs.exponent(exponent);\n }\n return cs;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"lightnessValues = Array.from({ length: numberColors }).map((_, index) =>\n lightnessScale(index)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"chromaValues = Array.from({ length: numberColors }).map((_, index) =>\n chromaScale(index)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"format = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {\n createPaletteVis,\n getOklchArr\n} from \"@clhenrick/exploring-oklch-color-using-colorjs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"Color = (await import(\"https://unpkg.com/colorjs.io@0.5.0/dist/color.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}