2b:null 2c:["$","title",null,{"children":"Hex Color Booster | Eric Portis | Observable"}] 31:[] 2f:{"id":"2600cd001a3743d4","slug":null,"title":"Hex Color Booster","thumbnail":"7ea0885357a32bfc402bf6847d789a3277e79823bc99181bce965789c376b819","access_level":"public","create_time":"$D2025-11-14T20:05:27.092Z","update_time":"$D2025-11-14T20:05:27.092Z","view_time":null,"first_public_time":"$D2025-11-14T20:05:27.092Z","has_unpublished_edits":null,"fork":{"id":"c09ce2e69591f709","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":"Web Platform Advocate at @CloudinaryLtd "},"version":172,"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,"bio":"Web Platform Advocate at @CloudinaryLtd "}],"members":[{"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hex Color Booster","cells":[{"id":0,"value":"# Hex Color Booster\n## Make yer eyes smile","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"viewof color = Inputs.color({label: \"Hex color\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof boost = Inputs.range([0, 10], {label: \"Boost\", step: 0.1, value: 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"

${boostedString}

\n ${ outputSwatch( boostedColorObj, Color.spaces.srgb, { format: 'hex' }) }\n ${ outputSwatch( boostedColorObj, Color.spaces.p3, { precision: 7 }) }\n ${ outputSwatch( boostedColorObj, Color.spaces.rec2020, { precision: 7 }) }\n ${ outputSwatch( boostedColorObj, Color.spaces.oklch, { precision: 7 }) }\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"boostedColorObj = new Color('oklch', [\n inputColorObj.oklch.l,\n inputColorObj.oklch.c + boost/100,\n inputColorObj.oklch.h\n] )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"boostedString = {\n if ( boost == 0 ) return 'Converted';\n const bs = \"B\".repeat( Math.ceil(boost) );\n const os = \"O\".repeat( 1 + Math.ceil(boost / 3) );\n return `${bs}${os}STED`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"