{"id":1344,"date":"2026-08-22T04:17:31","date_gmt":"2026-08-22T04:17:31","guid":{"rendered":"https:\/\/burstingrainbow.com\/index.php\/experiment\/color-recipe-machine\/"},"modified":"2026-08-22T04:17:31","modified_gmt":"2026-08-22T04:17:31","slug":"color-recipe-machine","status":"publish","type":"experiment","link":"https:\/\/burstingrainbow.com\/index.php\/experiment\/color-recipe-machine\/","title":{"rendered":"Color Recipe Machine"},"content":{"rendered":"<p>This is a small working code experiment for the Code shelf.<\/p>\n<p>Type any phrase into the machine below. It hashes the words into five colors, writes a tiny CSS recipe, and can play a short tone made from those same colors. No external library, no theme file, just a WordPress shortcode doing a little mischief inside the Experiment model.<\/p>\n    <div id=\"brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8\" class=\"brcrm\" data-brcrm>\n      <div class=\"brcrm__panel\">\n        <div class=\"brcrm__topline\">working code toy<\/div>\n        <h3>Color Recipe Machine<\/h3>\n        <p>Type a phrase. The machine hashes it into a tiny Bursting Rainbow palette, a reusable CSS gradient, and one small browser-made tone.<\/p>\n        <div class=\"brcrm__controls\">\n          <input class=\"brcrm__input\" type=\"text\" value=\"odd little website\" aria-label=\"Palette phrase\" \/>\n          <button class=\"brcrm__button\" type=\"button\" data-action=\"cook\">Cook<\/button>\n          <button class=\"brcrm__button brcrm__button--ghost\" type=\"button\" data-action=\"play\">Play<\/button>\n        <\/div>\n        <div class=\"brcrm__swatches\" aria-live=\"polite\"><\/div>\n        <pre class=\"brcrm__code\"><code><\/code><\/pre>\n      <\/div>\n    <\/div>\n    <style>\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8{--br-bg:#f2efe8;--br-paper:#faf7f0;--br-ink:#0d0d0d;--br-body:#2a2925;--br-muted:#5a5751;--br-hair:#dcd7ca;--br-accent:#ff5a1f;--br-violet:#3a2a95;margin:28px 0 10px;font-family:Inter,system-ui,sans-serif;color:var(--br-ink)}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__panel{background:var(--br-paper);border:1px solid var(--br-hair);border-radius:14px;padding:28px;box-shadow:0 18px 44px -32px rgba(0,0,0,.3);position:relative;overflow:hidden}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__panel:before{content:\"\";position:absolute;inset:auto -8% -34px -8%;height:76px;background:linear-gradient(90deg,#ff5a1f,#ffcf3a,#2fb3a4,#4a7dff,#5a3aa8,#ff6aa8);opacity:.24;filter:blur(18px)}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__topline{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--br-accent);margin-bottom:10px}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 h3{font-family:Fraunces,Georgia,serif;font-size:clamp(34px,4vw,58px);line-height:1.02;letter-spacing:-.025em;margin:0 0 12px;color:var(--br-ink)}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 p{max-width:680px;margin:0 0 22px;color:var(--br-body);font-size:15px;line-height:1.6}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 20px}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__input{flex:1 1 260px;min-width:0;border:1px solid var(--br-hair);background:#fff;border-radius:999px;padding:13px 16px;font:600 14px\/1 Inter,system-ui,sans-serif;color:var(--br-ink);outline:none}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__input:focus{border-color:var(--br-accent);box-shadow:0 0 0 3px rgba(255,90,31,.16)}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__button{border:1px solid var(--br-ink);background:var(--br-ink);color:#fff;border-radius:999px;padding:13px 18px;font:700 12px\/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__button:hover{transform:translateY(-1px)}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__button--ghost{background:transparent;color:var(--br-ink)}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__button--ghost:hover{background:var(--br-ink);color:#fff}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 18px}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__swatch{min-height:112px;border-radius:14px;border:1px solid rgba(13,13,13,.14);display:flex;align-items:flex-end;padding:10px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45);font:700 11px\/1.2 JetBrains Mono,ui-monospace,monospace;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}\n      #brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__code{margin:0;background:#0d0d0d;color:#f2efe8;border-radius:14px;padding:16px;white-space:pre-wrap;overflow:auto;font:12px\/1.55 JetBrains Mono,ui-monospace,monospace;position:relative;z-index:1}\n      @media(max-width:680px){#brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__panel{padding:22px}#brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__swatches{grid-template-columns:1fr 1fr}#brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8 .brcrm__swatch{min-height:92px}}\n    <\/style>\n    <script>\n      (function(){\n        const root = document.getElementById(\"brcrm-8fe63b1e-34b8-4dec-a5ec-a77e11fe73a8\");\n        if (!root) return;\n        const input = root.querySelector('.brcrm__input');\n        const swatches = root.querySelector('.brcrm__swatches');\n        const code = root.querySelector('.brcrm__code code');\n        const base = ['#ff5a1f','#ffcf3a','#2fb3a4','#4a7dff','#5a3aa8','#ff6aa8','#ffb42a'];\n        function hash(str){let h=2166136261; for(let i=0;i<str.length;i++){h^=str.charCodeAt(i); h=Math.imul(h,16777619);} return h>>>0;}\n        function clamp(v,min,max){return Math.max(min,Math.min(max,v));}\n        function hexToRgb(hex){const n=parseInt(hex.slice(1),16); return [n>>16&255,n>>8&255,n&255];}\n        function rgbToHex(r,g,b){return '#' + [r,g,b].map(v=>clamp(Math.round(v),0,255).toString(16).padStart(2,'0')).join('');}\n        function mix(a,b,t){const A=hexToRgb(a),B=hexToRgb(b); return rgbToHex(A[0]+(B[0]-A[0])*t,A[1]+(B[1]-A[1])*t,A[2]+(B[2]-A[2])*t);}\n        function palette(seed){const h=hash(seed || 'rainbow'); const out=[]; for(let i=0;i<5;i++){const a=base[(h+i*2)%base.length]; const b=base[((h>>>((i+1)*3))+i)%base.length]; out.push(mix(a,b,.18+(((h>>>(i*4))&7)\/14)));} return out;}\n        function render(){const phrase=input.value.trim() || 'odd little website'; const colors=palette(phrase); swatches.innerHTML=''; colors.forEach(c=>{const s=document.createElement('div'); s.className='brcrm__swatch'; s.style.background=c; s.textContent=c; swatches.appendChild(s);}); code.textContent=':root {\\n  --recipe-name: \"' + phrase.replace(\/\"\/g,'') + '\";\\n  --recipe-gradient: linear-gradient(92deg, ' + colors.join(', ') + ');\\n}\\n\\n.experiment-card {\\n  background: var(--recipe-gradient);\\n}'; return colors;}\n        function play(){const colors=render(); const Ctx=window.AudioContext||window.webkitAudioContext; if(!Ctx) return; const ctx=new Ctx(); colors.forEach((c,i)=>{const rgb=hexToRgb(c); const osc=ctx.createOscillator(); const gain=ctx.createGain(); osc.type=i%2?'triangle':'sine'; osc.frequency.value=180 + (rgb[0]+rgb[1]+rgb[2]) \/ 3 + i*42; gain.gain.setValueAtTime(0.0001,ctx.currentTime+i*.08); gain.gain.exponentialRampToValueAtTime(.08,ctx.currentTime+i*.08+.03); gain.gain.exponentialRampToValueAtTime(.0001,ctx.currentTime+i*.08+.28); osc.connect(gain).connect(ctx.destination); osc.start(ctx.currentTime+i*.08); osc.stop(ctx.currentTime+i*.08+.34);});}\n        root.addEventListener('click', e=>{const action=e.target && e.target.dataset ? e.target.dataset.action : ''; if(action==='cook') render(); if(action==='play') play();});\n        input.addEventListener('input', render);\n        render();\n      })();\n    <\/script>\n    \n<p>The useful part is not the palette itself. It is the pipeline: a Code experiment can live here as a real, clickable, usable thing and still enter the Wall like every other post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A tiny working code toy that turns a phrase into a palette, a CSS gradient, and a little browser-made tone.<\/p>\n","protected":false},"featured_media":1343,"template":"","experiment_tool":[31,32,33],"experiment_type":[26,27,29,24],"class_list":["post-1344","experiment","type-experiment","status-publish","has-post-thumbnail","hentry","experiment_tool-codex","experiment_tool-novamira","experiment_tool-wordpress","experiment_type-code","experiment_type-design","experiment_type-oddity","experiment_type-web"],"acpt":{"meta":[{"meta_box":"details","meta_fields":[{"name":"short_description","type":"Text","options":[],"value":"A tiny working code toy that turns a phrase into a palette, a CSS gradient, and a little browser-made tone.","default":"","required":false,"showInAdmin":false,"advancedOptions":[]},{"name":"external_url","type":"Url","options":[],"value":null,"default":"","required":false,"showInAdmin":false,"advancedOptions":[]},{"name":"featured_experiment","type":"Toggle","options":[],"value":"1","default":"","required":false,"showInAdmin":false,"advancedOptions":[]},{"name":"display_style","type":"Select","options":[{"label":"Standard","value":"standard"},{"label":"Wide","value":"wide"},{"label":"Tall","value":"tall"},{"label":"Featured","value":"featured"}],"value":"standard","default":"standard","required":false,"showInAdmin":false,"advancedOptions":[]}]}]},"_links":{"self":[{"href":"https:\/\/burstingrainbow.com\/index.php\/wp-json\/wp\/v2\/experiment\/1344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/burstingrainbow.com\/index.php\/wp-json\/wp\/v2\/experiment"}],"about":[{"href":"https:\/\/burstingrainbow.com\/index.php\/wp-json\/wp\/v2\/types\/experiment"}],"version-history":[{"count":0,"href":"https:\/\/burstingrainbow.com\/index.php\/wp-json\/wp\/v2\/experiment\/1344\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/burstingrainbow.com\/index.php\/wp-json\/wp\/v2\/media\/1343"}],"wp:attachment":[{"href":"https:\/\/burstingrainbow.com\/index.php\/wp-json\/wp\/v2\/media?parent=1344"}],"wp:term":[{"taxonomy":"experiment_tool","embeddable":true,"href":"https:\/\/burstingrainbow.com\/index.php\/wp-json\/wp\/v2\/experiment_tool?post=1344"},{"taxonomy":"experiment_type","embeddable":true,"href":"https:\/\/burstingrainbow.com\/index.php\/wp-json\/wp\/v2\/experiment_type?post=1344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}