{"id":21081,"date":"2016-05-19T09:23:54","date_gmt":"2016-05-19T09:23:54","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=21081"},"modified":"2019-10-04T10:11:11","modified_gmt":"2019-10-04T10:11:11","slug":"esp8266-rgb-color-picker","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp8266-rgb-color-picker\/","title":{"rendered":"ESP8266 RGB Color Picker"},"content":{"rendered":"<p>In this project, you\u2019re going to build a web server with an ESP8266 to remotely control an RGB LED. This project is called ESP8266 RGB Color Picker.<\/p>\n<h2>First, watch the video demonstration<\/h2>\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/Wvoi8xkFBDQ?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p><strong>To\u00a0learn more about the ESP8266 and RGB LEDs use the\u00a0following tutorials as a reference:<\/strong><\/p>\n<ul>\n<li><strong><a href=\"https:\/\/randomnerdtutorials.com\/electronics-basics-how-do-rgb-leds-work\/\">How do RGB LEDs work?<\/a><\/strong><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/getting-started-with-esp8266-wifi-transceiver-review\/\" target=\"_blank\" rel=\"noopener noreferrer\">Getting started with the ESP8266<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/\">ESP8266 web server with NodeMCU<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/flashing-nodemcu-firmware-on-the-esp8266-using-windows\/\">Flashing NodeMCU firmware<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-troubleshooting-guide\/\">ESP8266 troubleshooting guide<\/a><\/li>\n<\/ul>\n<p>If you like the ESP and you want to do more projects\u00a0you can download\u00a0my eBook <a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Automation using ESP8266 here<\/a>.<\/p>\n<p><strong>Let\u2019s get started!<\/strong><\/p>\n<h2>Parts List<\/h2>\n<p>Here\u2019s the hardware that you need to complete\u00a0this project:<\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x\u00a0ESP8266-12E\u00a0<\/a>&#8211; read <a href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best ESP8266 Wi-Fi Development Board<\/a><\/li>\n<li>1x\u00a0RGB LED Common Anode (read\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/electronics-basics-how-do-rgb-leds-work\/\">How do RGB LEDs work?<\/a>)<\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">3x 470\u03a9 Resistors<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x Breadboard<\/a><\/li>\n<\/ul>\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n<h2>Flashing Your ESP with NodeMCU<\/h2>\n<p>In this tutorial we are going to use the NodeMCU firmware.\u00a0You have to\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/flashing-nodemcu-firmware-on-the-esp8266-using-windows\/\" target=\"_blank\" rel=\"noopener noreferrer\">flash your ESP with NodeMCU firmare<\/a>.<\/p>\n<h2>Downloading ESPlorer IDE<\/h2>\n<p>I recommend using the ESPlorer IDE which is a program\u00a0created by 4refr0nt\u00a0to send commands to your\u00a0ESP8266.<\/p>\n<p>Follow these instructions to download and install ESPlorer IDE:<\/p>\n<ol>\n<li><a href=\"http:\/\/esp8266.ru\/esplorer\/#tutorials\" target=\"_blank\" rel=\"noopener noreferrer\">Click here<\/a> to download\u00a0ESPlorer<\/li>\n<li>Unzip that folder<\/li>\n<li>Go to the main\u00a0folder<\/li>\n<li>Run \u201c<strong>ESPlorer.jar\u201d<\/strong> file<\/li>\n<li>Open the ESPlorer IDE<\/li>\n<\/ol>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-5125\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer-start.png?resize=424%2C316\" sizes=\"(max-width: 424px) 100vw, 424px\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer-start.png?resize=300%2C224 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer-start.png?w=802 802w\" alt=\"esplorer start\" width=\"424\" height=\"316\" \/><\/p>\n<h2><\/h2>\n<h2>Uploading Code<\/h2>\n<p>You should see a window similar to the preceding Figure, follow these instructions to upload a Lua file:<\/p>\n<ol>\n<li>Connect your ESP8266-12E that has built-in\u00a0programmer to your computer<\/li>\n<li>Select your ESP8266-12E <strong>port<\/strong><\/li>\n<li>Press\u00a0<strong>Open\/Close<\/strong><\/li>\n<li>Select <strong>NodeMCU+MicroPtyhon tab<\/strong><\/li>\n<li>Create a new file called <strong>init.lua<\/strong><\/li>\n<li>Press <strong>Save to ESP<\/strong><\/li>\n<\/ol>\n<p>Everything that you need to worry about or change is highlighted in red box.<\/p>\n<p><a href=\"http:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer_tab.png\"><img decoding=\"async\" class=\"aligncenter wp-image-5126\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer_tab.png?resize=640%2C463\" sizes=\"(max-width: 640px) 100vw, 640px\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer_tab.png?resize=300%2C217 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer_tab.png?w=899 899w\" alt=\"esplorer_tab\" width=\"640\" height=\"463\" \/><\/a><\/p>\n<h2>Code<\/h2>\n<p>Upload the following code into your ESP8266 using the preceding software. Your file should be named \u201c<strong>init.lua<\/strong>\u201c.<\/p>\n<p><strong>Don\u2019t forget to add your network name (SSID) and password to the script\u00a0below.<\/strong><\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">-- Rui Santos\n-- Complete project details at http:\/\/randomnerdtutorials.com\n\nwifi.setmode(wifi.STATION)\nwifi.sta.config(&quot;YOUR_NETWORK_NAME&quot;,&quot;YOUR_NETWORK_PASSWORD&quot;)\n\nprint(wifi.sta.getip())\n\nfunction led(r, g, b)\n    pwm.setduty(1, r)\n    pwm.setduty(2, g)\n    pwm.setduty(3, b)\nend\npwm.setup(1, 1000, 1023)\npwm.setup(2, 1000, 1023)\npwm.setup(3, 1000, 1023)\npwm.start(1)\npwm.start(2)\npwm.start(3)\n\nsrv=net.createServer(net.TCP)\nsrv:listen(80,function(conn)\n    conn:on(&quot;receive&quot;, function(client,request)\n        local buf = &quot;&quot;;\n        buf = buf..&quot;HTTP\/1.1 200 OK\\n\\n&quot;\n        local _, _, method, path, vars = string.find(request, &quot;([A-Z]+) (.+)?(.+) HTTP&quot;);\n        if(method == nil)then\n            _, _, method, path = string.find(request, &quot;([A-Z]+) (.+) HTTP&quot;);\n        end\n        local _GET = {}\n        if (vars ~= nil)then\n            for k, v in string.gmatch(vars, &quot;(%w+)=(%w+)&amp;*&quot;) do\n                _GET[k] = v\n            end\n        end\n        buf = buf..&quot;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&quot;;\n        buf = buf..&quot;&lt;meta charset=\\&quot;utf-8\\&quot;&gt;&quot;;\n        buf = buf..&quot;&lt;meta http-equiv=\\&quot;X-UA-Compatible\\&quot; content=\\&quot;IE=edge\\&quot;&gt;&quot;;\n        buf = buf..&quot;&lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1\\&quot;&gt;&quot;;\n        buf = buf..&quot;&lt;link rel=\\&quot;stylesheet\\&quot; href=\\&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\\&quot;&gt;&quot;;\n        buf = buf..&quot;&lt;script src=\\&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\\&quot;&gt;&lt;\/script&gt;&quot;;\n        buf = buf..&quot;&lt;script src=\\&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jscolor\/2.0.4\/jscolor.min.js\\&quot;&gt;&lt;\/script&gt;&quot;;\n        buf = buf..&quot;&lt;\/head&gt;&lt;body&gt;&lt;div class=\\&quot;container\\&quot;&gt;&lt;div class=\\&quot;row\\&quot;&gt;&lt;h1&gt;ESP Color Picker&lt;\/h1&gt;&quot;;       \n        buf = buf..&quot;&lt;a type=\\&quot;submit\\&quot; id=\\&quot;change_color\\&quot; type=\\&quot;button\\&quot; class=\\&quot;btn btn-primary\\&quot;&gt;Change Color&lt;\/a&gt; &quot;;\n        buf = buf..&quot;&lt;input class=\\&quot;jscolor {onFineChange:'update(this)'}\\&quot; id=\\&quot;rgb\\&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&quot;;\n        buf = buf..&quot;&lt;script&gt;function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);&quot;;      \n        buf = buf..&quot;document.getElementById(\\&quot;change_color\\&quot;).href=\\&quot;?r=\\&quot; + Math.round(picker.rgb[0]*4.0117) + \\&quot;&amp;g=\\&quot; +  Math.round(picker.rgb[1]*4.0117) + \\&quot;&amp;b=\\&quot; + Math.round(picker.rgb[2]*4.0117);}&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;&quot;;\n        \n        if(_GET.r or _GET.g or _GET.b) then\n            -- This is for RGB Common Cathode\n            -- led(_GET.r, _GET.g,_GET.b)\n            \n            -- This is for RGB Common Anode\n            led(1023-_GET.r, 1023-_GET.g,1023-_GET.b)   \n        end\n        client:send(buf);\n        client:close();\n        collectgarbage();\n    end)\nend)\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP_RGB_Color_Picker.lua\" target=\"_blank\">View raw code<\/a><\/p>\n<p><span style=\"color: #ff0000;\"><strong>Important:<\/strong><\/span> If you\u2019re using an RGB LED common cathode, you need to comment and uncomment some code in the <em>if(_GET.r or _GET.g or _GET.b)<\/em> statement as described in the script\u00a0comments.<\/p>\n<h2>Schematics<\/h2>\n<p>Now follow these schematics to create the\u00a0circuit that the RGB LED common anode.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter size-full wp-image-21175\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=641%2C911&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 RGB Color Picker_bbff\" width=\"641\" height=\"911\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?w=641&amp;quality=100&amp;strip=all&amp;ssl=1 641w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=106%2C150&amp;quality=100&amp;strip=all&amp;ssl=1 106w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=211%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 211w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=56%2C80&amp;quality=100&amp;strip=all&amp;ssl=1 56w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=155%2C220&amp;quality=100&amp;strip=all&amp;ssl=1 155w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=70%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 70w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=167%2C238&amp;quality=100&amp;strip=all&amp;ssl=1 167w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=292%2C415&amp;quality=100&amp;strip=all&amp;ssl=1 292w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=343%2C487&amp;quality=100&amp;strip=all&amp;ssl=1 343w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/ESP8266-RGB-Color-Picker_bbff.png?resize=419%2C595&amp;quality=100&amp;strip=all&amp;ssl=1 419w\" sizes=\"(max-width: 641px) 100vw, 641px\" \/><\/p>\n<p><span style=\"color: #ff0000;\"><strong>Important:<\/strong><\/span> If you\u2019re using an RGB LED common cathode, you need to connect the longer lead to GND.<\/p>\n<h2>Your ESP IP Address<\/h2>\n<p>When your ESP8266 restarts, it prints in your serial monitor\u00a0the ESP IP address. Save that IP address, because you\u2019ll need it later.<\/p>\n<p>In my case, the\u00a0ESP IP address is <strong>192.168.1.7<\/strong>. If you experience problems seeing your IP\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/esp8266-troubleshooting-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">read this troubleshooting guide<\/a>.<\/p>\n<p><strong>You\u2019re all set!<\/strong><\/p>\n<h2>Opening Your Web Server<\/h2>\n<p>Go to any browser and enter the IP address of your ESP8266. This what you should see:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21084\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?resize=382%2C318&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"RGB color picker main selecting color\" width=\"382\" height=\"318\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?w=382&amp;quality=100&amp;strip=all&amp;ssl=1 382w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?resize=150%2C125&amp;quality=100&amp;strip=all&amp;ssl=1 150w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?resize=300%2C250&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?resize=80%2C67&amp;quality=100&amp;strip=all&amp;ssl=1 80w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?resize=220%2C183&amp;quality=100&amp;strip=all&amp;ssl=1 220w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?resize=120%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 120w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?resize=180%2C150&amp;quality=100&amp;strip=all&amp;ssl=1 180w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/RGB-color-picker-main-selecting-color.png?resize=286%2C238&amp;quality=100&amp;strip=all&amp;ssl=1 286w\" sizes=\"(max-width: 382px) 100vw, 382px\" \/><\/p>\n<p>Click the field and a small window opens with a color picker. Simply drag your mouse or finger and select the color for your\u00a0RGB LED:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21085\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?resize=400%2C312&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"selecting color\" width=\"400\" height=\"312\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?w=400&amp;quality=100&amp;strip=all&amp;ssl=1 400w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?resize=150%2C117&amp;quality=100&amp;strip=all&amp;ssl=1 150w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?resize=300%2C234&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?resize=80%2C62&amp;quality=100&amp;strip=all&amp;ssl=1 80w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?resize=220%2C172&amp;quality=100&amp;strip=all&amp;ssl=1 220w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?resize=128%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 128w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?resize=192%2C150&amp;quality=100&amp;strip=all&amp;ssl=1 192w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/selecting-color.png?resize=305%2C238&amp;quality=100&amp;strip=all&amp;ssl=1 305w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>Then simply click the &#8220;Change Color&#8221; button:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21086\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?resize=379%2C317&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"changing color\" width=\"379\" height=\"317\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?w=379&amp;quality=100&amp;strip=all&amp;ssl=1 379w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?resize=150%2C125&amp;quality=100&amp;strip=all&amp;ssl=1 150w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?resize=300%2C251&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?resize=80%2C67&amp;quality=100&amp;strip=all&amp;ssl=1 80w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?resize=220%2C184&amp;quality=100&amp;strip=all&amp;ssl=1 220w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?resize=120%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 120w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?resize=179%2C150&amp;quality=100&amp;strip=all&amp;ssl=1 179w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/changing-color.png?resize=285%2C238&amp;quality=100&amp;strip=all&amp;ssl=1 285w\" sizes=\"(max-width: 379px) 100vw, 379px\" \/><\/p>\n<p>Now your RGB LED changes\u00a0to the blue color:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-21091\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/blue-LED-1.png?resize=360%2C235&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"blue LED\" width=\"360\" height=\"235\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/blue-LED-1.png?w=360&amp;quality=100&amp;strip=all&amp;ssl=1 360w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/blue-LED-1.png?resize=150%2C98&amp;quality=100&amp;strip=all&amp;ssl=1 150w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/blue-LED-1.png?resize=300%2C196&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/blue-LED-1.png?resize=80%2C52&amp;quality=100&amp;strip=all&amp;ssl=1 80w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/blue-LED-1.png?resize=220%2C144&amp;quality=100&amp;strip=all&amp;ssl=1 220w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/blue-LED-1.png?resize=153%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 153w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/blue-LED-1.png?resize=230%2C150&amp;quality=100&amp;strip=all&amp;ssl=1 230w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/p>\n<p><strong>Go to the top of this page to see a video demonstration\u00a0of this project.<\/strong><\/p>\n<h2>Taking It Further<\/h2>\n<p>This is a basic example that shows you how easy it is to remotely control an RGB LED with an ESP8266. You can take this example and modify it to control an actual lamp.<\/p>\n<p><strong>Do you have any questions?\u00a0<\/strong><strong>Leave a comment down below!<\/strong><\/p>\n<p>Thanks for reading. If you like this post probably you might like my next ones, so please support me by <a href=\"https:\/\/randomnerdtutorials.com\/download\">subscribing my blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this project, you\u2019re going to build a web server with an ESP8266 to remotely control an RGB LED. This project is called ESP8266 RGB Color Picker. First, watch the &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP8266 RGB Color Picker\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp8266-rgb-color-picker\/#more-21081\" aria-label=\"Read more about ESP8266 RGB Color Picker\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":21082,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[214,265,300,240,220,250,264,218],"tags":[],"class_list":["post-21081","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266","category-esp8266-project","category-0-esp8266","category-esp8266-projects","category-http-client","category-nodemcu","category-project","category-web-server"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/05\/Featured-image-blog.jpg?fit=951%2C717&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/21081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=21081"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/21081\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/21082"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=21081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=21081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=21081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}