Build a Web Server with an ESP8266 to Control an RGB LED

To remotely control an RGB LED, you will build a web server using an ESP8266 in this project. ESP8266 RGB Colour Picker is the name of this project.

Let’s get started!

Parts Required

You will need the following items to proceed with this project:

You can use the preceding links to find all the parts for your projects at the best price!

Flashing Your ESP with NodeMCU

In this article, we are going to use the NodeMCU firmware. You have to flash your ESP using the NodeMCU firmware.

Downloading ESPlorer IDE

I recommend using the ESPlorer IDE, a program created by 4refr0nt, to send commands to your ESP8266.

Follow these instructions to download and install ESPlorer IDE:

  1. Click here to download ESPlorer
  2. Unzip that folder
  3. Go to the main folder
  4. Run “ESPlorer.jar” file
  5. Open the ESPlorer IDE
esplorer start - ESP8266 to Control an RGB LED

Uploading Code

You should see a window similar to the one shown in the preceding illustration. To upload a Lua file, follow these instructions:

  1. Connect your ESP8266-12E, which has a built-in programmer, to your computer.
  2. Select your ESP8266-12E port.
  3. Press Open/Close.
  4. Select NodeMCU+MicroPtyhon tab.
  5. Create a new file called init.lua.
  6. Press Save to ESP.

Everything you need to worry about or change is highlighted in Red Box.

esplorer tab - ESP8266 to Control an RGB LED


Using the preceding program, upload the following code to your ESP8266: You should have a file named “init.lua” in your project.

Note: Don’t forget to add your network name (SSID) and password to the script below.

-- LEDEdit PRO
-- Complete project details at



function led(r, g, b)
    pwm.setduty(1, r)
    pwm.setduty(2, g)
    pwm.setduty(3, b)
pwm.setup(1, 1000, 1023)
pwm.setup(2, 1000, 1023)
pwm.setup(3, 1000, 1023)

    conn:on("receive", function(client,request)
        local buf = "";
        buf = buf.."HTTP/1.1 200 OK\n\n"
        local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
        if(method == nil)then
            _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
        local _GET = {}
        if (vars ~= nil)then
            for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
                _GET[k] = v
        buf = buf.."<!DOCTYPE html><html><head>";
        buf = buf.."<meta charset=\"utf-8\">";
        buf = buf.."<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">";
        buf = buf.."<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
        buf = buf.."<link rel=\"stylesheet\" href=\"\">";
        buf = buf.."<script src=\"\"></script>";
        buf = buf.."<script src=\"\"></script>";
        buf = buf.."</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1>";       
        buf = buf.."<a type=\"submit\" id=\"change_color\" type=\"button\" class=\"btn btn-primary\">Change Color</a> ";
        buf = buf.."<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div></div>";
        buf = buf.."<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);";      
        buf = buf.."document.getElementById(\"change_color\").href=\"?r=\" + Math.round(picker.rgb[0]*4.0117) + \"&g=\" +  Math.round(picker.rgb[1]*4.0117) + \"&b=\" + Math.round(picker.rgb[2]*4.0117);}</script></body></html>";
        if(_GET.r or _GET.g or _GET.b) then
            -- This is for RGB Common Cathode
            -- led(_GET.r, _GET.g,_GET.b)
            -- This is for RGB Common Anode
            led(1023-_GET.r, 1023-_GET.g,1023-_GET.b)   

Important: If you're using an RGB LED common cathode, you'll need to comment and uncomment some code in the if(_GET.r, _GET.g, or _GET.b) statement, as explained in the script comments.


To create the circuit for the RGB LED common anode, follow these schematics.

ESP8266 RGB Color Picker_bbff

Important: If you're using an RGB LED's common cathode, you'll need to connect the longer lead to GND.

Your ESP IP Address

When you restart your ESP8266, it prints the ESP IP address to your serial monitor. Keep the IP address handy in case you need it later.

The ESP IP address in my case is Read this troubleshooting guide if you experience problems seeing your IP.

You’re all set!

Opening Your Web Server

Enter your ESP8266's IP address into any browser. What you should see is as follows:

RGB color picker main selecting color

A small window with a color picker opens when you click on the field. To select the color for your RGB LED, drag your mouse or finger over the screen.

selecting color

Then simply click the “Change Color” button:

changing color

Your RGB LED has now turned blue.

blue LED


This is a simple example that shows how easy it is to remotely control an RGB LED with an ESP8266. To control an actual bulb, take this example and modify it.

If you like ESP8266, you may also like:

We hope you find this tutorial useful. Thanks for reading.

Oh hi there It’s nice to meet you.

Sign up to receive awesome content in your inbox, every month.

We don’t spam! Read our privacy policy for more info.

Leave a Reply

Your email address will not be published. Required fields are marked *

ESP8266 Home Automation Projects

Leverage the power of this tiny WiFi chip to build exciting smart home projects