2c:null 2d:["$","title",null,{"children":"Color palette generator | gunggmee | Observable"}] 32:[] 30:{"id":"cb61a4505dc661a2","slug":"color-palette-generator","title":"Color palette generator","thumbnail":"fd64c1aee7c9aff29b9b1f9f356a26cf7db9e89ab30bbf2d8cb50cb2b49b2410","access_level":"public","create_time":"$D2022-04-16T04:17:14.418Z","update_time":"$D2022-04-23T12:28:21.202Z","view_time":null,"first_public_time":"$D2022-04-16T08:39:15.722Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"4b5aa5dc8104f0a1","login":"gunggmee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2c60f201a2247077a4c5c3906f2136e2bfc23dbf146b2a6031fad6ce313f251e","tier":"starter_2024"},"version":2079,"publish_version":2079,"role":null,"authored":false,"authors":[{"type":"individual","id":"809044e75a7bab18","login":"gunggmee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2c60f201a2247077a4c5c3906f2136e2bfc23dbf146b2a6031fad6ce313f251e","tier":null}],"members":[{"type":"individual","id":"809044e75a7bab18","login":"gunggmee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2c60f201a2247077a4c5c3906f2136e2bfc23dbf146b2a6031fad6ce313f251e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color palette generator","cells":[{"id":0,"value":"# Color palette generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1916,"value":"Select your favorite color:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1867,"value":"chips(primaryHues, width, primaryHueIndex, (d) => mutable primaryHueIndex = d._index)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1920,"value":"Here are two color themes - bright and dark - based on auto-generated color palette:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":644,"value":"result = html`

${htmls}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1925,"value":"## Step-by-step explanation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1935,"value":"First, I created the complementary color by rotating the hue of the primary color by 180 degrees.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1941,"value":"chips(harmonies.complementary)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1966,"value":"Complementary color never fails.\n\nYet it could be boring or quite restrictive if the palette has only two hues. So I created two more colors by picking two equally distanced colors on the wheel:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1946,"value":"triadChips = chips(harmonies.triad)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1971,"value":"There are more ways to get harmonious colors such as analogous colors, but I think this is enough for now.\n\nIt's time to create variations from those colors. LCH colorspace has three axes - lightness, chroma, and hue - and we've only explored single axis - the hue. By adjusting lightness and chroma, we can easily derive colors for background.\n\nFor example, here are spectrums of colors we've just generated above. Y-axis represents chroma and X-axis represents lightness:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2002,"value":"complementaryChipSpectrums = chipSpectrum(harmonies.complementary)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1985,"value":"triadChipSpectrums = chipSpectrum(harmonies.triad)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1992,"value":"Look great.\n\nThe last step is easy. I just need to pick harmonious colors from the spectrums above, and give them **semantic** names such as \"foreground\", \"display\", \"accent.\" It's also easy to create a variation such as \"dark mode.\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1816,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1893,"value":"primaryHues = d3.range(12).map((d, i) => {\n const color = d3.lch(50, 50, d / 12 * 360)\n color._index = i\n return color\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1896,"value":"mutable primaryHueIndex = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1908,"value":"primaryColor = primaryHues[primaryHueIndex]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"palette = ({\n fg: dlch(harmonies.complementary[1], 15, -35, 0).hex(),\n bg: dlch(harmonies.complementary[1], 50, -45, 0).hex(),\n fgDisplay: dlch(harmonies.primary[0], 0, 0, 0).hex(),\n fgAccent: dlch(harmonies.triad[2], 0, 20, 0).hex(),\n bgAccent: dlch(harmonies.primary[0], 45, -25, 0).hex(),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"paletteDark = ({\n fg: dlch(harmonies.complementary[1], 15, -35, 0).hex(),\n bg: dlch(harmonies.complementary[1], -40, -45, 0).hex(),\n fgDisplay: dlch(harmonies.primary[0], 0, 0, 0).hex(),\n fgAccent: dlch(harmonies.triad[2], 0, 0, 0).hex(),\n bgAccent: dlch(harmonies.primary[0], -30, 25, 0).hex(),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"harmonies = harmoniousColors(primaryColor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"function harmoniousColors(c) {\n return {\n primary: [\n c,\n ],\n complementary: [\n c,\n dlch(c, 0, 0, 180),\n ],\n analogous: [\n c,\n dlch(c, 0, 0, 30),\n dlch(c, 0, 0, -30),\n ],\n triad: [\n c,\n dlch(c, 0, 0, 120),\n dlch(c, 0, 0, -120),\n ],\n tetrad: [\n c,\n dlch(c, 0, 0, 90),\n dlch(c, 0, 0, 180),\n dlch(c, 0, 0, 270),\n ],\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2025,"value":"htmls = [palette, paletteDark].map(p => html`

Color harmony

Color harmony has been a topic of extensive study throughout history, but only since the Renaissance and the Scientific Revolution has it seen extensive codification. Artists and designers make use of these harmonies in order to achieve certain moods or aesthetics.

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"function dlch(original, dl, dc, dh) {\n const lch = d3.lch(original)\n lch.l += dl\n lch.c += dc\n lch.h += dh\n return lch\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"function chipSpectrum(colors) {\n let results = colors.map(color => {\n const results = []\n for(let ic = -2; ic <= 2; ic++) {\n const newColors = []\n for(let il = -2; il <= 2; il++) {\n newColors.push(dlch(color, il * 22, ic * 22, 0))\n }\n results.push(chips(newColors, width / colors.length, ic === 0 ? 2 : undefined))\n }\n return html`

${results}

`\n })\n return html`

${results}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"import {chips} from \"@gunggmee/ryb-color-wheel\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"