2b:null 2c:["$","title",null,{"children":"CWF Season 2 Reusable Style Elements | Brett Cooper | Observable"}] 31:Tc2a,md`## TODO Things to look into: * https://observablehq.com/@sebastien/a-quantitative-approach-to-colour-palette-selection * https://observablehq.com/@veltman/watercolor water colour plaettes, but also involves the texture of the image to give the effect. ** https://observablehq.com/@makio135/give-me-colors ** << it's got it all Other thoughts: - https://observablehq.com/@harrystevens/roll-your-own-color-palette-interpolator - https://observablehq.com/@d3/working-with-color ✅ add color names http://www.simplehtmlguide.com/colours.php ⬜ look at adobe color twiddle (ej showed this on twitch stream) >>> https://color.adobe.com/create/color-accessibility >>> https://color.adobe.com/create/color-wheel Color Blindness Simulation: How does the colour palete look. https://observablehq.com/@spattana/colorblindlib https://observablehq.com/@sebastien/srgb-rgb-gamma ⬜ colour groups like red16[] what would be 16 shades of red or yellow256[]. This could also inclue yellowRed256[] for a yellow to red graident. Maybe functions could be used too as well as fav colours? https://observablehq.com/search?query=brain.js has some colour examples that might be useful. >> ✅ Select black or white based on the background colour >> ⬜ I have also seen a brain ML program that will generate colours based on learning of colours that you like. >> https://medium.com/hackernoon/how-to-make-a-machine-learning-recommendation-system-from-scratch-d747be801ce9 ⬜ Copy colour array to clipboard. * ? maybe not needed * ⬜ Copy palette to a new cell so changes can be made. * ? maybe not needed * ⬜ Palatte saved as shared via url arguments. ⬜ Tools to make a palatte colder or warmer (even on grays, like tailwind does). make sets of dark colours and light colours. d3.interpolateWarm d3.interpolateCool https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/rainbow.js ⬜ Complementry colours of a colour palate. red - green, yellow - purple (there might also be other technical colours between the colour and it's complementry.) ⬜ Colour wheel https://observablehq.com/@d3/learn-d3-shapes ## Colours from picture: https://jariz.github.io/vibrant.js/ https://lokeshdhakar.com/projects/color-thief/ https://color.adobe.com/create/image https://color.adobe.com/create/image-gradient https://observablehq.com/@paavanb/progressive-color-picker cool interaction. ## What commands D3 has to offer colours. https://d3-wiki.readthedocs.io/zh_CN/master/Colors/ https://github.com/d3/d3-color https://observablehq.com/@d3/working-with-color https://observablehq.com/@d3/color-legend ### Sites of interest: colour palette from picture http://colormind.io/blog/ Shirley recomended https://projects.susielu.com/viz-palette https://observablehq.com/@makio135/give-me-colors https://refactoringui.com/previews/building-your-color-palette/ https://uxdesign.cc/scouting-for-accessible-colors-a8ea0a8d288a https://codepen.io/meodai/pen/RerqjG the UI of this is nice https://design.google/library/exploring-color-google-maps/ `32:[{"id":"e915fd38a85ad70824c138b619f388751d415ac335db5502c8457f8089df964ce7e2d05943516dc4f6b2bb758946c611b7b87b08f2eb8cb1b64769eb38ed00ad","href":"https://static.observableusercontent.com/files/e915fd38a85ad70824c138b619f388751d415ac335db5502c8457f8089df964ce7e2d05943516dc4f6b2bb758946c611b7b87b08f2eb8cb1b64769eb38ed00ad","name":"CSS_Color_Names.csv","type":"text/csv","lastModified":1605737371884.861,"size":2674}] 2f:{"id":"54a691a269cb6b8d","slug":"cwf-season-2-reusable-style-elements","title":"CWF Season 2 Reusable Style Elements","thumbnail":"2602eff36c54d6072b164d86738332da48726482f034ac99cc73ee191c0f9d79","access_level":"public","create_time":"$D2020-11-16T02:55:19.379Z","update_time":"$D2021-01-13T22:48:59.677Z","view_time":null,"first_public_time":"$D2020-11-19T01:37:56.400Z","fork":{"id":"0e8e7529131e3841","slug":"cwf-season-2-reusable-style-elements","title":"CWF Season 2 Reusable Style Elements","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":277,"publish_version":277,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"CWF Season 2 Reusable Style Elements","cells":[{"id":0,"value":"md`# CWF Season 2 Reusable Style Elements\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"drawColors(cwf.map(d => chroma(d)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`### Computer the contast ratio of the colour palette cwf`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"contrasts = cwf.map(d => {\n return {\n wtext: chroma.contrast(\"#fff\", d),\n btext: chroma.contrast(\"#000\", d)\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"md`## ramp usages:\n\nramp(d3.interpolateRgb(\"red\", \"blue\"),4) \nramp(d3.interpolateLab(\"red\", \"blue\"),8) \nramp(d3.interpolateHclLong(\"red\", \"blue\"),16)\n\n**But how do I extract the colors as it's a HTMLCanvasElement?** maybe https://observablehq.com/@d3/sequential-scales \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"ramp(d3.interpolateRgb(cwf[0], cwf[1]),4) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"ramp(d3.interpolateRgb(cwf[1], cwf[2]),8) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"ramp(d3.interpolateLab(cwf[1], cwf[2]),8) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"ramp(d3.interpolateHclLong(cwf[1], cwf[2]),8) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"viewof colors = {\n const form = html``;\n form.oninput = () => {\n form.value = {foreground: form.if.value, background: form.ib.value};\n form.of.value = form.if.value;\n form.ob.value = form.ib.value;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"html`\n \n \n \n \n \n \n \n \n \n ${criteria.map(test => html`\n \n \n \n \n `)}\n \n

	Level	Content	Threshold
= test.value ? \"\" : \"color: red;\"};\">${contrasts [0].wtext >= test.value ? \"pass 👍\" : \"fail 👎\"}	${test.level}	${test.content}	${test.value.toFixed(1)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"criteria = [\n {level: \"AAA\", content: \"normal text\", value: 7.0},\n {level: \"AAA\", content: \"large text\", value: 4.5},\n {level: \"AA\", content: \"normal text\", value: 4.5},\n {level: \"AA\", content: \"large text\", value: 3.0},\n {level: \"AA\", content: \"graphics\", value: 3.0}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"md`

\n# Coding with fire Color palette.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"cwf = [\"#2A4359\", \"#58788C\", \"#F2BF27\", \"#F2811D\", \"#F2490C\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`# CSS Colour names`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"CSScolorNames = FileAttachment(\"CSS_Color_Names.csv\").csv({array: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"md`# brain.js color contrast\n trained via https://harthur.github.io/brain/ \n\nCould have trained more data...\n\n**Parses:** bgColor{r:0,g:0,b:0} \n**Returns:** either Black or White\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"textColorML(d3.color(cwf[3])) // yellow","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"textColorML({r:0,g:0,b:0}) // black","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"textColorML = function(bgColor) {\n var output = runNetwork(bgColor);\n if (output.black > .5) {\n return 'black';\n }\n return 'white';\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"runNetwork = function anonymous(input\n) {\n var net = {\"layers\":[{\"r\":{},\"g\":{},\"b\":{}},{\"0\":{\"bias\":-6.6594965816994875,\"weights\":{\"r\":7.6025203940092485,\"g\":8.645316787946328,\"b\":-1.6722997440862084}},\"1\":{\"bias\":10.890202423702757,\"weights\":{\"r\":-0.41026934177517,\"g\":-18.47553903135983,\"b\":-5.837089521340521}},\"2\":{\"bias\":9.839746109856538,\"weights\":{\"r\":-12.107199015376445,\"g\":-12.726385753498365,\"b\":3.0632430738122163}}},{\"black\":{\"bias\":2.400035271666398,\"weights\":{\"0\":10.709664174466717,\"1\":-17.170340359256816,\"2\":-16.155681524773723}}}],\"outputLookup\":true,\"inputLookup\":true};\n\n for (var i = 1; i < net.layers.length; i++) {\n var layer = net.layers[i];\n var output = {};\n \n for (var id in layer) {\n var node = layer[id];\n var sum = node.bias;\n \n for (var iid in node.weights) {\n sum += node.weights[iid] * input[iid];\n }\n output[id] = (1 / (1 + Math.exp(-sum)));\n }\n input = output;\n }\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"md`# Appendix\n\nThanks goes out to the giants whos sholders we stand apon.\n\nhttps://observablehq.com/@sxywu/color-palettes \nhttps://observablehq.com/@mbostock/wcag-contrast-ratio \nhttps://harthur.github.io/brain/ \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"import { ramp } from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"import { drawColors, chroma } from \"@sxywu/color-palettes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"style\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"import { style } from \"@hellonearthis/changing-the-css-as-it-looks-ugly-on-my-screen\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"