25:["$","title",null,{"children":"Take It to the Limit(s) | Eric Portis | Observable"}] 4b:[] 47:{"id":"2471c999f47f99c8","slug":"take-it-to-the-limits","title":"Take It to the Limit(s)","thumbnail":"ffd3a2dc1441267a44d5cf2d76177fdb574e0b6f30fb27d5e6106abc98e8d4b8","access_level":"public","create_time":"$D2026-10-21T15:52:03.147Z","update_time":"$D2026-10-21T17:00:33.248Z","view_time":null,"first_public_time":"$D2026-10-21T16:47:49.812Z","has_unpublished_edits":null,"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","bio":"Looking for work!","following":false},"version":264,"publish_version":264,"role":null,"authored":false,"authors":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null,"bio":"Looking for work!","following":false}],"members":[{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Take It to the Limit(s)","cells":[{"id":0,"value":"# Take It to the Limit(s)\n## 🎶 So put me on a highway, and show me a sign 🎵\n\nTake an input color, convert it to OkLCH, boost the chroma component until we reach the limit of the sRGB, P3, and Rec.2020 gamuts, and return the resulting colors.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"viewof color = Inputs.color({label: \"Input color\", value: \"#50ff50\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"

Taken to the limit of sRGB, P3, and Rec.2020

\n ${ outputSwatch( boostedColorObjects[0], Color.spaces.srgb, { format: 'hex' }) }\n ${ outputSwatch( boostedColorObjects[1], Color.spaces.p3, { precision: 3 }) }\n ${ outputSwatch( boostedColorObjects[2], Color.spaces.rec2020, { precision: 3 }) }\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"inputColorObj = new Color(color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"boostedColorObjects = ['srgb', 'p3', 'rec2020'].map( gamut => {\n\n const cStep = 0.001;\n\n let trialColor = inputColorObj,\n currentColor;\n\n while ( trialColor.inGamut(gamut) === true && trialColor.oklch.c < 1 ) {\n currentColor = trialColor;\n trialColor = new Color('oklch', [\n currentColor.oklch.l,\n currentColor.oklch.c + cStep,\n currentColor.oklch.h\n ] );\n }\n\n return currentColor.to(gamut);\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null