This article was first published in my book about the ESP32 which is called ESP32 uitgelegd and is available in Dutch only at this moment. You can buy my book here: https://www.boekenbestellen.nl/boek/esp32-uitgelegd/9789463456814
You can find more information on this book here: http://lucstechblog.blogspot.com/2019/07/esp32-uitgelegd-nu-verkrijgbaar.html
In previous articles on this weblog I often published a program that runs on an ESP8266 or ESP32 and produces a webpage.
To fancy-up these webpages I gave them a backgound color of my liking. My chosing of colors may however differ from your likings. So I first show you how to pick colors the easy way.
<body bgcolor=PowderBlue>
Look at this line. It sets the background color for an entire webpage to PowderBlue. Where does that name come from ?
You can find all pre-defined HTML color names on the following webpage:
https://www.w3schools.com/colors/colors_names.asp
There are 140 names pre-defined.
Above you can see a few of the predefined names that you can use.
Likely you want still other colors. Well you can do that by alterning the code in such a way that it uses RGB codes which gives you much more freedom. The way to change the names in RGB code is as follows:
<body style = 'background-color:rgb(247, 2, 235)'>
But how to find these RGB codes. Well here is a neat trick.
Just open your browser and with your favorite search engine type the following search code:
rgb color picker
As you can see you are presented a large rectangle that is set at the hue's of a certain color. With the slider you can change the color and with the round dot you can specify the hue.
Beneath the rectangle you can see the values of that color presented in HEX, RGB, HSV HSL and CMYK.
Our interest is in the RGB values. So just alter the RGB values in your HTML code with the found RGB values in the color picker and you are all set.
Naturally this also applies when you are building an APP with MIT's APP-Inventor. By altering the RGB values you can alter the background color of your app.
Neopixels Bonus
As a bonus you can also use these RGB values to set the colors of your neopixels. There is just one flaw. It is difficult to produce brown colors. They will mostly tend to look orange-ish.
That is something I already noticed when building my resistor code watch:
https://lucstechblog.blogspot.com/2016/10/nuw-resistor-color-code-clock.html
Till next time
keep tinkering and have fun
Luc Volders