2f:T431,# Categorical color scheme test tool This notebook can help you develop your own categorical color palettes. You can edit it directly (and your temporary changes will be private to you) or fork it to save your work in your own copy. The scatter plot and brightness spectrum show the colors in the [CIELAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space). Next to it is a preview of the color with common mark types: text, larger blocks, lines, hollow squares, and filled dots. Some tips for using and reading the chart: - Colors that are close to each other on both the a\* and L\* axes are more likely to cause discriminability issues for people with deuteranopia (red-green color vision deficiency). - Colors closer to the center of the scatter plot are less saturated. - Colors plotted along a radial line from (a\* = 0, b\* = 0) to the edge of the circle will have a similar hue. - The palette array can have any number of colors specified using a [CSS color level 3 specifier](https://d3js.org/d3-color#color) (names, hex codes, `rgb()`, or `hsl()`).30:T457,function cielabScatter(palette, { darkMode = false } = {}) { let labPalette = palette.map((c,i)=>({...d3.lab(c), i, color: c, ...({})})); return Plot.plot({ width: size, height: size, style: { fontSize: 12 }, marks: [ Plot.frame({rx: size / 2, ry: size / 2, opacity: 0.2}), Plot.gridX({ticks: 3, opacity: 0.2}), Plot.gridY({ticks: 3, opacity: 0.2}), Plot.ruleX([0], {opacity: 0.25}), Plot.ruleY([0], {opacity: 0.25}), Plot.dot(labPalette, { x: "a", y: "b", r: 5, fill: { value: (d) => d.color, label: "Color" }, channels: { L: { value: "l", label: "L*" } }, tip: { format: { fill: (d,i) => `${d} (${i})` }, fill: darkMode ? "#202020" : "white" } }), ], x: { domain: [-80, 80], ticks: 3, tickSize: 0, labelArrow: null, labelAnchor: "center", label: "a*" }, y: { domain: [-80, 80], ticks: 3, tickSize: 0, labelArrow: null, labelAnchor: "center", label: "b*" } }); }31:[] 2d:{"title":"Categorical color scheme test tool","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"viewof rgb = Inputs.form([\n md`## Cashmere Colors`,\n ...colors.map((c, i) =>\n c.type === \"heading\"\n ? md`---\n### ${c.value}`\n : Inputs.color({ label: c.key, value: c.value })\n )\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"cielabScatter(colors.filter((c) => c.type === \"color\").map((c) => c.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"viewof palette = Inputs.form([\n md`---\n## Categorical Palette`,\n ...v2.map((c, i) => Inputs.color({ label: `${i}`, value: c }))\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"v1 = [\n \"#00aeff\",\n \"#e7c447\",\n \"#cc2027\",\n \"#00acac\",\n \"#9fd4ae\",\n \"#f8c8db\",\n \"#a94c9d\",\n \"#8077ff\",\n \"#b58473\",\n \"#a1a1a1\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"displayPalette(palette.filter((d, i) => i > 0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"displayPalette(v3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"displayPalette(v3, { darkMode: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"JSON.stringify(palette.filter((d, i) => i > 0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"v2 = [\n \"#00aeff\",\n \"#e7c447\",\n \"#cc2027\",\n \"#00acac\",\n \"#91c19f\",\n \"#f8c8db\",\n \"#a94c9d\",\n \"#8077ff\",\n \"#b58473\",\n \"#ababab\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"v3 = [\n \"#00aeff\",\n \"#e7c447\",\n \"#cc2027\",\n \"#9fd4ae\",\n \"#f8c8db\",\n \"#00acac\",\n \"#6e53a3\",\n \"#006d9a\",\n \"#553e36\",\n \"#c0c5cc\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"observable10 = [\n \"#4269d0\", // blue\n \"#efb118\", // orange\n \"#ff725c\", // red\n \"#6cc5b0\", // cyan\n \"#3ca951\", // green\n \"#ff8ab7\", // pink\n \"#a463f2\", // purple\n \"#97bbf5\", // light blue\n \"#9c6b4e\", // brown\n \"#9498a0\" // gray\n]","pinned":true,"hidden":true,"mode":"ojs"},{"id":146,"value":"---\n\n### Further reading and credits\n\nThere will be a post soon to the [Observable blog](https://observablehq.com/blog) with some reflection on how we used this tool to develop the Observable 10 color scheme. You can also read about all the categorical and continuous [color schemes in Plot](https://observablehq.com/plot/features/scales#color-scales), too.\n\nI owe a debt of gratitude to:\n\n- Maureen Stone and Cristy Miller for [codifying principles of categorical palette design](https://www.tableau.com/blog/colors-upgrade-tableau-10-56782) and tools to effectively support that work;\n- Ham Wongsuphasawat for his [notebook](https://observablehq.com/@kanitw/categorical-color-plots) that implemented a partial version of Maureen's tools using Vega-Lite.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"--- \n\n## Appendix: Drawing functions","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"function displayPalette(palette, { darkMode = false } = {}) {\n return htl.html`\n \n

