Design a site like this with
Get started

$10 DIY WiFi RGB LED Mood Light with ESP8266 (Step by Step)

TIn this project, I’ll show you how you can build your own mood light. You’ll use an ESP8266 to remotely control the color of your light using your smartphone or any other device that has a browser. This project is called $10 DIY WiFi RGB LED Mood Light.

To learn more about the ESP8266 and RGB LEDs use the following tutorials as a reference:

Parts List

Here’s the hardware that you need to complete this project:

  • 1x ESP8266-12E – read Best ESP8266 Wi-Fi Development Boards
  • 1x RGB LED Strip 
  • 1x 12V Power Supply
  • Device to reduce voltage from 12V to 5V
    • Alternative – LM7805 with heat sink
    • Recommended – Step down buck converter module
  • 3x NPN Transistors 2N2222 or equivalent
  • 3x 1k Ohm Resistors
  • 1x Breadboard
  • Jumper wires
  • Table Lamp with Mood Light Look

Flashing Your ESP with NodeMCU

In this tutorial we are going to use the NodeMCU firmware. You have to flash your ESP with NodeMCU firmare.

Downloading ESPlorer IDE

I recommend using the ESPlorer IDE which is 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

Uploading Code

You should see a window similar to the preceding Figure, follow these instructions to upload a Lua file:

  1. Connect your ESP8266-12E that has 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 that you need to worry about or change is highlighted in red box.


Upload the following code into your ESP8266 using the preceding software. Your file should be named “init.lua“.

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

IMPORTANT: the embedded script below was made in 2016 and it works with an older version of the Lua firmware. If you’re running a newer version of the Lua firmware, you’ll need to use this script instead: ESP8266_RGB_Color_Picker_New.lua.

<pre class="wp-block-syntaxhighlighter-code">-- Gnd_To_Vcc


function led(r, g, b)
    pwm.setduty(5, r)
    pwm.setduty(6, g)
    pwm.setduty(7, b)
pwm.setup(5, 1000, 1023)
pwm.setup(6, 1000, 1023)
pwm.setup(7, 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.."<a href=""></a>";
        buf = buf.."<a href=""></a>";
        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
            led(_GET.r, _GET.g,_GET.b)


Now follow these schematics to create the final circuit.

Your ESP IP Address

When your ESP8266 restarts, it prints in your serial monitor the ESP IP address. Save that IP address, because you’ll need it later.

In my case, the ESP IP address is If you experience problems seeing your IP read this troubleshooting guide.

You’re all set!

Opening Your Web Server

Go to any browser and enter the IP address of your ESP8266. This is what you should see:

Click the input field and a small window opens with a color picker. Simply drag your mouse or finger and select the color for your RGB LED strip:

Finally, press the “Change Color” button:

Now, your mood light can be placed in your living room:

Go to the top of this page to see a video demonstration of this project.

Wrapping Up

This project shows a real world application for the ESP8266 board. If you don’t have an RGB LED strip, but you still want to try this project you can read this blog post ESP8266 RGB Color Picker that changes the color of an RGB LED with an ESP8266.

Do you have any questions? Leave a comment down below!

Thanks for reading.


Published by Gnd_To_Vcc

Here to spread my knowledge . Knowledge should always be spread not stored.

4 thoughts on “$10 DIY WiFi RGB LED Mood Light with ESP8266 (Step by Step)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: