4d:I[132969,["$2"],"IconMark"] 44:["$","title",null,{"children":"Working with Colors | Yao Yue | Observable"}] 4c:[] 48:{"id":"ee962815b230836e","slug":"color-utilities","title":"Working with Colors","thumbnail":"2451570e31d4af14bfcd339280fe63af7b0d6b74ddb13e4b475ef09c7ebbebb7","access_level":"public","create_time":"$D2023-11-05T01:11:19.392Z","update_time":"$D2024-01-15T22:20:05.463Z","view_time":null,"first_public_time":"$D2023-11-05T01:11:19.392Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"970ea23967c29df1","login":"thinkingfish","name":"Yao Yue","avatar_url":"https://avatars-next.observableusercontent.com/ef7694d8a57d0923cbf6e4e10040c5050cbc9fd0d451bc06cbd4d59cefb016c2","tier":"starter_2024","bio":"","following":false},"version":124,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1dacff11243c3975","login":"thinkingfish","name":"Yao Yue","avatar_url":"https://avatars-next.observableusercontent.com/ef7694d8a57d0923cbf6e4e10040c5050cbc9fd0d451bc06cbd4d59cefb016c2","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1dacff11243c3975","login":"thinkingfish","name":"Yao Yue","avatar_url":"https://avatars-next.observableusercontent.com/ef7694d8a57d0923cbf6e4e10040c5050cbc9fd0d451bc06cbd4d59cefb016c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Working with Colors","cells":[{"id":3,"value":"# Working with Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"## Conversion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"viewof color_string = Inputs.text({label: \"Color\", placeholder: \"Enter a color as hex, rgba, hsl...\", value: \"#336699\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"color = d3.color(color_string)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"swatch(color, \"3em\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"html`

formats

${color.rgb()}

${color.hex()}

${color.formatHsl()}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"## Legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"function swatch(color, size=\"1em\") {\n return html`

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"function swatches(colors, size=\"1em\") {\n return html`${colors.map(c => `

`)}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"function named_swatch(size, value, key, map) {\n return html`

\n ${key}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"function swatches_with_names(color_map, size=\"1em\") {\n var swatches = \"\";\n var i = 0;\n color_map.forEach((value, key, map) => {\n swatches += `

\n ${key}\n

\n ${i}\n

`;\n i += 1;\n});\n return html`${swatches}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null 3c:[["$","title","0",{"children":"Working with Colors | Yao Yue | Observable"}],["$","meta","1",{"property":"og:title","content":"Working with Colors"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Yao Yue"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@thinkingfish/color-utilities"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://observablehq.com/_next/image?url=https%3A%2F%2Fstatic.observableusercontent.com%2Fthumbnail%2F2451570e31d4af14bfcd339280fe63af7b0d6b74ddb13e4b475ef09c7ebbebb7.jpg&w=640&q=75"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Working with Colors"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Yao Yue"}],["$","meta","12",{"name":"twitter:image","content":"https://observablehq.com/_next/image?url=https%3A%2F%2Fstatic.observableusercontent.com%2Fthumbnail%2F2451570e31d4af14bfcd339280fe63af7b0d6b74ddb13e4b475ef09c7ebbebb7.jpg&w=640&q=75"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L4d","17",{}]] 4b:null