30:T42c,colorbox = function(name, hex) { const height = 25; const width = 125; const bheight = 165; const bwidth = 125; const rgb = hexRGB(hex); return html``; }31:[] 2e:{"title":"Color Palettes","cells":[{"id":0,"value":"md`\n\n# Color Palettes\nVarious color palettes.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`\n\n## Well Known\nA collection of well known palettes.\n\n### [Tableau 10](https://www.tableau.com/about/blog/2016/7/colors-upgrade-tableau-10-56782)\n\n${colorbox(colors.popular.tableau10[0].name, colors.popular.tableau10[0].hex)} ${colorbox(colors.popular.tableau10[1].name, colors.popular.tableau10[1].hex)} ${colorbox(colors.popular.tableau10[2].name, colors.popular.tableau10[2].hex)} ${colorbox(colors.popular.tableau10[3].name, colors.popular.tableau10[3].hex)} ${colorbox(colors.popular.tableau10[4].name, colors.popular.tableau10[4].hex)}\n${colorbox(colors.popular.tableau10[5].name, colors.popular.tableau10[5].hex)} ${colorbox(colors.popular.tableau10[6].name, colors.popular.tableau10[6].hex)} ${colorbox(colors.popular.tableau10[7].name, colors.popular.tableau10[7].hex)} ${colorbox(colors.popular.tableau10[8].name, colors.popular.tableau10[8].hex)} ${colorbox(colors.popular.tableau10[9].name, colors.popular.tableau10[9].hex)}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`\n\n## Color blind safe\n[Color blindness](https://en.wikipedia.org/wiki/Color_blindness) is the decreased ability to see color or differences in color. I try to encorporate color blind safe colors into my visual design wherever possible.\n\n### [IBM Design - Color blind safe](https://www.ibm.com/design/v1/language/resources/color-library/)\n\n${colorbox(\n colors.color_blind_safe.ibm[0].name,\n colors.color_blind_safe.ibm[0].hex\n)} ${colorbox(\n colors.color_blind_safe.ibm[1].name,\n colors.color_blind_safe.ibm[1].hex\n)} ${colorbox(\n colors.color_blind_safe.ibm[2].name,\n colors.color_blind_safe.ibm[2].hex\n)} ${colorbox(\n colors.color_blind_safe.ibm[3].name,\n colors.color_blind_safe.ibm[3].hex\n)} ${colorbox(\n colors.color_blind_safe.ibm[4].name,\n colors.color_blind_safe.ibm[4].hex\n)}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`\n\n## Appendix\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"colors = ({\n \"popular\" : { \"tableau10\" : [\n {\"name\" : \"1\", \"hex\" : \"#4e79a7\"},\n {\"name\" : \"2\", \"hex\" : \"#f28e2b\"},\n {\"name\" : \"3\", \"hex\" : \"#e15759\"},\n {\"name\" : \"4\", \"hex\" : \"#76b7b2\"},\n {\"name\" : \"5\", \"hex\" : \"#59a14f\"},\n {\"name\" : \"6\", \"hex\" : \"#edc948\"},\n {\"name\" : \"7\", \"hex\" : \"#b07aa1\"},\n {\"name\" : \"8\", \"hex\" : \"#ff9da7\"},\n {\"name\" : \"9\", \"hex\" : \"#9c755f\"},\n {\"name\" : \"10\", \"hex\" : \"#bab0ac\"}\n ]\n },\n \"color_blind_safe\" : { \"ibm\" : [\n {\"name\" : \"Ultramarine 40\", \"hex\" : \"#648fff\"},\n {\"name\" : \"Indigo 50\", \"hex\" : \"#785ef0\"},\n {\"name\" : \"Magenta 50\", \"hex\" : \"#dc267f\"},\n {\"name\" : \"Orange 40\", \"hex\" : \"#fe6100\"},\n {\"name\" : \"Gold 20\", \"hex\" : \"#ffb000\"}\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"colorboxSmall(colors.color_blind_safe.ibm[0].name, colors.color_blind_safe.ibm[0].hex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"colorboxSmall = function(name, hex) {\n const height = 15;\n const width = 100;\n const bheight = 56;\n const bwidth = 100;\n const rgb = hexRGB(hex);\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"function hexRGB(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"style = await html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}