ARDUINO - Color code retrive from HTML site

Dear All,

I'm working on arduino over last year with small and bigger luck.

Lastly, I've started to prearing final deployment of Arduino Uno WiFi Rev.2 as a furniture LED controller.

Excluding everything, I've faced a problem with a code - and Yes - i've looked into google, i've looked into forum, there was a topic regarding this, however, something in my brain is not allowing me to implement missing part of code into my project.


  1. HTML 5 Color picker to provide hex code for color
  2. JS event Listener to retrieve hax code

PROBLEM: How to retrieve color value from Color Picker and set it as variable in Arduino Code?

  WiFiClient ArWebClient = ArWebServer.available(); // CLIENT initialization & SERVER listening for incoming clients
  if (ArWebClient) { Serial.println("[S01][INFO]:SERVER established new connection"); // SERVER connections status display #1
    while (ArWebClient.connected()) 
      { if (ArWebClient.available()) 
        { c =; Serial.write(c); if (c == '\n') 
            { if (currentLine.length() == 0)
            // Web Site Build Code (HTML)
              { ArWebClient.println("HTTP/1.1 200 OK"); ArWebClient.println("Content-type:text/html"); ArWebClient.println();
                ArWebClient.println("<!DOCTYPE HTML>"); // <html> <head> ");
                ArWebClient.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> "); //</head> <body>"); // WEB compatiblity for Mobile Devices Usage
                ArWebClient.println("Click <a href=\"/H\"> here  </a> to turn built LED ON <br>");
                ArWebClient.println("Click <a href=\"/L\"> here  </a> to turn built LED OFF <br>"); 
                ArWebClient.println("Click <a href=\"/0\"> here  </a> to turn LED strip OFF <br>"); 
                ArWebClient.println("<input type=\"color\" id=\"colorPicker\" /> <input type=\"hidden\" name=\"clbln\" id=\"clbl\"> x0000 </lable> <a href=\"\" id=\"acolor\" /><br> ");
                 ArWebClient.println("<script type=\"text/javascript\" language=\"javascript\">  let color=document.getElementById(\'colorPicker\'); color.addEventListener(\'input\', function(e) {alert(this.value); clbl.innerHTML = this.value; document.location.href=this.value;}) ; </script>");
                  Serial.println(ArWebClient.println("<script type=\"text/javascript\" language=\"javascript\"> let color=document.getElementById(\'colorPicker\'); color.addEventListener(\'input\', function(e) {alert(this.value); clbl.innerHTML = this.value; document.location.href=this.value; document.getElementById(\'clbln\').value=this.value;}) ; </script>"));
                ArWebClient.println("Submit color: <button class=\"favorite styled\" type=\"button\" name=\"test\"> Test </button> <br>" ); //break;
                ArWebClient.println("</body> </html>"); break;
              } else { currentLine=""; }
            } else if (c !='\r') { currentLine += c; }
              if (currentLine.endsWith("GET /0")) { opt=0; }
              if (currentLine.endsWith("GET /H")) { digitalWrite(LED_BUILTIN,HIGH); opt=1;}
              if (currentLine.endsWith("GET /L")) { digitalWrite(LED_BUILTIN,LOW); opt=2; }

When you use the colour picker, what do you see in serial monitor? Please post it in your reply between code tags.

Here it is

2:01:58.061 -> [S01][INFO]:SERVER established new connection
22:01:58.107 -> GET /favicon.ico HTTP/1.1
22:01:58.152 -> Host:
22:01:58.194 -> Connection: keep-alive
22:01:58.194 -> User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
22:01:58.329 -> Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
22:01:58.423 -> Referer:
22:01:58.469 -> Accept-Encoding: gzip, deflate
22:01:58.469 -> Accept-Language: pl-PL,pl;q=0.9,en-US;q=0.8,en;q=0.7
22:01:58.564 -> 
22:01:58.564 -> 298

Perhaps that "298" at the end is the selected colour. Does that number change if you select different colours? If so, try bright red, green, blue, white, black to see what numbers you get.