2c:null 2d:["$","title",null,{"children":"Color Palettes | Hamza Amjad | 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":"cd23e82dcc837bc4","slug":"color-palettes","title":"Color Palettes","thumbnail":"64bf8dcb49f5f36ab4f6487b11d9d4c4d41a7ae79775ce4d0bed5bdf8a17344f","access_level":"public","create_time":"$D2020-11-05T22:03:02.473Z","update_time":"$D2021-02-08T01:31:49.181Z","view_time":null,"first_public_time":"$D2020-11-06T05:13:19.609Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"94ec2c192e76a917","login":"hamzaamjad","name":"Hamza Amjad","avatar_url":"https://avatars-next.observableusercontent.com/5f8ce1ecf5125d1485b2d84a32df05d44154c33343eb404b136c425f2dfb5ebe","tier":"starter_2024"},"version":231,"publish_version":231,"role":null,"authored":false,"authors":[{"type":"individual","id":"9efdccbbde682173","login":"hamzaamjad","name":"Hamza Amjad","avatar_url":"https://avatars-next.observableusercontent.com/5f8ce1ecf5125d1485b2d84a32df05d44154c33343eb404b136c425f2dfb5ebe","tier":null}],"members":[{"type":"individual","id":"9efdccbbde682173","login":"hamzaamjad","name":"Hamza Amjad","avatar_url":"https://avatars-next.observableusercontent.com/5f8ce1ecf5125d1485b2d84a32df05d44154c33343eb404b136c425f2dfb5ebe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"c25f7f5963d5e2a5","slug":"color","title":"Color","owner":{"id":"94ec2c192e76a917","login":"hamzaamjad","name":"Hamza Amjad"}},"type":"notebook","body":{"titling":"auto","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\n\n## Appendix\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"style = await html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"