2c:null 2d:["$","title",null,{"children":"Color Palettes | Alessandra Sozzi | Observable"}] 32:T42c,colorbox = function(name, hex) { const height = 25; const width = 125; const bheight = 165; const bwidth = 125; const rgb = hexRGB(hex); return html``; }33:[] 30:{"id":"01f766d23f481425","slug":null,"title":"Color Palettes","thumbnail":"b2a502cb295885773c9bd490b94d14fc1a692bdb04b2e9d39536e29c0f1a7107","access_level":"public","create_time":"$D2023-04-05T19:40:08.757Z","update_time":"$D2023-04-05T19:41:32.562Z","view_time":null,"first_public_time":"$D2023-04-05T19:40:08.757Z","has_unpublished_edits":null,"fork":{"id":"cd23e82dcc837bc4","slug":"color-palettes","title":"Color Palettes","owner":{"id":"94ec2c192e76a917","login":"hamzaamjad","name":"Hamza Amjad"}},"stars":0,"starred":false,"owner":{"type":"team","id":"feafd296ad17b11e","login":"alessandrasozzi","name":"Alessandra Sozzi","avatar_url":"https://avatars-next.observableusercontent.com/5e9d0797182c08ccefb659313caa998626fdf2ce2bfc2ffc322b83243c07d18b","tier":"starter_2024"},"version":233,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e90bfac93d169be","login":"alessandrasozzi","name":"Alessandra Sozzi","avatar_url":"https://avatars-next.observableusercontent.com/5e9d0797182c08ccefb659313caa998626fdf2ce2bfc2ffc322b83243c07d18b","tier":null}],"members":[{"type":"individual","id":"6e90bfac93d169be","login":"alessandrasozzi","name":"Alessandra Sozzi","avatar_url":"https://avatars-next.observableusercontent.com/5e9d0797182c08ccefb659313caa998626fdf2ce2bfc2ffc322b83243c07d18b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Color Palettes","cells":[{"id":0,"value":"md`\n\n# Color Palettes\nVarious color palettes.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`\n\n## Well Known\nA collection of well known palettes.\n\n### [Tableau 20](https://www.tableau.com/about/blog/2016/7/colors-upgrade-tableau-10-56782)\n\n${colorbox(colors.popular.tableau20[0].name, colors.popular.tableau20[0].hex)} ${colorbox(colors.popular.tableau20[1].name, colors.popular.tableau20[1].hex)} ${colorbox(colors.popular.tableau20[2].name, colors.popular.tableau20[2].hex)} ${colorbox(colors.popular.tableau20[3].name, colors.popular.tableau20[3].hex)} ${colorbox(colors.popular.tableau20[4].name, colors.popular.tableau20[4].hex)}\n${colorbox(colors.popular.tableau20[5].name, colors.popular.tableau20[5].hex)} ${colorbox(colors.popular.tableau20[6].name, colors.popular.tableau20[6].hex)} ${colorbox(colors.popular.tableau20[7].name, colors.popular.tableau20[7].hex)} ${colorbox(colors.popular.tableau20[8].name, colors.popular.tableau20[8].hex)} ${colorbox(colors.popular.tableau20[9].name, colors.popular.tableau20[9].hex)}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\n\n## Appendix\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"colorboxSmall(colors.color_blind_safe.ibm[0].name, colors.color_blind_safe.ibm[0].hex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"style = await html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"