2b:null 2c:["$","title",null,{"children":"Golden ratio hue rotation | Eric Portis | Observable"}] 31:[] 2f:{"id":"5ad4d94663131ac9","slug":null,"title":"Golden ratio hue rotation","thumbnail":"4fd7caea136aa7e111ef6e7a2aa6db9cd2c006165be4aa03905f3ca3d06c9f5f","access_level":"public","create_time":"$D2025-11-14T20:05:57.645Z","update_time":"$D2025-11-15T05:20:16.008Z","view_time":null,"first_public_time":"$D2025-11-14T20:46:32.049Z","fork":{"id":"2600cd001a3743d4","slug":null,"title":"Hex Color Booster","owner":{"id":"3301827868803b5f","login":"eeeps","name":"Eric Portis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024"},"version":252,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null}],"members":[{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024","role":"editor"},{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Golden ratio hue rotation","cells":[{"id":0,"value":"# Golden ratio hue rotation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"viewof color = Inputs.color({label: \"Root color\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof steps = Inputs.range([1, 100], {label: \"Number of colors\", step: 1, value: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Color = (await import('https://colorjs.io/dist/color.js')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"inputColorObj = new Color(color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"inputHue = inputColorObj.oklch.h;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"