2b:null 2c:["$","title",null,{"children":"Quick and dirty color ramp maker! | Marc Lajoie | Observable"}] 31:[] 2f:{"id":"c9e6ce3fdf49c445","slug":null,"title":"Quick and dirty color ramp maker!","thumbnail":"b8640dd6be952cc3dd3c7513fbb521ce5febec79ca64da3305d7131550d7051e","access_level":"public","create_time":"$D2022-06-05T23:04:19.537Z","update_time":"$D2023-09-10T15:12:57.077Z","view_time":null,"first_public_time":"$D2023-05-29T17:31:49.304Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7a71c5650a3fa6fc","login":"lajoiemedia","name":"Marc Lajoie","avatar_url":"https://avatars-next.observableusercontent.com/5f7580af1541eb5516f2b7bf036ad4adb221d4967cdb2a2dfa6fe2fe5f0a8518","tier":"starter_2024"},"version":134,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1aafdd40f452f6a2","login":"lajoiemedia","name":"Marc Lajoie","avatar_url":"https://avatars-next.observableusercontent.com/5f7580af1541eb5516f2b7bf036ad4adb221d4967cdb2a2dfa6fe2fe5f0a8518","tier":null}],"members":[{"type":"individual","id":"1aafdd40f452f6a2","login":"lajoiemedia","name":"Marc Lajoie","avatar_url":"https://avatars-next.observableusercontent.com/5f7580af1541eb5516f2b7bf036ad4adb221d4967cdb2a2dfa6fe2fe5f0a8518","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Quick and dirty color ramp maker!","cells":[{"id":0,"value":"# Quick and dirty color ramp maker!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"viewof baseColor = Inputs.text({label:\"Base Color\", value:\"#00234B\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"{\n \n if(!(/^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/g).test(baseColor)) {\n return html`

Color must be 6 or 8 digit hex, e.g. #AABBCC or #AABBCCDD

`;\n }\n \n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"{\n let converted = oklchConvert(baseColor)\n return html`

oklch(${converted.l.toFixed(3)}, ${converted.c.toFixed(3)}, ${converted.h.toFixed(1)})

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof lightnesses = Inputs.text({label:\"Lightnesses (comma seperated)\",value:\"0.97, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"{\n let arr = lightnesses.split(\",\").map(d => d.trim()).map(d => +d);\n let error;\n if(arr.some(d => Number.isNaN(d))) {\n return html`

List contains non-numerical entry

`;\n }\n if(arr.some(d => d>1 || d<0)) {\n return html`

List values should be between 0 and 1

`;\n }\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"html`\n

Ramp

\n ${colorRamp.map(d => html`

`)}\n

oklch(${lightnessArr[i]}, ${convertedArr[i].c.toFixed(3)}, ${convertedArr[i].h?.toFixed(1)}); ${d}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"Inputs.button(\"Copy hexes to clipboard\",{reduce: () => {\n\n navigator.clipboard.writeText(colorRamp.map(d => `\"${d}\"`).join(\",\")).then(function() {\n \n }, function() {\n \n });\n}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"lightnessArr = lightnesses.split(\",\").map(d => d.trim()).map(d => +d).filter(d => !Number.isNaN(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"colorRamp = convertedArr.map(d => culori.formatHex(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"convertedArr = lightnessArr.map(l => ({...oklchConvert(baseColor),l})).map(d => culori.clampChroma(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"oklchConvert = culori.converter(\"oklch\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"culori","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"culori = await import('https://cdn.skypack.dev/culori')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"