2c:null 2d:["$","title",null,{"children":"Color Rounding | Sam Learner | Observable"}] 32:[] 30:{"id":"9fd2860aee2880b6","slug":"color-rounding","title":"Color Rounding","thumbnail":"46384e8d180665cc2dddb926c7ae64e184f2f3a4d7ff9e8bdd274967ce01b58b","access_level":"public","create_time":"$D2021-05-06T17:18:07.425Z","update_time":"$D2021-05-06T21:58:49.567Z","view_time":null,"first_public_time":"$D2021-05-06T18:06:42.358Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":"starter_2024"},"version":298,"publish_version":298,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null}],"members":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2a4905602b520375","slug":"tools","title":"Tools","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"type":"notebook","body":{"titling":"auto","title":"Color Rounding","cells":[{"id":0,"value":"md`\n# Color Rounding\n\nA tool for rounding a given color to the perceptually closest color in a given set, using [CIEDE2000 Color Distance](https://en.wikipedia.org/wiki/Color_difference#CIEDE2000).\n\n(Really just an additional helper function on top of [@severo](/@harrystevens)'s [Color Distance](https://observablehq.com/@severo/color-distance) function.)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`\n~~~js\nimport {roundColor} from \"@sdl60660/color-rounding\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`\n## Examples\n\nTest the tool out, using the color picker below. It will display the rounded color within the default color set.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"swatches(defaultColorSet)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"colorComparison(testColor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"viewof testColor = color({\n value: \"#ebcbf6\",\n title: \"Test Color\",\n description: \"Select a color here and see which of the colors in the default set it rounds to above.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`\nHere's a full sample swatch of random colors and their corresponding rounded colors below (using the default color set):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"swatches(sample, \"Sample Colors\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"swatches(sample.map(a => roundColor(a)), \"Rounded Sample Colors\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"signature(roundColor, {\n description: md`This function will round any hex color to the nearest color in a set of given colors, by converting them to L*a*b* coordinates and using [CIEDE2000 Color Distance](https://en.wikipedia.org/wiki/Color_difference#CIEDE2000)\n\nThe function takes the following parameters:\n\n${Object.entries({\n hexColor: 'This is the hex description of the color to be rounded.',\n colorSet: 'This is the set of colors that the color may be rounded to, by finding the color in the set at the minimum distance from the original color. Optional, defaults to an eleven color set included in this notebook.',\n }).map(([k,v]) => `- \\`${k}:\\` ${v}\\n`)}`\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"roundColor = (hexColor, colorSet = defaultColorSet) => {\n const colorDistances = colorSet.map((color) => distance(color, hexColor));\n const closestColor = colorSet[d3.minIndex(colorDistances, (a) => a)];\n return closestColor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"md`\n## Definitions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`\nThis default color set is roughly based on the d3-chromatic [Set1](https://github.com/d3/d3-scale-chromatic#schemeSet1), with some additional colors and small adjustments:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"colorComparison = (color) => html`\n

\n Rounds To:\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"defaultColorSet = [\n \"#e41a1c\",\n \"#ff7f00\",\n \"#ffff33\",\n \"#4daf4a\",\n \"#0059ff\",\n \"#984ea3\",\n \"#f781bf\",\n \"#a65628\",\n \"#000000\",\n \"#999999\",\n \"#ffffff\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"sample = [\"#16151A\", \"#765043\", \"#D5CDCD\", \"#4A4A4A\", \"#C3B2A9\", \"#526D81\", \"#C5C5C5\", \"#B23664\", \"#4CA0C7\", \"#404F69\", \"#EAE8CF\", \"#313775\", \"#131211\", \"#4DA9D1\", \"#4889DC\", \"#535456\", \"#2C2926\", \"#41715C\", \"#A84C26\", \"#B8B8B9\", \"#81BBDB\", \"#B15931\", \"#CEC6BD\", \"#C8B58B\", \"#30331D\", \"#DEDADA\", \"#343332\", \"#CFE011\", \"#71655D\", \"#EFE9E1\", \"#0C1F2B\", \"#1E262F\", \"#4B9BB0\", \"#352F2B\", \"#889F9D\", \"#AD237E\", \"#E9BF19\", \"#E0DCE5\", \"#D6D0C8\", \"#7D7A7D\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// Modified version of function from here: https://observablehq.com/@d3/color-schemes\n\nfunction swatches(colors, name = \"Default Color Set\") {\n const n = colors.length;\n const dark = d3.lab(colors[0]).l < 50;\n const canvas = svg`