2d:null 2e:["$","title",null,{"children":"Interpolating Colors | Mark Steve Samson | Observable"}] 33:T62f,html`

Swatch	Name	Hex
${swatch(colors.black)}	Black	${colors.black}
${swatch(colors.red)}	Red	${colors.red}
${swatch(green)}	Green	${green}
${swatch(colors.yellow)}	Yellow	${colors.yellow}
${swatch(colors.blue)}	Blue	${colors.blue}
${swatch(magenta)}	Magenta	${magenta}
${swatch(colors.cyan)}	Cyan	${colors.cyan}
${swatch(colors.white)}	White	${colors.white}
${swatch(brightColors.black)}	Bright Black	${brightColors.black}
${swatch(brightColors.red)}	Bright Red	${brightColors.red}
${swatch(brightColors.green)}	Bright Green	${brightColors.green}
${swatch(brightColors.yellow)}	Bright Yellow	${brightColors.yellow}
${swatch(brightColors.blue)}	Bright Blue	${brightColors.blue}
${swatch(brightColors.magenta)}	Bright Magenta	${brightColors.magenta}
${swatch(brightColors.cyan)}	Bright Cyan	${brightColors.cyan}
${swatch(brightColors.white)}	Bright White	${brightColors.white}

`34:[] 31:{"id":"d0b34a39fdf2496b","slug":"interpolating-colors","title":"Interpolating Colors","thumbnail":"b989becba55b9b89cd678008e4440951f2cc531fda72f8ac8075be948beef5b8","access_level":"public","create_time":"$D2020-06-08T01:27:19.877Z","update_time":"$D2020-07-10T15:37:51.089Z","view_time":null,"first_public_time":"$D2020-06-08T06:58:46.535Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4cd62aaa0676797f","login":"marksteve","name":"Mark Steve Samson","avatar_url":"https://avatars-next.observableusercontent.com/9c60d3bee4d29b47f86959903600105b1851616b5c2999f58c35fc1a3185707a","tier":"starter_2024"},"version":578,"publish_version":578,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c7708f524897050","login":"marksteve","name":"Mark Steve Samson","avatar_url":"https://avatars-next.observableusercontent.com/9c60d3bee4d29b47f86959903600105b1851616b5c2999f58c35fc1a3185707a","tier":null}],"members":[{"type":"individual","id":"4c7708f524897050","login":"marksteve","name":"Mark Steve Samson","avatar_url":"https://avatars-next.observableusercontent.com/9c60d3bee4d29b47f86959903600105b1851616b5c2999f58c35fc1a3185707a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interpolating Colors","cells":[{"id":0,"value":"md`# Interpolating Colors\n\nThe Thinking Machines palette has the following colors:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\n ${swatch(colors.black)}\n ${swatch(colors.white)}\n ${swatch(colors.red)}\n ${swatch(colors.yellow)}\n ${swatch(colors.cyan)}\n ${swatch(colors.blue)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`In our design system, they're named Gray 1, Gray 6, Terracotta, San Marino, Sandy Brown, and Shakespeare. I'll never remember those names so from here on, I'll just call them black, white, red, blue, yellow, and cyan. \n\nNow I wanted to use these colors as theme for my terminal. The problem is the palette is missing a couple of colors. Terminals use black, white, red, green, yellow, blue, magenta, and cyan so I'm missing green and magenta. \n\nI don't have the design knowledge to pick out colors that would work with this palette so I'll interpolate them with code instead! I'll try the different color spaces available in [d3-interpolate](https://github.com/d3/d3-interpolate) and pick out w/c color sparks the most joy.\n\n## Where the grass is green\n\nIf you remember your ROYGBIV, green is in between yellow and blue. But since we have cyan, which is between green and blue, we can interpolate between yellow and cyan:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"html`\n

d3.interpolateHsl

\n ${swatch(colors.yellow)}\n ${swatch(d3.interpolateHsl(colors.yellow, colors.cyan)(0.5))}\n ${swatch(colors.cyan)}\n\n

