28:null 29:["$","title",null,{"children":"Colors for belo.ai | Belo Inv. Research | Observable"}] 2e:[{"id":"202368b1d551feb32489cba5f176d6b615143e2430db103cfef1994d2f7b99211618a4708872ecef2fc61175a47f3913758bd07e0467d9cb8d1b30ac43d1e969","href":"https://static.observableusercontent.com/files/202368b1d551feb32489cba5f176d6b615143e2430db103cfef1994d2f7b99211618a4708872ecef2fc61175a47f3913758bd07e0467d9cb8d1b30ac43d1e969","name":"01208efa-607f-49b9-8a42-35feeb7a8d73.png","type":"image/png","lastModified":1716174886741.773,"size":252842}] 2c:{"id":"927e17627b8d5630","slug":"colors-belo-ai","title":"Colors for belo.ai","thumbnail":"c8f978b70c9e01ecbdc448798e7e76c1bc4f545c2c950a700d207d76f01ff71d","access_level":"public","create_time":"$D2024-05-20T02:46:00.554Z","update_time":"$D2024-05-20T03:17:41.361Z","view_time":null,"first_public_time":"$D2024-07-07T15:41:03.781Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"09eac3a95d21904b","login":"belo","name":"Belo Inv. Research","avatar_url":"https://avatars-next.observableusercontent.com/4ec7f31fc7075ff56bb5e46ef17f39cffe1cb072782912e4ff34f0688e0ddfdd","tier":"pro_2024"},"version":815,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"497d8fdfb82a7b80","login":"poliveira","name":"Paulino Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/c6e154047ee5f7c3824127e7da7f7191a34219417002d99bca1dfd3970de0e9b","tier":null}],"members":[{"type":"team","id":"09eac3a95d21904b","login":"belo","name":"Belo Inv. Research","avatar_url":"https://avatars-next.observableusercontent.com/4ec7f31fc7075ff56bb5e46ef17f39cffe1cb072782912e4ff34f0688e0ddfdd","tier":"pro_2024","role":"editor"},{"type":"individual","id":"497d8fdfb82a7b80","login":"poliveira","name":"Paulino Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/c6e154047ee5f7c3824127e7da7f7191a34219417002d99bca1dfd3970de0e9b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Colors for belo.ai","cells":[{"id":111,"value":"# Colors for `belo.ai`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"html`

${Object.keys(\n color\n)\n .slice(0, 8)\n .map(\n (x) => `

${x}

${color[x]}

`\n )\n .join(\n \"\"\n )}

${Object.keys(\n color\n)\n .slice(8, 17)\n .map(\n (x) => `

${x}

${color[x]}

`\n )\n .join(\"\")}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"# Color Shades","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"# Color Interpolation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":581,"value":"In case a color is not found above, one can linearly interpolate two of them","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":511,"value":"html`

${color1_display}${viewof color1}

${color1.toLowerCase()}

${color_interpolation_display}

${viewof color_slider_value}

${interpolated_color}

${color2_display}${viewof color2}

${color2.toLowerCase()}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"## Color Inter.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":727,"value":"viewof color_slider_value = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 10,\n width: \"17rem\",\n title: \"\",\n titlePosition: \"top\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Scheme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"html`

${Object.keys(scheme)\n .map(\n (\n x\n ) => `

${x}

`\n )\n .join(\"\")}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"# Declarations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"## Colors Objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"color = {\n return {\n ...colors,\n interpolate: interpolateColor\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"colors = {\n return {\n blue: blue,\n blueSea: blueSea,\n cyan: cyan,\n green: green,\n yellow: yellow,\n orange: orange,\n orangeRed: orangeRed,\n red: red,\n gray100: gray100,\n gray200: gray200,\n gray300: gray300,\n gray400: gray400,\n gray500: gray500,\n gray600: gray600,\n gray700: gray700,\n gray800: gray800,\n gray900: gray900\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"## Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"red = \"#fa3817\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"orangeRed = \"#fa6b2b\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"orange = \"#ffb06e\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"yellow = \"#fce0b2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"green = \"#73b0a6\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"cyan = \"#008a96\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"blueSea = \"#007094\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"blue = \"#005FA0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"gray100 = converged_grays.gray100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"gray200 = converged_grays.gray200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"gray300 = converged_grays.gray300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"gray400 = converged_grays.gray400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"gray500 = converged_grays.gray500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"gray600 = converged_grays.gray600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"gray700 = converged_grays.gray700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"gray800 = converged_grays.gray800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"gray900 = converged_grays.gray900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"converged_grays = ({\n gray100: \"#f8f6f5\",\n gray200: \"#ecebea\",\n gray300: \"#e0e0df\",\n gray400: \"#cfcfce\",\n gray500: \"#b3b3b2\",\n gray600: \"#8e8e8d\",\n gray700: \"#6d6d6c\",\n gray800: \"#4e4e4d\",\n gray900: \"#323232\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"## Schemes Object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"scheme = {\n return {\n positive: positive,\n negative: negative,\n rainbow: rainbow,\n random1: random1,\n random2: random2,\n random3: random3,\n alternate: alternate,\n grays: grays,\n blues: blues,\n greens: greens,\n reds: reds,\n oranges: oranges,\n yellows: yellows,\n redBlues: redBlues,\n redGreens: redGreens,\n blueYellows: blueYellows,\n greenYellows: greenYellows\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Schemes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"rainbow = [\n color.blue,\n color.blueSea,\n color.cyan,\n color.green,\n color.yellow,\n color.orange,\n color.orangeRed,\n color.red\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"random1 = [\n color.cyan,\n color.red,\n color.green,\n color.orange,\n color.blue,\n color.yellow,\n color.blueSea,\n color.orangeRed\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"random2 = [\n color.blueSea,\n color.blue,\n color.orange,\n color.yellow,\n color.green,\n color.cyan,\n color.red,\n color.orangeRed\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"random3 = [\n color.blueSea,\n color.orangeRed,\n color.green,\n color.blue,\n color.red,\n color.orange,\n color.cyan,\n color.yellow\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"positive = [color.blue, color.blueSea, color.cyan, color.green]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"negative = [color.red, color.orangeRed, color.orange, color.yellow]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"alternate = [\n color.blue,\n color.yellow,\n color.green,\n color.orange,\n color.cyan,\n color.orangeRed,\n color.blueSea,\n color.red\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"grays = [\n color.gray800,\n color.gray700,\n color.gray600,\n color.gray500,\n color.gray400,\n color.gray300,\n color.gray200,\n color.gray100\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"blues = [color.blue, color.gray100]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"greens = [color.cyan, color.gray100]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"reds = [color.red, color.gray100]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"oranges = [color.orangeRed, color.gray100]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"yellows = [color.yellow, color.gray100]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"redBlues = [color.red, color.blue]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"redGreens = [color.red, color.green]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"blueYellows = [color.blue, color.yellow]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"greenYellows = [color.green, color.yellow]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"## Color Interpolations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":648,"value":"function interpolateColor(color1, color2, pct) {\n let rgbValue = d3.interpolate(\n { color_int: color1 },\n { color_int: color2 }\n )(pct).color_int;\n\n return d3.color(rgbValue).formatHex();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"interpolated_color = {\n let rgbValue = d3.interpolate(\n { color_int: color1 },\n { color_int: color2 }\n )(color_slider_value / 100).color_int;\n\n return d3.color(rgbValue).formatHex();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"colors_obj = color_options\n .map((d) => ({ [d.label]: d.value }))\n .reduce((a, b) => ({ ...a, ...b }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"color_options = Object.keys(colors).map((c) => ({\n label: c,\n value: colors[c]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"color2_display = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"color1_display = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"color_interpolation_display = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"viewof color2 = {\n const color2 = select({\n options: color_options\n });\n return color2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"viewof color1 = {\n const color1 = select({\n options: color_options\n });\n return color1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"import { base, fonts } from \"@belo/styles\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"base","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"fonts","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"# References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":808,"value":"Starting from the gray for forms on https://ai.belo.re, this study tries to make minimal changes to style while making it consistent with the new website. We end up with the **`converged warm-to-neutral grays`**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":806,"value":"efa607f49b98a4235feeb7a8d73 = FileAttachment(\"01208efa-607f-49b9-8a42-35feeb7a8d73.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"