Create a new version of paste:

 <!DOCTYPE html>
  <html style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'>
   <head>
    <title>Neopixel control</title>
    <meta name='mobile-web-app-capable' content='yes' />
    <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes' />
   </head>
   <body style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; font-family: "Courier New", Courier, monospace; font-weight: bold;'>
    <script type='text/javascript'>
     function toggleDetails() {
      var elem = document.getElementById('my_details');
      if (elem.open == true) {
       elem.open = false;
      }
      else {
       elem.open = true;
      }
     }
         var stripLocked = false;
         function updateStrip(val_r, val_g, val_b, val_m, val_s) {
          if (stripLocked) {
           return;
          }
          function colourCorrect(v) {
           return Math.round(1023 - ((v * v)/64));
          }
          var params = [
           'r=' + colourCorrect(val_r),
           'g=' + colourCorrect(val_g),
           'b=' + colourCorrect(val_b),
           'm=' + val_m,
           's=' + val_s
           ].join('&');
          var req = new XMLHttpRequest();
          req.open('POST', '?' + params, true);
          req.send();
          stripLocked = true;
          req.onreadystatechange = function() {
           if (req.readyState == 4) {
            stripLocked = false;
           }
          }
         }
     function updateSummaryColor() {
      var val_r = document.getElementById('range_r').value;
      my_r      =        (parseInt(val_r, 10 )).toString(16).padStart(2, '0');
      my_r_inv  = (255 - (parseInt(val_r, 10))).toString(16).padStart(2, '0');
      var val_g = document.getElementById('range_g').value;
      my_g      =        (parseInt(val_g, 10 )).toString(16).padStart(2, '0');
      my_g_inv  = (255 - (parseInt(val_g, 10))).toString(16).padStart(2, '0');
      var val_b = document.getElementById('range_b').value;
      my_b      =        (parseInt(val_b, 10 )).toString(16).padStart(2, '0');
      my_b_inv  = (255 - (parseInt(val_b, 10))).toString(16).padStart(2, '0');
      document.getElementById('text_r').value = my_r;
      document.getElementById('text_g').value = my_g;
      document.getElementById('text_b').value = my_b;
      document.getElementById('text_a').value = my_r + my_g + my_b;
      var my_details = document.getElementById('my_details');
      my_details.style.background = '#' + my_r     + my_g     + my_b;
      my_details.style.color      = '#' + my_r_inv + my_g_inv + my_b_inv;
      var val_m = document.getElementById('range_m').value;
      my_m      =        (parseInt(val_m, 10 )).toString(10).padStart(2, '0');
      document.getElementById('text_m').value = my_m;
      var val_s = document.getElementById('range_s').value;
      my_s      =        (parseInt(val_s, 10 )).toString(10).padStart(1, '0');
      document.getElementById('text_s').value = my_s;
      updateStrip(parseInt(val_r, 10), parseInt(val_g, 10), parseInt(val_b, 10), parseInt(val_m, 10), parseInt(val_s, 10));
     }
     function changedText(range_id, text_id, my_base) {
      document.getElementById(range_id).value = parseInt(document.getElementById(text_id).value, my_base);
      updateSummaryColor();
     }
     function changedText_a() {
      var text_a = document.getElementById('text_a');
      document.getElementById('range_r').value = parseInt(text_a.value.substring(0, 2), 16);
      document.getElementById('range_g').value = parseInt(text_a.value.substring(2, 4), 16);
      document.getElementById('range_b').value = parseInt(text_a.value.substring(4, 6), 16);
      updateSummaryColor();
     }
     function setMode(val_m) {
      document.getElementById('range_m').value = val_m;
      updateSummaryColor();
     }
     // window.onload = updateSummaryColor;
    </script>
    <div style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; display: grid; grid-template-columns: 100%; row-gap: 2%; column-gap: 1%;'>
     <div style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; display: grid; grid-template-columns: 7% 74% 17%; row-gap: 2%; column-gap: 1%;'>
      <text id='rgb' name='rgb' style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #000000;'>RGB</text>
      <button id='my_toggler' onclick='toggleDetails()' style='width: 100%; margin: 0%; font-family: inherit; font-weight: inherit;'>
       <details id='my_details' onclick='toggleDetails()' style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; font-family: inherit; font-weight: inherit; background: #ffffff; color: #000000;'>
        <summary id='my_summary'>Palette</summary>
        <iframe style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;' srcdoc="
         <body style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'>
          <canvas id='colorspace' style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center;'></canvas>
         </body>
         <script type='text/javascript'>
          (function () {
           var canvas = document.getElementById('colorspace');
           var ctx = canvas.getContext('2d');
           function drawCanvas() {
            var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0);
            for (var i = 0; i <= 360; i += 10) {
             colours.addColorStop((i/360), 'hsl(' + i + ', 100%, 50%)');
            }
            ctx.fillStyle = colours;
            ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
            var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
            luminance.addColorStop(0,    '#ffffff');
            luminance.addColorStop(0.05, '#ffffff');
            luminance.addColorStop(0.5,  'rgba(0,0,0,0)');
            luminance.addColorStop(0.95, '#000000');
            luminance.addColorStop(1,    '#000000');
            ctx.fillStyle = luminance;
            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
           }
           var eventLocked = false;
           function handleEvent(clientX, clientY) {
            if (eventLocked) {
             return;
            }
            function colourCorrect(v) {
             return Math.round(1023 - ((v * v)/64));
            }
            var data = ctx.getImageData(clientX, clientY, 1, 1).data;
            my_r     =        (parseInt(data[0], 10 )).toString(16).padStart(2, '0');
            my_r_inv = (255 - (parseInt(data[0], 10))).toString(16).padStart(2, '0');
            my_g     =        (parseInt(data[1], 10 )).toString(16).padStart(2, '0');
            my_g_inv = (255 - (parseInt(data[1], 10))).toString(16).padStart(2, '0');
            my_b     =        (parseInt(data[2], 10 )).toString(16).padStart(2, '0');
            my_b_inv = (255 - (parseInt(data[2], 10))).toString(16).padStart(2, '0');
            function drawCoordinates(x,y) {
             var ctx = document.getElementById('colorspace').getContext('2d');
             var pointSize = 3;
             ctx.fillStyle = '#' + my_r_inv + my_g_inv + my_b_inv;
             ctx.beginPath();
             ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
             ctx.fill();
            }
            drawCanvas();
            drawCoordinates(clientX, clientY);
            var my_details = parent.document.getElementById('my_details');
            my_details.style.background = '#' + my_r     + my_g     + my_b;
            my_details.style.color      = '#' + my_r_inv + my_g_inv + my_b_inv;
            function updateSliders(val_r, val_g, val_b) {
             parent.document.getElementById('range_r').value = val_r;
             parent.document.getElementById('range_g').value = val_g;
             parent.document.getElementById('range_b').value = val_b;
             parent.document.getElementById('text_r').value = (parseInt(val_r, 10 )).toString(16).padStart(2, '0');
             parent.document.getElementById('text_g').value = (parseInt(val_g, 10 )).toString(16).padStart(2, '0');
             parent.document.getElementById('text_b').value = (parseInt(val_b, 10 )).toString(16).padStart(2, '0');
             parent.document.getElementById('text_a').value = parent.document.getElementById('text_r').value +
                                                              parent.document.getElementById('text_g').value +
                                                              parent.document.getElementById('text_b').value;
            }
            updateSliders(parseInt(data[0], 10), parseInt(data[1], 10), parseInt(data[2], 10));
            var params = [
             'r=' + colourCorrect(data[0]),
             'g=' + colourCorrect(data[1]),
             'b=' + colourCorrect(data[2]),
             'm=' + parseInt(parent.document.getElementById('range_m').value, 10),
             's=' + parseInt(parent.document.getElementById('range_s').value, 10)
             ].join('&');
            var req = new XMLHttpRequest();
            req.open('POST', '?' + params, true);
            req.send();
            eventLocked = true;
            req.onreadystatechange = function() {
             if (req.readyState == 4) {
              eventLocked = false;
             }
            }
           }
           canvas.addEventListener('click', function(event) {
            var rect = canvas.getBoundingClientRect();
            var my_x = event.clientX - rect.left;
            var my_y = event.clientY - rect.top;
            handleEvent(my_x, my_y);
            }, false);
           canvas.addEventListener('touchmove', function(event) {
            var rect = canvas.getBoundingClientRect();
            var my_x = event.touches[0].clientX - rect.left;
            var my_y = event.touches[0].clientY - rect.top;
            handleEvent(my_x, my_y);
            }, false);
           function resizeCanvas() {
            var rect = canvas.getBoundingClientRect();
            canvas.width  = window.innerWidth - rect.left;
            canvas.height = window.innerHeight - rect.top - 4;
            drawCanvas();
           }
           window.addEventListener('resize', resizeCanvas, false);
           resizeCanvas();
           document.ontouchmove = function(e) { e.preventDefault() };
          })();
         </script>
         ">
        </iframe>
       </details>
      </button>
      <input type='text'  id='text_a'  name='text_a' size='6' maxlength='6' value='ffffff' onchange='changedText_a();'                      style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
      <text id='r__'    name='r__'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #ff0000;'>RED</text>
      <input type='range' id='range_r' name='range_r' min='0' max='255'     value='255'    onchange='updateSummaryColor();'                 style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
      <input type='text'  id='text_r'  name='text_r' size='2' maxlength='2' value='ff'     onchange='changedText("range_r", "text_r", 16);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
      <text id='_g_'    name='_g_'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #00ff00;'>GRE</text>
      <input type='range' id='range_g' name='range_g' min='0' max='255'     value='255'    onchange='updateSummaryColor();'                 style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
      <input type='text'  id='text_g'  name='text_g' size='2' maxlength='2' value='ff'     onchange='changedText("range_g", "text_g", 16);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
      <text id='__b'    name='__b'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #0000ff;'>BLU</text>
      <input type='range' id='range_b' name='range_b' min='0' max='255'     value='255'    onchange='updateSummaryColor();'                 style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
      <input type='text'  id='text_b'  name='text_b' size='2' maxlength='2' value='ff'     onchange='changedText("range_b", "text_b", 16);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
      <text id='mod'    name='mod'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #000000;'>MOD</text>
      <input type='range' id='range_m' name='range_m' min='0' max='55'      value='0'      onchange='updateSummaryColor();'                 style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
      <input type='text'  id='text_m'  name='text_m' size='2' maxlength='2' value='00'     onchange='changedText("range_m", "text_m", 10);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
      <text id='spd'    name='spd'    style='height: 100%; width: 100%; margin: 0%; text-align: right; font-family: inherit; font-weight: inherit; background: #ffffff; color: #000000;'>SPD</text>
      <input type='range' id='range_s' name='range_s' min='0' max='9'       value='4'      onchange='updateSummaryColor();'                 style='height: 100%; margin: 0%; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto;'>
      <input type='text'  id='text_s'  name='text_s' size='2' maxlength='1' value='4'      onchange='changedText("range_s", "text_s", 10);' style='height:  75%; margin: 0%; text-align: center; font-family: inherit; font-weight: inherit;'>
      <div></div>
      <div>
       <button id='effect_00' onclick='setMode(00)' style='height: 100%; width: 100%; margin: 0%; font-family: inherit; font-weight: inherit;'>00. STATIC</button>
      </div>
      <div></div>
      <div></div>
      <div><pre></pre></div>
      <div></div>
     </div>
     <div style='height: 100%; width: 100%; margin: 0%; align-items: center; justify-content: center; display: flex; flex-grow: 1; flex-shrink: 1; flex-basis: auto; flex-direction: column; overflow-y: scroll;'>
      <div style='height: 100%; width: 100%; margin: 0%; justify-content: center; display: grid; grid-template-columns: 19% 19% 19% 19% 19%; row-gap: 1%; column-gap: 1%;'>
       <button id='effect_01' onclick='setMode(01)' style='font-family: inherit; font-weight: inherit;'>01. Blink</button>
       <button id='effect_02' onclick='setMode(02)' style='font-family: inherit; font-weight: inherit;'>02. Breath</button>
       <button id='effect_03' onclick='setMode(03)' style='font-family: inherit; font-weight: inherit;'>03. Color Wipe</button>
       <button id='effect_04' onclick='setMode(04)' style='font-family: inherit; font-weight: inherit;'>04. Color Wipe Inverse</button>
       <button id='effect_05' onclick='setMode(05)' style='font-family: inherit; font-weight: inherit;'>05. Color Wipe Reverse</button>
       <button id='effect_06' onclick='setMode(06)' style='font-family: inherit; font-weight: inherit;'>06. Color Wipe IRverse</button>
       <button id='effect_07' onclick='setMode(07)' style='font-family: inherit; font-weight: inherit;'>07. Color Wipe Random</button>
       <button id='effect_08' onclick='setMode(08)' style='font-family: inherit; font-weight: inherit;'>08. Random Color</button>
       <button id='effect_09' onclick='setMode(09)' style='font-family: inherit; font-weight: inherit;'>09. Single Dynamic</button>
       <button id='effect_10' onclick='setMode(10)' style='font-family: inherit; font-weight: inherit;'>10. Multi Dynamic</button>
       <button id='effect_11' onclick='setMode(11)' style='font-family: inherit; font-weight: inherit;'>11. Rainbow</button>
       <button id='effect_12' onclick='setMode(12)' style='font-family: inherit; font-weight: inherit;'>12. Rainbow Cycle</button>
       <button id='effect_13' onclick='setMode(13)' style='font-family: inherit; font-weight: inherit;'>13. Scan</button>
       <button id='effect_14' onclick='setMode(14)' style='font-family: inherit; font-weight: inherit;'>14. Dual Scan</button>
       <button id='effect_15' onclick='setMode(15)' style='font-family: inherit; font-weight: inherit;'>15. Fade</button>
       <button id='effect_16' onclick='setMode(16)' style='font-family: inherit; font-weight: inherit;'>16. Theater Chase</button>
       <button id='effect_17' onclick='setMode(17)' style='font-family: inherit; font-weight: inherit;'>17. Theater Chase Rainbow</button>
       <button id='effect_18' onclick='setMode(18)' style='font-family: inherit; font-weight: inherit;'>18. Running Lights</button>
       <button id='effect_19' onclick='setMode(19)' style='font-family: inherit; font-weight: inherit;'>19. Twinkle</button>
       <button id='effect_20' onclick='setMode(20)' style='font-family: inherit; font-weight: inherit;'>20. Twinkle Random</button>
       <button id='effect_21' onclick='setMode(21)' style='font-family: inherit; font-weight: inherit;'>21. Twinkle Fade</button>
       <button id='effect_22' onclick='setMode(22)' style='font-family: inherit; font-weight: inherit;'>22. Twinkle Fade Random</button>
       <button id='effect_23' onclick='setMode(23)' style='font-family: inherit; font-weight: inherit;'>23. Sparkle</button>
       <button id='effect_24' onclick='setMode(24)' style='font-family: inherit; font-weight: inherit;'>24. Flash Sparkle</button>
       <button id='effect_25' onclick='setMode(25)' style='font-family: inherit; font-weight: inherit;'>25. Hyper Sparkle</button>
       <button id='effect_26' onclick='setMode(26)' style='font-family: inherit; font-weight: inherit;'>26. Strobe</button>
       <button id='effect_27' onclick='setMode(27)' style='font-family: inherit; font-weight: inherit;'>27. Strobe Rainbow</button>
       <button id='effect_28' onclick='setMode(28)' style='font-family: inherit; font-weight: inherit;'>28. Multi Strobe</button>
       <button id='effect_29' onclick='setMode(29)' style='font-family: inherit; font-weight: inherit;'>29. Blink Rainbow</button>
       <button id='effect_30' onclick='setMode(30)' style='font-family: inherit; font-weight: inherit;'>30. Chase White</button>
       <button id='effect_31' onclick='setMode(31)' style='font-family: inherit; font-weight: inherit;'>31. Chase Color</button>
       <button id='effect_32' onclick='setMode(32)' style='font-family: inherit; font-weight: inherit;'>32. Chase Random</button>
       <button id='effect_33' onclick='setMode(33)' style='font-family: inherit; font-weight: inherit;'>33. Chase Rainbow</button>
       <button id='effect_34' onclick='setMode(34)' style='font-family: inherit; font-weight: inherit;'>34. Chase Flash</button>
       <button id='effect_35' onclick='setMode(35)' style='font-family: inherit; font-weight: inherit;'>35. Chase Flash Random</button>
       <button id='effect_36' onclick='setMode(36)' style='font-family: inherit; font-weight: inherit;'>36. Chase Rainbow White</button>
       <button id='effect_37' onclick='setMode(37)' style='font-family: inherit; font-weight: inherit;'>37. Chase Blackout</button>
       <button id='effect_38' onclick='setMode(38)' style='font-family: inherit; font-weight: inherit;'>38. Chase Blackout Rainbow</button>
       <button id='effect_39' onclick='setMode(39)' style='font-family: inherit; font-weight: inherit;'>39. Color Sweep Random</button>
       <button id='effect_40' onclick='setMode(40)' style='font-family: inherit; font-weight: inherit;'>40. Running Color</button>
       <button id='effect_41' onclick='setMode(41)' style='font-family: inherit; font-weight: inherit;'>41. Running Red Blue</button>
       <button id='effect_42' onclick='setMode(42)' style='font-family: inherit; font-weight: inherit;'>42. Running Random</button>
       <button id='effect_43' onclick='setMode(43)' style='font-family: inherit; font-weight: inherit;'>43. Larson Scanner</button>
       <button id='effect_44' onclick='setMode(44)' style='font-family: inherit; font-weight: inherit;'>44. Comet</button>
       <button id='effect_45' onclick='setMode(45)' style='font-family: inherit; font-weight: inherit;'>45. Fireworks</button>
       <button id='effect_46' onclick='setMode(46)' style='font-family: inherit; font-weight: inherit;'>46. Fireworks Random</button>
       <button id='effect_47' onclick='setMode(47)' style='font-family: inherit; font-weight: inherit;'>47. Merry Christmas</button>
       <button id='effect_48' onclick='setMode(48)' style='font-family: inherit; font-weight: inherit;'>48. Fire Flicker</button>
       <button id='effect_49' onclick='setMode(49)' style='font-family: inherit; font-weight: inherit;'>49. Fire Flicker Soft</button>
       <button id='effect_50' onclick='setMode(50)' style='font-family: inherit; font-weight: inherit;'>50. Fire Flicker Intense</button>
       <button id='effect_51' onclick='setMode(51)' style='font-family: inherit; font-weight: inherit;'>51. Circus Combustus</button>
       <button id='effect_52' onclick='setMode(52)' style='font-family: inherit; font-weight: inherit;'>52. Halloween</button>
       <button id='effect_53' onclick='setMode(53)' style='font-family: inherit; font-weight: inherit;'>53. 2-color Chase</button>
       <button id='effect_54' onclick='setMode(54)' style='font-family: inherit; font-weight: inherit;'>54. 3-color Chase</button>
       <button id='effect_55' onclick='setMode(55)' style='font-family: inherit; font-weight: inherit;'>55. Twinkle Fox</button>
      </div>
     </div>
    </div>
   </body>
  </html>