${paletteDots(palette, { darkMode: darkMode })}

${cielabScatter(palette, {\n darkMode: darkMode\n })}

${lightnessSpectrum(palette, {\n darkMode: darkMode\n })}

${palette.map(\n (c) =>\n htl.html`

${c} ${colors\n .filter((color) => color.value === c)\n .map((color) => `(${color.key})`)}

`\n )}

${swatches(palette)}

${palette.map(\n (c) => htl.html`

${shapePreview(c)}

`\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"paletteDots = function(palette, { darkMode = false } = {}) { \n return Plot.plot( {\n marks: [\n Plot.dot(palette, {\n x: (d,i) => i * 40,\n r: 16,\n fill: { value: (d) => d, label: \"Color\" },\n tip: { \n format: { x: false },\n fill: darkMode ? \"#202020\" : \"white\" \n }\n }),\n Plot.text(palette.map((d,i) => i), {\n x: (d) => d * 40,\n dx: 18,\n dy: 16,\n opacity: 0.8\n }),\n ],\n x: { domain: [ 0, 320 ], ticks: 0 },\n height: 48,\n width: (palette.length) * 40,\n marginTop: 16,\n style: { fontSize: 12, overflow: \"visible\" }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"function lightnessSpectrum(palette, { darkMode = false } = {}) {\n let labPalette = palette.map((c,i)=>({...d3.lab(c), i, color: c, ...({})}));\n\n return Plot.plot({\n height: size,\n width: 70,\n style: { fontSize: 12, overflow: \"visible\" }, // let the tip overflow the rect of the plot\n marks: [\n Plot.tickY( labPalette, {\n y: (d) => d.l,\n stroke: { value: (d) => d.color, label: \"Color\" },\n strokeWidth: 3,\n tip: {\n anchor: \"right\",\n frameAnchor: \"left\",\n format: { \n fontSize: 12, \n stroke: (d,i) => `${d} (${i})`,\n a: true, b: true \n },\n fill: darkMode ? \"#202020\" : \"white\"\n },\n channels: {\n a: { value: \"a\", label: \"a*\" },\n b: { value: \"b\", label: \"b*\" }\n },\n })\n ],\n y: { \n domain: [30, 100], \n grid: true, \n tickSize: 0, \n labelAnchor: \"center\",\n label: \"L*\",\n labelArrow: false\n }, \n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"function swatches(palette) {\n return Plot.plot({\n height: size,\n width: 50,\n x: {ticks: 0},\n margin: 0,\n marks: [\n Plot.barX(\n palette, {\n y: (d,i) => i,\n fill: (d) => d,\n inset: -1\n }\n )\n ]\n})}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"shapePreview = (c) => htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"size = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":305,"value":"## Appendix: Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"function isComment(str) {\n return str.trim().substr(0, 2) === \"//\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"isComment(\"// Hello\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"function isHexColorProperty(str) {\n const regex = /^\\$[a-zA-Z0-9-]+\\:\\s\\#[\\da-fA-F]{3,6}\\;$/;\n return regex.test(str.trim());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"function createEntry(str) {\n if (isComment(str)) {\n return { type: \"heading\", value: str.substr(2).trim() };\n }\n if (isHexColorProperty(str)) {\n const cleanStr = str.trim().slice(0, -1);\n const [key, value] = cleanStr.split(\": \");\n return { type: \"color\", key, value };\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"colors = d3\n .text(\n \"https://raw.githubusercontent.com/HealthCatalyst/Fabric.Cashmere/ddeed039257b92306a3d6e8177237222e5b94e92/projects/cashmere/src/lib/sass/_colors.scss\"\n )\n .then((t) =>\n t\n .split(\"\\n\")\n .filter(\n (l, i, a) =>\n isHexColorProperty(l) ||\n (isComment(l) && isHexColorProperty(a[i + 1]))\n )\n .map((l) => createEntry(l))\n )","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}