2f:[] 2d:{"title":"Golden ratio hue rotation","cells":[{"id":0,"value":"# Golden ratio hue rotation","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"viewof color = Inputs.color({label: \"Root color\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof steps = Inputs.range([1, 100], {label: \"Number of colors\", step: 1, value: 5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"{\n const container = document.createElement('div');\n container.classList.add('container');\n outputColorObjs.forEach( o => \n container.appendChild(\n outputSwatch( o, Color.spaces.srgb, { format: 'hex' })\n )\n );\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"Color = (await import('https://colorjs.io/dist/color.js')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"inputColorObj = new Color(color)","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"inputHue = inputColorObj.oklch.h;","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"outputHues = {\n let result = [];\n for (let step = 0; step < steps; step++) {\n result.push( (inputHue + 137.508 * step) % 360 ); // https://en.wikipedia.org/wiki/Golden_angle#Derivation\n }\n return result;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"outputColorObjs = outputHues.map( h => new Color('oklch', [\n inputColorObj.oklch.l,\n inputColorObj.oklch.c,\n h\n] ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"function outputSwatch( colorObj, destinationGamut, toStringOptions={} ) {\n const destinationObj = colorObj.to( destinationGamut );\n const serializedColor = destinationObj.toString( toStringOptions );\n return html`\n

\n\n

${serializedColor}

${ ( destinationObj.inGamut() ? '' : `⚠️ outside of the ${ destinationGamut.name } gamut` ) }\n

\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W2f","stdlib":"1","titling":"auto"}