30:T436,differenceHistogram = (palette, cutoff = 18) => { let paletteWithHex = palette.map(c => ({...c, hex: culori.formatHex(c)})) let combinations = paletteWithHex .map(c1 => { return paletteWithHex.map(c2 => culori.differenceCiede2000()(c1,c2)) }) .flat() .reduce((list, curr, index) => { let a = paletteWithHex[Math.floor(index / paletteWithHex.length)] let b = paletteWithHex[index % paletteWithHex.length] if (list.some(d => (d.a.hex === b.hex) && (d.b.hex === a.hex)) || curr === 0) { return list } list.push({a, b, curr}) return list }, []) let bars = vl.markBar() .encode( vl.x().field('curr').bin({step: 2}).scale({domain: [0,40]}), vl.y().aggregate('count') ) let median = vl.markRule() .encode( vl.x().field('curr').aggregate('median'), vl.color().value('red') ) let lower = vl.markRule() .encode( vl.x().field('curr').aggregate('min'), vl.color().value('chartreuse') ) return vl.layer(bars, median, lower) .config(overallConfig) .data(combinations) .render() }31:[] 2e:{"title":"Überarbeitete Farben, Version 2 (2021-06)","cells":[{"id":0,"value":"# Überarbeitete Farben, Version 2 (2021-06)","pinned":false,"hidden":false,"mode":"md"},{"id":4274,"value":"# Exports","pinned":true,"hidden":false,"mode":"md"},{"id":4276,"value":"categoryColors = simplifiedList","pinned":true,"hidden":false,"mode":"ojs"},{"id":4279,"value":"categoryColorsMuted = simplifiedMutedList","pinned":true,"hidden":false,"mode":"ojs"},{"id":4281,"value":"# Process","pinned":true,"hidden":false,"mode":"md"},{"id":4283,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"origBaseColors = getColorListFromString(`\"#374e8e,#3c87ad,#56a7ab,#cda76f,#be7d58,#aa5954,#8d3a59\"`, 'base')","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"swatches(origBaseColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"colorDisplay(origBaseColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`Plot der a- und b-Werte der Farben:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"plotColors(origBaseColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2147,"value":"displayCriticalCombinations(origBaseColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2149,"value":"displayCriticalCombinations(origBaseColors.map(culori.filterDeficiencyDeuter()), 15)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3338,"value":"oklch = origBaseColors.map(culori.oklch)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3567,"value":"blueJeansWithinPrintGamut = culori.oklch('374e8e')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3340,"value":"bluejeans = blueJeansWithinPrintGamut","pinned":true,"hidden":false,"mode":"ojs"},{"id":3343,"value":"silverTurquoise = ({\n ...bluejeans,\n h: 185,\n l: 0.725,\n c: 0.1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3345,"value":"newBlues = culori.samples(3).map(culori.interpolate([bluejeans, silverTurquoise], 'oklch')).map(color => culori.clampChroma(color, color.c !== undefined ? color.mode : 'oklch'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3356,"value":"swatches(newBlues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3350,"value":"displayCriticalCombinations(newBlues, 24)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3376,"value":"wineRed = culori.clampChroma({\n mode: \"oklch\",\nl: 0.48,\n c: 0.2,\n h: 5\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3571,"value":"wineRedWithinPrintGamut = culori.oklch('#a73c64')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3587,"value":"yellowWithinPrintGamut = ({\n ...culori.oklch('e3b13e'),\n\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3379,"value":"brightYellow = yellowWithinPrintGamut","pinned":true,"hidden":false,"mode":"ojs"},{"id":3381,"value":"newOranges = culori.samples(4).map(culori.interpolate([brightYellow, wineRed], 'oklch')).map(color => culori.clampChroma(color, color.c !== undefined ? color.mode : 'oklch'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3383,"value":"swatches(newOranges)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3388,"value":"displayCriticalCombinations(newOranges, 22)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3392,"value":"saturatedColors = [...newBlues, ...newOranges].map((d, i) => ({\n ...d,\n index: i\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3394,"value":"md`\n${swatches(origBaseColors)}\n${swatches(saturatedColors)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3438,"value":"getColorList(saturatedColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3396,"value":"colorDisplay(saturatedColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3407,"value":"plotColors([...saturatedColors,...origBaseColors].map(culori.oklab))","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`Ein Versuch, die Helligkeitsunterschiede etwas auszugleichen. Das Ziel ist, die Bandbreite der Helligkeit etwas zu reduzieren, so dass in der Folge die hellen Farben genügend Abstand dazu haben können – und damit unterscheidbar werden.\n\nDies würde auch die Beobachtungen von Jonas integrieren, der für seine Story die Helligkeitsstufen auch etwas ausgeglichen hat.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2167,"value":"maximumLightness = 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":4144,"value":"vl.markCircle(markConfig)\n.config(overallConfig)\n.data([...saturatedColors].map((c) => ({...c, hex: culori.formatHex(c)})))\n.encode(\n vl.x().fieldQ('index').title('Index'),\n vl.y().fieldQ('l').title('Lightness'),\n vl.color().field('hex').scale(null),\n vl.tooltip().field('hex')\n)\n.render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3717,"value":"md`## Zusätzliche Farben`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3719,"value":"darkLaguna = culori.clampChroma(({\n ...newOranges[3],\n c: 0.1,\n h: newBlues[2].h\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3723,"value":"newGreens = culori.samples(4).map(culori.interpolate([darkLaguna, brightYellow], 'oklch')).map(color => culori.clampChroma(color)).slice(0,-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3725,"value":"md`${swatches(newGreens)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3737,"value":"washedOutBlueJeans = culori.clampChroma(({\n ...newBlues[2],\n c: 0.125,\n h: newBlues[0].h,\n l: 0.75\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3738,"value":"newViolets = culori.samples(4).map(culori.interpolate([newOranges[3], washedOutBlueJeans], 'oklch')).map(color => culori.clampChroma(color)).slice(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3741,"value":"md`${swatches(newViolets)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3861,"value":"latteMacchiato = ({...culori.oklch('#dcd4c0'), l: endLightness})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3863,"value":"chocolate = culori.clampChroma({\n ...latteMacchiato,\n l: newBlues[0].l,\n c:0.3\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3864,"value":"browns = culori.samples(3).map(culori.interpolate([chocolate,latteMacchiato], 'oklch'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3868,"value":"md`${swatches(browns)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3735,"value":"plotColors([...saturatedColors,...newGreens, ...newViolets,...browns,...coolGrays].map(culori.oklab))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3757,"value":"md`${swatches([...newBlues,...newGreens,...newOranges,...newViolets,...browns])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3852,"value":"colorDisplay([...newBlues,...newGreens,...newOranges,...newViolets,...browns,...coolGrays,...warmGreys])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3767,"value":"getColorList([...newBlues,...newGreens,...newOranges,...newViolets])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3857,"value":"getColorList(coolGrays)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3859,"value":"getColorList(warmGreys)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3896,"value":"getColorList(browns)","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`## Helle Farben`","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"md`Diese Farben basieren natürlich auf den ursprünglich von Anja definierten Farben – die jetzt von mir angepasst wurden.\n\nIch versuche nun, eine neue aufgehellte Skala zu erstellen, die auf der «neuen» Skala basiert.\n\nIn einer ersten, naiven Vorgehensweise skaliere ich einfach die Helligkeit.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"lightnessExtent = d3.extent(saturatedColors, c => c.l)","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"lightnessScale = d3.scaleLinear(lightnessExtent, [0.75, 0.85])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2443,"value":"darknessScale = d3.scaleLinear(lightnessExtent, [0.35, 0.6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"reworkedLightColors = saturatedColors.map(c => ({...c, l: lightnessScale(c.l), category: 'bright'}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`Das Resultat ist sehr … bonbonfarbig?\n\n${swatches(reworkedLightColors)}\n${colorDisplay(reworkedLightColors)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`Also skaliere ich in einem zweiten Versuch auch den Chroma-Wert hinunter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"chromaExtent = d3.extent(semanticColors, c => culori.oklch(c).c)","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"chromaScale = d3.scaleLinear(chromaExtent, [0.002, 0.08]).clamp(false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"mutedLightColors = semanticColors.map(c => culori.oklch(c)).map((c, i) => ({\n ...c,\n l: lightnessScale(c.l),\n c: chromaScale(c.c),\n category: 'light',\n index: i\n})).map(c => culori.clampChroma(c))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2446,"value":"mutedDarkColors = semanticColors.map(c => culori.oklch(c)).map((c, i) => ({\n ...c,\n l: darknessScale(c.l),\n c: chromaScale(c.c),\n category: 'dark',\n index: i\n})).map(c => culori.clampChroma(c))","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"origLightColors = getColorListFromString(`### Light\n\n#8799AF\n\n#68B5B3\n\n#95C9BF\n\n#E0CCBA\n\n#D8ABAB\n\n#D394AE\n\n#BA8CB7`\n, 'light')","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`Oben: Originalfarben; unten: neu\n\n${swatches(origLightColors)}\n${swatches(mutedLightColors)}\n${colorDisplay(mutedLightColors)}\n\nIn Kombination mit den überarbeiteten Farben\n${swatches(mutedLightColors)}\n${swatches(semanticColors)}\n${swatches(mutedDarkColors)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"vl.markCircle(markConfig)\n.config(overallConfig)\n.data([...semanticColors, ...mutedLightColors, ...mutedDarkColors].map((c) => ({...c, hex: culori.formatHex(c)})))\n.encode(\n vl.x().fieldQ('index').title('Index'),\n vl.y().fieldQ('l').title('Lightness'),\n vl.color().field('hex').scale(null),\n vl.tooltip().field('hex')\n)\n.render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"md`Nach einem Nachmittag rumprobieren lässt sich sagen: die absolut perfekte Lösung wird es vermutlich nicht geben. Die hellen Farben kommen sich gegenseitig ins Gehege. Und da wir nicht beliebig hell werden können, ergibt sich in der Mitte der Skala eine Überlappung, bei der die Farben sehr ähnlich zueinander werden.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"md`## Vergleich mit den alten hellen Farben`","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"oldBright = getColorListFromString(`s-viz-color-one-1\n#D6DCFF\ns-viz-color-two-1\n#FFF0BF\ns-viz-color-three-1\n#C7F0E9\ns-viz-color-four-1\n#FFDCD1\ns-viz-color-five-1\n#FCDCFC s-viz-color-six-1\n#C9F5D2\ns-viz-color-seven-1\n#FFD3D1\ns-viz-color-eight-1\n#CEE9F2\ns-viz-color-nine-1\n#E2DAF2\ns-viz-color-ten-1\n#F3FABB\ns-viz-color-eleven-1\n#FFE9D6\ns-viz-color-twelve-1\n#EDECE1`, 'oldLight')","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"md`\n${swatches(oldBright)}\n${swatches(mutedLightColors)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"vl.markCircle(markConfig)\n.config(overallConfig)\n.data([...saturatedColors, ...mutedLightColors, ...oldBright].map((c) => ({...c, hex: culori.formatHex(c)})))\n.encode(\n vl.x().fieldQ('index').title('Index'),\n vl.y().fieldQ('l').title('Lightness'),\n vl.color().field('hex').scale(null),\n vl.tooltip().field('hex')\n)\n.render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`Das bestätigt immerhin, dass die neuen Farben deutlich weniger hell sind, und entsprechend auch besser gedruckt werden sollten.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`## Fallback-Farben\n\nDabei handelt es sich um Farben für Q, die für Charts verwendet werden, die mehr als 7 Kategorien definiert haben.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`### Versuch 2: «Synthetische» Grauskala mit Hue-Shift`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"md`Erste Farbe als Hintergrund-Farbe: \\`s-color-gray-2\\`. Wird für Fälle verwendet, wo wir eine Fläche füllen müssen, wo wir keine Daten dazu haben.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"background = culori.oklab('#e3e4e9')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1443,"value":"swatches([background])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"md`Von Joana definiertes Grau. Verwendet für _Andere_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"joanaGrey = culori.oklab('#aeb5ba')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1445,"value":"swatches([joanaGrey])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2782,"value":"md`### Using greys from the Website\n\nSome insights:\n\n- \\`--black\\` (#000) is used for Text\n- \\`--graydark\\` (#333) is used for the lead on the front page, image caption\n- \\`--graymedium\\` (#707070) is used for the meta information\n- \\`--grayultralight\\` / \\`--colorbackground\\` (#f5f5f5) is used for the page background\n- \\`--white\\` / \\`--articlebackground\\` (#fff) is used as the article background\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4125,"value":"uxGreys = getColorListFromString(`--black (#000000) is used for Text\n--graydark (#333333) is used for the lead on the front page, image caption\n--graymedium (#707070) is used for the meta information\n--grayultralight / --colorbackground (#f5f5f5) is used for the page background\n--white / --articlebackground (#ffffff) is used as the article background\n`, 'uxGreys')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4132,"value":"uxNames = '--black,--graydark,--graymedium,--grayultralight/--colorbackground,--white/--articlebackground'.split(',')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4131,"value":"uxGreysStyleguide = uxGreys.map((c,i) => ({\n name: uxNames[i],\n value: culori.formatHex(c)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4136,"value":"uxGreysStyleguide.reduce((s, obj) => s + `\\n- ${JSON.stringify(obj)}`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1767,"value":"md`### In Kombination mit den Kategorienfarben`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2869,"value":"md`Nein, das überzeugt mich nicht.\n\nDeshalb die folgende Überlegung: für die Schrift und die «strukturellen» Elemente einer Grafik (Ticks, Legenden) bietet sich die Website (neutrale) Skala an.\n\nFür die Inhalte einer Grafik gibt es eine kühle Grauskala – möglicherweise mit einer zusätzlichen, optionalen warmen Grauskala.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2870,"value":"md`### Cool (and warm) Greys\n\nDiese Grautöne nehmen als Grundlage den Farbton der Q-Skala.\n\nEndpunkt dieser Skalen ist immer das völlig entsättigte #f5f5f5 (Grey Ultra Light).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2942,"value":"endColor = culori.oklch('#f5f5f5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3644,"value":"coolGrayHue = 285","pinned":true,"hidden":false,"mode":"ojs"},{"id":3651,"value":"warmGreyHue = 355","pinned":true,"hidden":false,"mode":"ojs"},{"id":3618,"value":"coolGrayStartColor = ({\n mode: \"oklch\",\n l: startLightness,\n c: startChroma,\n h: coolGrayHue\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3627,"value":"coolGrayEndColor = ({\n mode: \"oklch\",\n l: endLightness,\n c: endChroma,\n h: coolGrayHue\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3649,"value":"warmGreyStartColor = ({\n ...coolGrayStartColor,\n h: warmGreyHue\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3654,"value":"warmGreyEndColor = ({\n ...coolGrayEndColor,\n h: warmGreyHue\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2944,"value":"startChroma = 0.045","pinned":true,"hidden":false,"mode":"ojs"},{"id":3640,"value":"endChroma = 0.005","pinned":true,"hidden":false,"mode":"ojs"},{"id":2948,"value":"startLightness = 0.35","pinned":true,"hidden":false,"mode":"ojs"},{"id":3624,"value":"endLightness = 0.85","pinned":true,"hidden":false,"mode":"ojs"},{"id":2919,"value":"displayCriticalCombinations(coolGrays, 15)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2956,"value":"graysEasingGammaFunction = culori.easingGamma(0.8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3078,"value":"differenceHistogram(coolGrays)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2874,"value":"coolGrayInterpolator = culori.interpolate(\n [\n coolGrayStartColor, \n coolGrayEndColor\n ], 'oklch')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2880,"value":"coolGrays = culori.samples(5).map(coolGrayInterpolator)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2941,"value":"warmGreyInterpolator = culori.interpolate(\n[\n warmGreyStartColor, warmGreyEndColor\n], 'oklch')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2955,"value":"warmGreys = culori.samples(5).map(warmGreyInterpolator)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2882,"value":"md`\n${swatches(coolGrays)}\n${swatches(warmGreys)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2987,"value":"colorDisplay([...coolGrays, ...warmGreys])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3662,"value":"colorDisplay([...saturatedColors,...warmGreys])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3667,"value":"plotColors([...saturatedColors,...coolGrays,...warmGreys].map(culori.oklab))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3679,"value":"lightCoolGrays = culori.samples(5).map(culori.interpolate([\n {...coolGrayStartColor, c: 0.02, l: 0.7},\n {...coolGrayEndColor, c: 0.002, l: 0.9}\n], 'oklch'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3706,"value":"lightWarmGreys = culori.samples(5).map(culori.interpolate([\n {...warmGreyStartColor, c: 0.02, l: 0.7},\n {...warmGreyEndColor, c: 0.002, l: 0.9}\n], 'oklch'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3685,"value":"$${swatches(coolGrays)}\n${swatches(lightCoolGrays)}\n${swatches(warmGreys)}\n${swatches(lightWarmGreys)}","pinned":true,"hidden":false,"mode":"md"},{"id":3713,"value":"colorDisplay([...mutedLightColors,...lightWarmGreys])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1479,"value":"md`## Semantische Kategorienfarben`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2594,"value":"semanticColors = [\n ...newBlues,\n ...newGreens,\n ...newOranges,\n ...newViolets,\n ...browns,\n ...coolGrays,\n ...warmGreys\n].map((c, i) => ({...c, category: 'semantic', index: i}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2596,"value":"md`\n${swatches(saturatedColors)}\n${swatches(semanticColors)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1509,"value":"getColorList(semanticColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2585,"value":"plotColors(semanticColors.map(culori.oklab))","pinned":false,"hidden":false,"mode":"ojs"},{"id":4051,"value":"plotColors([...semanticColors,...mutedLightColors].map(culori.oklab))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2995,"value":"plotColors([...saturatedColors, ...coolGrays, ...warmGreys, ...uxGreys].map(culori.oklab))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4080,"value":"md`# Styleguide Preparation`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4054,"value":"simplifiedList = [\n ...newBlues,\n ...newGreens,\n ...newOranges,\n ...newViolets,\n ...browns,\n ...coolGrays.filter((c,i) => i % 2 === 0)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4058,"value":"swatches(simplifiedList)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4150,"value":"swatches(simplifiedMutedList)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4148,"value":"simplifiedMutedList = [\n ...mutedLightColors.slice(0,16),\n ...mutedLightColors.slice(16,21).filter((c,i) => i % 2 === 0)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4060,"value":"names = [\n 'Nacht',\n 'Lagune',\n 'Aquamarin',\n 'Moos',\n 'Pesto',\n 'Guacamole',\n 'Nachos',\n 'Mandarine',\n 'Sugo',\n 'Chianti',\n 'Amethyst',\n 'Flieder',\n 'Himmel',\n 'Schokolade',\n 'Sand',\n 'Latte Macchiato',\n 'Aubergine',\n 'Regen',\n 'Nebel'\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4176,"value":"genericNames = [\n 'Dark Blue',\n 'Teal',\n 'Turquoise',\n 'Dark Green',\n 'Green',\n 'Yellow Green',\n 'Yellow',\n 'Orange',\n 'Orange Red',\n 'Red',\n 'Purple',\n 'Violet',\n 'Light Blue',\n 'Brown',\n 'Beige',\n 'Warm White',\n 'Black',\n 'Grey',\n 'Cool White'\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4061,"value":"styleguideList = simplifiedList.map((c,i) => ({\n name: names[i],\n value: culori.formatHex(c),\n genericName: genericNames[i]\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4064,"value":"styleguideList.reduce((s, obj) => {\n return s + `\\n- ${JSON.stringify(obj)}`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4245,"value":"styleguideList.reduce((s, obj) => {\n return s + `\n- ${JSON.stringify({...obj, name: obj.genericName})}`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4146,"value":"slackList = styleguideList.reduce((s, obj) => {\n return s + `\\n${obj.value} ${obj.name}`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4170,"value":"slackMuted = simplifiedMutedList.reduce((s, col, i) => {\n return s + `\\n${culori.formatHex(col)} ${names[i]} (Hintergrund)`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4071,"value":"qColorNames = 'one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve'.split(',')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4073,"value":"qOrder = [\n newBlues[0],\n newBlues[2],\n newOranges[1],\n newOranges[3],\n newBlues[1],\n newOranges[0],\n newOranges[2],\n warmGreys[0],\n warmGreys[2],\n warmGreys[4],\n warmGreys[1],\n warmGreys[3]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4091,"value":"qOrderMuted = [\n mutedLightColors[0],\n mutedLightColors[2],\n mutedLightColors[7],\n mutedLightColors[9],\n mutedLightColors[1],\n mutedLightColors[6],\n mutedLightColors[8],\n mutedLightColors[21],\n mutedLightColors[23],\n mutedLightColors[25],\n mutedLightColors[22],\n mutedLightColors[24]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":4074,"value":"swatches(qOrder)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4089,"value":"swatches(qOrderMuted)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4084,"value":"qStyleguideList = qOrder.map((c, i) => ({\n name: `s-viz-color-${qColorNames[i]}-5`,\n value: culori.formatHex(c)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4087,"value":"qStyleguideList.reduce((s, obj) => s + `\\n-${JSON.stringify(obj)}`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4232,"value":"qOrder.reduce((s, color, i) =>{\nconst oldColorName = qColorNames[i]\nconst defaultColor = culori.formatHex(color)\nconst mutedColor = culori.formatHex(qOrderMuted[i])\nconst styleguideColor = styleguideList.find(c => c.value === defaultColor) || warmGreys.find(c => culori.formatHex(c) === defaultColor)\nconst styleguideName = styleguideColor.name ? styleguideColor.name.replace(' ', '').toLowerCase() : `fallbackgray${warmGreys.indexOf(styleguideColor)+1}`\n\n return s + `--s-viz-color-${oldColorName}-muted: var(--s-viz-color-${styleguideName}-muted, #{$s-viz-color-${oldColorName}-1});\n--s-viz-color-${oldColorName}: var(--s-viz-color-${styleguideName}, #{$s-viz-color-${oldColorName}-5});\n`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4313,"value":"qOrder.reduce((s, color, i) =>{\nconst oldColorName = qColorNames[i]\nconst defaultColor = culori.formatHex(color)\nconst mutedColor = culori.formatHex(qOrderMuted[i])\n\n return s + `\n\"s-viz-color-${oldColorName}-1\": \"${mutedColor}\",\n\"s-viz-color-${oldColorName}-3\": \"${mutedColor}\",\n\"s-viz-color-${oldColorName}-5\": \"${defaultColor}\",\n\"s-viz-color-${oldColorName}-7\": \"${defaultColor}\",\n`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4326,"value":"qOrder.reduce((s, color, i) =>{\nconst oldColorName = qColorNames[i]\nconst defaultColor = culori.formatHex(color)\nconst mutedColor = culori.formatHex(qOrderMuted[i])\n\n return s + `\n.s-viz-color-${oldColorName}-1 { color: var(--s-viz-color-${oldColorName}-muted); }\n.s-viz-color-${oldColorName}-3 { color: var(--s-viz-color-${oldColorName}-muted); }\n.s-viz-color-${oldColorName}-5 { color: var(--s-viz-color-${oldColorName}); }\n.s-viz-color-${oldColorName}-7 { color: var(--s-viz-color-${oldColorName}); }\n`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4173,"value":"slackQList = qStyleguideList.reduce((s, obj) => s + `\\n${obj.value}`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4330,"value":"qStyleguideList.map(d => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4116,"value":"qMutedStyleguideList = qOrderMuted.map((c,i) => ({\n name: `s-viz-color-${qColorNames[i]}-1`,\n value: culori.formatHex(c)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":4122,"value":"qMutedStyleguideList.reduce((s,obj) => s + `\\n- ${JSON.stringify(obj)}`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4141,"value":"[...qStyleguideList,...qMutedStyleguideList].reduce((obj, col) => {\n obj[col.name] = col.value\n return obj\n}, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4138,"value":"[...coolGrays,...warmGreys].map(c => ({value: culori.formatHex(c)})).reduce((s, obj) => s + `\\n- ${JSON.stringify(obj)}`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4179,"value":"## Umsetzung in `sophie-viz-colors`","pinned":false,"hidden":false,"mode":"md"},{"id":4181,"value":"generalJSON = styleguideList.reduce((s, col) => s + `\\n\"s-viz-color-${col.name.replace(' ', '').toLowerCase()}\": \"${col.value}\",`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4187,"value":"generalJSONMuted = simplifiedMutedList.reduce((s, col, i) => s + `\\n\"s-viz-color-${names[i].replace(' ', '').toLowerCase()}-muted\": \"${culori.formatHex(col)}\",`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4238,"value":"semanticJSON = styleguideList.reduce((s, color, i) => {\nconst name = color.genericName.replace(' ','').toLowerCase()\nconst mutedHex = culori.formatHex(simplifiedMutedList[i])\n\n return s + `\n\"s-viz-color-${name}\": \"${color.value}\",\n\"s-viz-color-${name}-muted\": \"${mutedHex}\",\n`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4194,"value":"warmGraysForJSON = warmGreys.reduce((s, col, i) => s + `\\n\"col-gray-warm-${i + 1}\": \"${culori.formatHex(col)}\",`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4202,"value":"warmGraysMutedForJSON = lightWarmGreys.reduce((s, col, i) => s + `\\n\"col-gray-warm-${i + 1}-muted\": \"${culori.formatHex(col)}\",`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4196,"value":"coolGraysForJSON = coolGrays.reduce((s, col, i) => s + `\\n\"col-gray-cool-${i + 1}\": \"${culori.formatHex(col)}\",`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4206,"value":"coolGraysMutedForJSON = lightCoolGrays.reduce((s, col, i) => s + `\\n\"col-gray-cool-${i + 1}-muted\": \"${culori.formatHex(col)}\",`, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4217,"value":"specificClasses = styleguideList.reduce((s, col) => {\nlet n = col.name.replace(' ','').toLowerCase()\n\n return s + `\n.s-viz-color-${n} {\ncolor: var(--s-viz-color-${n});\n}\n`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4298,"value":"Custom Properties need a special syntax in SCSS, otherwise SASS variables won't be replaced: https://sass-lang.com/documentation/style-rules/declarations/#custom-properties","pinned":false,"hidden":false,"mode":"md"},{"id":4289,"value":"specificColorProperties = styleguideList.reduce((s, col) => {\nlet n = col.name.replace(' ','').toLowerCase()\n\n return s + `\n--s-viz-color-${n}: #{$s-viz-color-${n}};`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4229,"value":"specificMutedClasses = styleguideList.reduce((s, col) => {\nlet n = col.name.replace(' ','').toLowerCase() + '-muted'\n\n return s + `\n.s-viz-color-${n} {\ncolor: var(--s-color-${n});\n}\n`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4295,"value":"specificMutedCustomProperties = styleguideList.reduce((s, col) => {\nlet n = col.name.replace(' ','').toLowerCase() + '-muted'\n\n return s + `\n--s-viz-color-${n}: #{$s-viz-color-${n}};`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4224,"value":"semanticClasses = styleguideList.reduce((s, col) => {\nlet n = col.name.replace(' ','').toLowerCase()\n let generic = col.genericName.replace(' ', '').toLowerCase()\n\n return s + `\n.s-viz-color-${generic} {\ncolor: var(--s-viz-color-${generic});\n}\n`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4304,"value":"semanticCustomProperties = styleguideList.reduce((s, col) => {\nlet n = col.name.replace(' ','').toLowerCase()\n let generic = col.genericName.replace(' ', '').toLowerCase()\n\n return s + `\n--s-viz-color-${generic}: #{var(--s-viz-color-${n}, $s-viz-color-${n})};`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4227,"value":"semanticMutedClasses = styleguideList.reduce((s, col) => {\nlet n = col.name.replace(' ','').toLowerCase()\n let generic = col.genericName.replace(' ', '').toLowerCase()\n\n return s + `\n.s-viz-color-${generic}-muted {\ncolor: var(--s-viz-color-${generic}-muted);\n}\n`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4308,"value":"semanticMutedClasses1 = styleguideList.reduce((s, col) => {\nlet n = col.name.replace(' ','').toLowerCase()\n let generic = col.genericName.replace(' ', '').toLowerCase()\n\n return s + `\n--s-viz-color-${generic}-muted: #{var(--s-viz-color-${generic}-muted, $s-viz-color-${n}-muted)};`\n}, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"getColorList(saturatedColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1129,"value":"getColorList(mutedLightColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2416,"value":"getColorList(semanticColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`### Lightness`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4266,"value":"qOrder.map(culori.okhsl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4271,"value":"d3.extent(qOrder.map(culori.okhsl), d => d.s)","pinned":true,"hidden":false,"mode":"ojs"},{"id":4269,"value":"qOrderMuted.map(culori.okhsl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3280,"value":"# Branding Colors","pinned":true,"hidden":false,"mode":"md"},{"id":3282,"value":"brandColors = getColorListFromString(`CMYK 0/56/63/0\nRGB 246/139/99\nHEX #f68b63\nPantone\nCMYK 87/79/0/0\nRGB 41/58/206\nHEX #293ace\nPantone\nCMYK 63/0/58/0\nRGB 92/191/144\nHEX #5cbf90\nPantone\nCMYK 27/92/68/18\nRGB 160/50/66\nHEX #a03242\nPantone\nCMYK 69/62/0/0\nRGB 100/109/228\nHEX #646de4\nPantone\nCMYK 70/23/90/36\nRGB 61/109/55\nHEX #3d6d37\nPantone\nCMYK 43/76/23/2\nRGB 154/90/136\nHEX #9a5987\nPantone\nCMYK 100/98/31/28\nRGB 19/26/94\nHEX #131a5e\nPantone\nCMYK 57/32/43/3\nRGB 118/146/141\nHEX #76928d\nPantone\nCMYK 1/19/79/1\nRGB 249/202/81\nHEX #f9ca51\nPantone\nCMYK 54/0/9/0\nRGB 102/203/227\nHEX #66cbe3\nPantone\nCMYK 0/0/0/70\nRGB 109/110/113\nHEX #6d6e71\nPantone\nCMYK 10/20/49/0\nRGB 229/200/145\nHEX #e5c891\nPantone\n100% 60% 30% 100% 60% 30% 100% 60% 30%\nCMYK 28/0/8/0\nRGB 180/225/232\nHEX #b4e1e8\nPantone\nCMYK 0/0/0/15\nRGB 220/221/222\nHEX #dcddde`, 'branding')","pinned":true,"hidden":false,"mode":"ojs"},{"id":3291,"value":"plotColors([...brandColors, ...semanticColors.map(culori.oklab)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1064,"value":"md`# Appendix`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1065,"value":"oldColors = getColorListFromString(`s-viz-color-one-5\n#3952EE\ns-viz-color-two-5\n#EBBD22\ns-viz-color-three-5\n#24B39C\ns-viz-color-four-5\n#E66E4A\ns-viz-color-five-5\n#AD4BAC\ns-viz-color-six-5\n#38A650\ns-viz-color-seven-5\n#D64B47\ns-viz-color-eight-5\n#0BA9D9\ns-viz-color-nine-5\n#6C43C0\ns-viz-color-ten-5\n#BBD215\ns-viz-color-eleven-5\n#B3611D\ns-viz-color-twelve-5\n#C5C294\n`, 'old')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1074,"value":"plotColors(oldColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1076,"value":"colorDisplay(oldColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1923,"value":"md`\n### Display Critical Combinations\n\nBerechnet die Ciede2000-Differenz zwischen zwei Farben.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1920,"value":"function displayCriticalCombinations (palette, cutoff = 18) {\n let combinations = palette\n.map(c1 => {\n return palette.map(c2 => culori.differenceCiede2000()(c1,c2))\n})\n.flat().reduce((list, curr, index) => {\n \n if (curr > 0 && curr < cutoff) {\n let a = palette[Math.floor(index / palette.length)]\n let b = palette[index % palette.length]\n\n if (!list.some(d => d.a === b && d.b === a))\n {\n list.push({\n a,\n b,\n curr\n })\n }\n \n\n }\n return list\n}, [])\n \n return html`\n

Number of critical combinations that are below the ${cutoff} threshold: ${combinations.length}

\n\n\n\n${combinations.map(combi => {\n return html``;\n})}\n\n

${swatches([combi.a,combi.b])}

${combi.curr}

\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3476,"value":"function rateCriticalCombinations (palette) {\n let combinations = palette\n.map(c1 => {\n return palette.map(c2 => culori.differenceCiede2000()(c1,c2))\n})\n.flat().reduce((list, curr, index) => {\n \n if (curr > 0) {\n let a = palette[Math.floor(index / palette.length)]\n let b = palette[index % palette.length]\n\n if (!list.some(d => d.a === b && d.b === a))\n {\n list.push({\n a,\n b,\n curr\n })\n }\n \n\n }\n return list\n}, []).sort((a,b) => b.curr - a.curr)\n \n return html`\n\n\n${combinations.map(combi => {\n return html``;\n})}\n\n

${swatches([combi.a,combi.b])}

${combi.curr}

\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2468,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"function getColorListFromString (inputString, category) {\n return Array.from(\n inputString.matchAll(/#[0-9a-f]{6}/gi))\n .map(a => a[0])\n .map(s => culori.oklab(s))\n .map(col => {\n col.category = category\n return col\n })\n .map((c, i) => ({\n ...c,\n index: i\n }))\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"swatches = colors => {\n const n = colors.length\n const canvas = svg`