31:[] 2f:{"title":"Fast Forward Labs report colors","cells":[{"id":0,"value":"md`# Fast Forward Labs report colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`Exploring the colors from [past reports](https://fastforwardlabs.com/research), and thinking about what the color for the eighth one should be.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`## The current lineup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"{\n let content = `

`\n let counter = 0\n for (let color of report_colors) {\n content += `

FF0${counter+1}

`\n counter++\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`## Hue × lightness`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"{\n let _width = Math.min(width, 260)\n let height = _width\n let content = `

`\n for (let color of report_colors) {\n let hsl = color.hsl()\n let size = 14\n content += `

`\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Hue × saturation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"{\n let _width = Math.min(width, 260)\n let height = _width\n let content = `

`\n for (let color of report_colors) {\n let hsl = color.hsl()\n let size = 14\n content += `

`\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`## Hue × luminance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"{\n let _width = Math.min(width, 260)\n let height = _width\n let content = `

`\n for (let color of report_colors) {\n let hsl = color.hsl()\n let size = 14\n content += `

`\n console.log(hsl)\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`## Hue with adjusted luminance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof luminance_adjuster = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.35, \n title: \"Luminance\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"{\n let _width = Math.min(width, 260)\n let height = _width\n let content = `

`\n for (let color of report_colors) {\n color = color.luminance(luminance_adjuster, 'hsl')\n let hsl = color.hsl()\n let size = 14\n content += `

`\n console.log(hsl)\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"{\n let content = `

`\n let counter = 0\n for (let color of report_colors) {\n color = color.luminance(luminance_adjuster, 'hsl')\n content += `

FF0${counter+1}

`\n counter++\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`Too same-y.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`## Hue with normalized lightness and saturation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"adjust_light = 0.55","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"adjust_sat = 0.75","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"adjusted_colors = report_colors.map(color => {\n color = color.set('hsl.l', adjust_light)\n color = color.set('hsl.s', adjust_sat)\n return color\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"{\n let _width = Math.min(width, 260)\n let height = _width\n let content = `

`\n for (let color of adjusted_colors) {\n let hsl = color.hsl()\n let size = 14\n content += `

`\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"{\n let content = `

`\n let counter = 0\n for (let color of adjusted_colors) {\n color = color.luminance(luminance_adjuster, 'hsl')\n content += `

FF0${counter+1}

`\n counter++\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"normalized_hexes = adjusted_colors.map(c => c.hex())","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`## A bunch of colors in the adjusted hue and saturation range`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"{\n let content = `

`\n let counter = 0\n for (let i = 0; i < 360; i += 4) {\n let color = chroma.hsl(i, adjust_sat, adjust_light).hex()\n let book_name = \"FF0?\"\n content += `

${book_name}

`\n counter++\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`## Let's try blue`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"new_blue = chroma.hsl([hue_between,0.8,0.5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"md`hex: ${new_blue.hex()} \nluminance: ${new_blue.luminance()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"corresponding_red = new_blue.set('hsl.h', 350).luminance(0.35)","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`hex: ${corresponding_red.hex()} \nluminance: ${corresponding_red.luminance()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`Lighter variation for chunky link underlines:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"middle_purple = new_blue.set('hsl.h', 280).luminance(0.4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`hex: ${middle_purple.hex()} \nluminance: ${middle_purple.luminance()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"brighter_new = new_blue.brighten(1.6).set('hsl.h',hue_between+6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`hex: ${brighter_new.hex()} \nluminance: ${brighter_new.luminance()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"darker_new = new_blue.darken(0.8).set('hsl.s',1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"html`

darker blue for text

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`hex: ${darker_new.hex()} \nluminance: ${darker_new.luminance()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"additional_green = new_blue.set('hsl.h', 120).luminance(0.7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`hex: ${additional_green.hex()} \nluminance: ${additional_green.luminance()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`## Previously used blues`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"hue_between = (ff04.hsl()[0] - ff01.hsl()[0])/2 + ff01.hsl()[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`FF04`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"chroma(ff04.hex()).hsl()","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`FF01`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"chroma(ff01.hex()).hsl()","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"new_green = chroma(\"#36e292\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"report_colors_with_blue = [...report_colors, new_green]","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"md`## The proposed line-up`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"{\n let content = `

`\n let counter = 0\n for (let color of report_colors_with_blue) {\n content += `

FF0${counter+1}

`\n counter++\n }\n content += `

`\n return html`${content}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"ff01 = chroma('#00dcec')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"ff02 = chroma('#ed2a9f')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"ff03 = chroma('#6f4c97')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"ff04 = chroma(\"#2e76b8\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"ff05 = chroma(\"#55ba77\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"ff06 = chroma(\"#dc4945\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"ff07 = chroma(\"#ea995f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"ff08 = chroma(\"#19aee6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"possibility1 = chroma('#e2e236')","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"report_colors = [ff01, ff02, ff03, ff04, ff05, ff06, ff07, ff08]","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"import {color, radio, slider, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}