2c:null 2d:["$","title",null,{"children":"Categorical color scheme test tool | Jeff Pettiross | Observable"}] 32: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()`).33: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*" } }); }34:[] 30:{"id":"03d523bee6ae46fa","slug":null,"title":"Categorical color scheme test tool","thumbnail":"a449e53f2fd1340b64ace1d883eb567ce71d49ce5e2c07dba0f7f30e8133d726","access_level":"public","create_time":"$D2024-05-24T21:46:29.215Z","update_time":"$D2024-07-19T20:11:10.001Z","view_time":null,"first_public_time":"$D2024-05-24T21:46:29.215Z","has_unpublished_edits":null,"fork":{"id":"6317e3d5afd95adc","slug":"categorical-palette-tool","title":"Categorical color scheme test tool","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c0bc85e080503d17","login":"pettiross","name":"Jeff Pettiross","avatar_url":"https://avatars-next.observableusercontent.com/785043648677ee8470f726d79df959be227a1d14f3a43c9b5e53583b21b64454","tier":"starter_2024","bio":"dad, viz nerd, amateur cook, product designer"},"version":317,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a361744573ab50b","login":"pettiross","name":"Jeff Pettiross","avatar_url":"https://avatars-next.observableusercontent.com/785043648677ee8470f726d79df959be227a1d14f3a43c9b5e53583b21b64454","tier":null,"bio":"dad, viz nerd, amateur cook, product designer"}],"members":[{"type":"individual","id":"3a361744573ab50b","login":"pettiross","name":"Jeff Pettiross","avatar_url":"https://avatars-next.observableusercontent.com/785043648677ee8470f726d79df959be227a1d14f3a43c9b5e53583b21b64454","tier":null,"role":"editor"},{"type":"team","id":"c0bc85e080503d17","login":"pettiross","name":"Jeff Pettiross","avatar_url":"https://avatars-next.observableusercontent.com/785043648677ee8470f726d79df959be227a1d14f3a43c9b5e53583b21b64454","tier":"starter_2024","role":"editor"}],"comments":[{"id":"7a5be572a9719b7e","reply_to_id":null,"content":"When the palette's length is less than 10, the dots will overlap each other. How can you prevent this from occurring? This has something to do with the `width` property value in the object literal.","create_time":"$D2024-06-26T08:30:00.258Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Categorical color scheme test tool","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"## Observable 10","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"displayPalette(observable10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"--- \n\n## Appendix: Drawing functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":" function displayPalette(palette, { darkMode = false } = {}) {\n return htl.html`\n \n

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

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

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

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

${ c }

`) }

${swatches(palette)}

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

${shapePreview(c)}

`) }

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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: 400,\n marginTop: 16,\n style: { fontSize: 12, overflow: \"visible\" }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"shapePreview = (c) => htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"size = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"