d3.interpolateHcl

\n ${swatch(colors.yellow)}\n ${swatch(d3.interpolateHcl(colors.yellow, colors.cyan)(0.5))}\n ${swatch(colors.cyan)}\n\n

d3.interpolateCubehelix

\n ${swatch(colors.yellow)}\n ${swatch(d3.interpolateCubehelix(colors.yellow, colors.cyan)(0.5))}\n ${swatch(colors.cyan)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`I like the \\`d3.interpolateHclLong\\` green the best but there's still something off about it. There's a color space one of my colleagues shared recently called [HSLuv](https://www.hsluv.org/). It's supposed to be a [human-friendly](https://www.boronine.com/2012/03/26/Color-Spaces-for-Human-Beings/) version of HSL. It's not part of the color spaces bundled in \\`d3-interpolate\\` but can be added using [d3-hsluv](https://github.com/petulla/d3-hsluv):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"html`\n

d3.interpolateHsluv

\n ${swatch(colors.yellow)}\n ${swatch(d3.interpolateHsluv(colors.yellow, colors.cyan)(0.5))}\n ${swatch(colors.cyan)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`NICE. But how does it look like with the rest of the palette?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"html`\n ${swatch(colors.black)}\n ${swatch(colors.white)}\n ${swatch(colors.red)}\n ${swatch(colors.yellow)}\n ${swatch(green)}\n ${swatch(colors.cyan)}\n ${swatch(colors.blue)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`Not bad!\n\n## Magenta\n\n_I don't have a song in mind that has magenta in its lyrics..._\n\nNow magenta should be in between blue and red:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"html`\n

d3.interpolateHsl

\n ${swatch(colors.blue)}\n ${swatch(d3.interpolateHsl(colors.blue, colors.red)(0.5))}\n ${swatch(colors.red)}\n\n

d3.interpolateHcl

\n ${swatch(colors.blue)}\n ${swatch(d3.interpolateHcl(colors.blue, colors.red)(0.5))}\n ${swatch(colors.red)}\n\n

d3.interpolateCubehelix

\n ${swatch(colors.blue)}\n ${swatch(d3.interpolateCubehelix(colors.blue, colors.red)(0.5))}\n ${swatch(colors.red)}\n\n

d3.interpolateHsluv

\n ${swatch(colors.blue)}\n ${swatch(d3.interpolateHsluv(colors.blue, colors.red)(0.5))}\n ${swatch(colors.red)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`These magentas look all the same to me... So just to be consistent, I'll also use the output from \\`d3.interpolateHsluv\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"html`\n ${swatch(colors.black)}\n ${swatch(colors.white)}\n ${swatch(colors.red)}\n ${swatch(colors.yellow)}\n ${swatch(green)}\n ${swatch(colors.cyan)}\n ${swatch(colors.blue)}\n ${swatch(magenta)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md`😍 Looks amazing! But I'm not done yet.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`## Watching you shine bright`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`The last requirement for terminal themes is to have a [bright](https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit) version of the base colors. For this I'll try two methods:\n- Increase color brightness\n- Interpolate to white` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"ramp((x) => d3.hsluv(colors.black).brighter(x).toString())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"html`\n ${ramp((x) => d3.hsluv(colors.white).brighter(x).toString())}\n ${ramp((x) => d3.hsluv(colors.red).brighter(x).toString())}\n ${ramp((x) => d3.hsluv(colors.yellow).brighter(x).toString())}\n ${ramp((x) => d3.hsluv(green).brighter(x).toString())}\n ${ramp((x) => d3.hsluv(colors.cyan).brighter(x).toString())}\n ${ramp((x) => d3.hsluv(colors.blue).brighter(x).toString())}\n ${ramp((x) => d3.hsluv(magenta).brighter(x).toString())}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"md`Increasing brightness seems to be relative. Only half of the colors end up white at 100% increase in brightness.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"ramp(d3.interpolateHsluv(colors.black, 'white'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"html`\n ${ramp(d3.interpolateHsluv(colors.white, 'white'))}\n ${ramp(d3.interpolateHsluv(colors.red, 'white'))}\n ${ramp(d3.interpolateHsluv(colors.yellow, 'white'))}\n ${ramp(d3.interpolateHsluv(green, 'white'))}\n ${ramp(d3.interpolateHsluv(colors.cyan, 'white'))}\n ${ramp(d3.interpolateHsluv(colors.blue, 'white'))}\n ${ramp(d3.interpolateHsluv(magenta, 'white'))}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"md`While interpolating on the HSLuv color space seems to desaturate the colors.\n\nCompare it with normal HSL interpolation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"ramp(d3.interpolateHsl(colors.red, 'white'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`But I kinda like how it \"pastelizes\" the colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`Putting the colors side-by-side:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"html`\n

Increase color brightness (50%)

\n ${swatch(colors.black)}\n ${swatch(colors.white)}\n ${swatch(colors.red)}\n ${swatch(colors.yellow)}\n ${swatch(green)}\n ${swatch(colors.cyan)}\n ${swatch(colors.blue)}\n ${swatch(magenta)}\n

\n ${swatch(d3.hsluv(colors.black).brighter(0.5))}\n ${swatch(d3.hsluv(colors.white).brighter(0.5))}\n ${swatch(d3.hsluv(colors.red).brighter(0.5))}\n ${swatch(d3.hsluv(colors.yellow).brighter(0.5))}\n ${swatch(d3.hsluv(green).brighter(0.5))}\n ${swatch(d3.hsluv(colors.cyan).brighter(0.5))}\n ${swatch(d3.hsluv(colors.blue).brighter(0.5))}\n ${swatch(d3.hsluv(magenta).brighter(0.5))}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"md`The brightened colors look good relative to their original versions but look terrible together as a set.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"html`\n

Interpolate to white (30%)

\n ${swatch(colors.black)}\n ${swatch(colors.white)}\n ${swatch(colors.red)}\n ${swatch(colors.yellow)}\n ${swatch(green)}\n ${swatch(colors.cyan)}\n ${swatch(colors.blue)}\n ${swatch(magenta)}\n

\n ${swatch(d3.interpolateHsluv(colors.black, 'white')(0.3))}\n ${swatch(d3.interpolateHsluv(colors.white, 'white')(0.3))}\n ${swatch(d3.interpolateHsluv(colors.red, 'white')(0.3))}\n ${swatch(d3.interpolateHsluv(colors.yellow, 'white')(0.3))}\n ${swatch(d3.interpolateHsluv(green, 'white')(0.3))}\n ${swatch(d3.interpolateHsluv(colors.cyan, 'white')(0.3))}\n ${swatch(d3.interpolateHsluv(colors.blue, 'white')(0.3))}\n ${swatch(d3.interpolateHsluv(magenta, 'white')(0.3))}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"md`The interpolated colors, on the other hand, got muted and warmer. Like a pastel version of the original colors. This is the clear winner for me.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"md`## My new terminal theme\n\nWithout further ado, I present to you my new terminal theme:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3-interpolate', 'd3-hsluv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"colors = {\n return {\n black: '#3c3a3b',\n white: '#ededed',\n red: '#ef4631',\n blue: '#5268b4',\n yellow: '#f3a258',\n cyan: '#53bed0'\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"swatch = (c) => html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"green = d3.hsluv(d3.interpolateHsluvLong(colors.yellow, colors.cyan)(0.5)).formatHex()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"magenta = d3.hsluv(d3.interpolateHsluv(colors.red, colors.blue)(0.5)).formatHex()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"brightColors = Object.entries({...colors, green, magenta})\n .reduce((acc, [k, v]) => ({ ...acc, [k]: d3.hsluv(d3.interpolateHsluv(v, 'white')(0.3)).formatHex() }), {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"