RGB Color Mixer W/Display

by 6767sixseven in Circuits > Arduino

35 Views, 0 Favorites, 0 Comments

RGB Color Mixer W/Display

IMG_0141.jpeg
spfun_rgbcolor_maker1_image1.png

This project is a RGB Color Mixer. What this means is you can make whatever color you want by manually adjusting the RGB values. This is interesting is because it is something you can physically adjust, as opposed to just typing some numbers in online to view a color. This project also has an LCD where the RGB values are displayed, along with the associated color names. If there is no color that has those exact RGB values, the display tells you. This is done with an Arduino microcontroller.

Supplies

  1. Arduino Uno
  2. USB A to USB B Cable
  3. Breadboard
  4. 9V battery
  5. LCD
  6. 3 - 330Ω Resistors
  7. 1 - 100Ω Resistor
  8. 3 - Potentiometers
  9. 1-2 RGB LEDs
  10. 35 Male to Male wires
  11. 25 Female to Male wires
  12. 300g PLA Filament

Potentiometer Setup

Screenshot 2025-12-17 at 7.36.09 AM.png
  1. On a breadboard, insert 3 potentiometers, with each of their pins being in seperate rows.
  2. Next, connect the left pin of each potentiometer to the power bus of the breadboard.
  3. Then, connect the right pin of each potentiometer to the ground bus of the breadboard.
  4. After that, using a male to male wire, connect the middle pin of each potential to a unique analog pin on the Arduino. I used pins A0, A1, and A2.
  5. Finally, connect the 5V pin on the Arduino to the power bus, and connect the GND pin to the ground bus.

Potentiometer Code

For this part of the code, you won't need to edit the setup() of the Arduino. All your code should be in the loop section.

  1. Create integer variables using "int (insert name here)". I recommend using r, g, & b for your variable names.
  2. Set each variable equal to the analogRead(); of one of the analog pins. I recommend choosing them left to right for logical purposes (ie. left potentiometer = r, middle = g, right = b).
  3. Divide the analogRead() value by 4 (because the analogRead() command outputs a 10-bit binary number and the RGB values are 8-bit).

void loop() {
int r = analogRead(A0)/4;
int g = analogRead(A1)/4;
int b = analogRead(A2)/4;
}

RGB LED Setup

Screenshot 2025-12-17 at 8.42.20 AM.png
Screenshot 2025-12-17 at 8.43.34 AM.png
  1. Connect female to male wires to each of the legs of LEDs, and insert them into unique rows of the breadboard. Make sure to note which leg is the long leg as that is the ground for the led. The other 3 pins are for R, G, and B (refer to image).
  2. Connect wires from PWM-enabled (~) digital pins to the rows with the red, green, and blue legs of the LED. Personally, I connected them to pins 9, 10, & 11 respectively.
  3. In the same row of each of the color legs, add a 330Ω resistor.


Note:

Feel free to use multiple LEDs for this step, but make sure each of same leg are in the same rows (i.e. all Rs are in the same row, all ground are in the same row, etc.).

RGB Code

  1. Use the analogWrite() command to assign the color value from the resistor to each leg of the LED. Again, this should be in the loop section of the code.


Note:

After completing this section, I encourage you to attach a 9V battery to your arduino and mess around with the color mixer to get a better understanding of what is going on. Don't forget to upload the code to your Arduino first!

void loop() {

analogWrite(9,r);
analogWrite(10, g);
analogWrite(11, b);

}

LCD Setup

Screenshot 2025-12-17 at 8.17.40 AM.png
  1. Connect female to male wires to all of the pins on the LCD except D1, D2, D3, and D4.
  2. Insert each of the wires into unique rows on the breadboard.
  3. By adding wires in the same rows as above, connect RS, V0, E, D4, D5, D6, D7, and D8 pins to the Arduino's digital pins. Personally, I used pins 12, 6, 13, 7, 4, 3, and 2 respectively. Make sure the V0 pin is connect to a PWM-enabled (~) digital pin.
  4. Connect VSS & RW to the unused ground bus.
  5. Connect VDD to the unused power bus.
  6. Connect the A pin to the same power bus. Make sure there is a 100Ω resistor between the A pin and power.
  7. Connect the K pin to the unused ground bus.
  8. Connect both ground busses together by using a wire. Then, using a wire, connect a digital pin to the power bus. I used pin 1 for this.

LCD Code (Part 1)

  1. Download the LiquidCrystal Library, and include it in your code. For organization purposes, set each pin from the LCD to the name that is on the physical LCD (i.e. rs, v0, etc.).
  2. Then using the LiquidCrystal "insert name here"(rs, en, d4, d5, d6, d7) command, you can choose the name of the LCD.
  3. In your code you will need to set the RW pin to some value between 0-255 using the analogWrite() command to adjust the contrast of the LCD. This should be done in the setup section of your code. I personally used 100, but this may vary between different LCDs and require some experimentation.
  4. Set the pin you used to power the LCD as an output using the pinMode() command, then set it to HIGH using the digitalWrite() command (should be done in setup section).
  5. Enable the LCD using the "lcd name".begin(16,2) command in the setup section. The numbers in the function represent the dimensions of the LCD (most are 16 by 2).
  6. In the loop section, set the cursor to (0,0) using the "lcd name".setCursor() command.
#include <LiquidCrystal.h>
const int rs = 12, v0 = 6, en = 13, d4 = 7, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

void setup() {

pinMode(1, OUTPUT);
analogWrite(v0, 100);
digitalWrite(1, HIGH);
lcd.begin(16, 2);
}

void loop() {

lcd.setCursor(0, 0);

}

LCD Code (Part 2)

In the loop section:

  1. Print R, G, & B on the first row of the LCD. Do this using the "lcd name".print() function. Between each print function for each of the colors, increase the cursor column by 5 (ie from 0 to 5 to 10) using the "lcd name".setCursor() command.
  2. Between the functions of each of the colors, you will need to change the cursor placement based on the digits of the color value, using if and else if statements. Though kind of complicated to understand, this is because if you lcd.print() something then do it again but print something with less characters, the command only replaces the amount of characters in the second print and doesn't remove the rest of the characters of the first print. The solution is adding spaces after what you want to print. I recommend using the attached code for ease, but you should be able to figure it out with some experimentation. Remember, if the value is one digit, there should be two spaces after the number. If it is two digits then one space, and if 3 digits then zero spaces.
void loop() {
lcd.print("R");
if (r < 10) {
lcd.setCursor(1, 0);
lcd.print(r);
lcd.setCursor(2, 0);
lcd.print(" ");
}
else if (r < 100) {
lcd.setCursor(1, 0);
lcd.print(r);
lcd.setCursor(3, 0);
lcd.print(" ");
}
else if (r < 1000) {
lcd.setCursor(1, 0);
lcd.print(r);
lcd.setCursor(3, 0);
lcd.print("");
}
lcd.setCursor(5, 0);
lcd.print("G");
if (g < 10) {
lcd.setCursor(6, 0);
lcd.print(g);
lcd.setCursor(7, 0);
lcd.print(" ");
}
else if (g < 100) {
lcd.setCursor(6, 0);
lcd.print(g);
lcd.setCursor(8, 0);
lcd.print(" ");
}
else if (g < 1000) {
lcd.setCursor(6, 0);
lcd.print(g);
lcd.setCursor(8, 0);
lcd.print("");
}
lcd.setCursor(10, 0);
lcd.print("B");
if (b < 10) {
lcd.setCursor(11, 0);
lcd.print(b);
lcd.setCursor(12, 0);
lcd.print(" ");
}
else if (b < 100) {
lcd.setCursor(11, 0);
lcd.print(b);
lcd.setCursor(13, 0);
lcd.print(" ");
}
else if (b < 1000) {
lcd.setCursor(11, 0);
lcd.print(b);
lcd.setCursor(13, 0);
lcd.print("");
}

}



Color Assignment

669a17da-693b-4d0e-a480-df5017500c70.jpg

Online, you can find RGB colors .txt files, that have all the colors you are looking. You may also be able to find ones that you can use right away in your code. If not, I would recommend downloading a pdf of the colors, and asking AI to do it for you, as it would take hours to manually write the code (Note: your color names should be at least 16 characters, to avoid distorting the names. If the name of the color is less than 16 characters, add spaces after the name until it is exactly 16 characters).


If you don't want to do that, feel free to use my code that has hundreds of colors in it. If you used different variable names than me, make sure you edit them in the code.

Downloads

LCD Code (Part 3)

Before the color list:

  1. Set the cursor to the 2nd row and first column using the "lcd name".setCursor() command.


As this is the last coding section, I've included my final code.

void loop() {

lcd.setCursor(0,1);

colors go here...
...
...
}

Downloads

Physical Containment Design

Screenshot 2025-12-17 at 8.27.11 AM.png

Using a CAD software, design a box, lid, and knobs for the electronics. This design is meant to be 3D printed.

Box:

  1. Make an exact sketch of the shape of your electronics, then add a 0.25in offset. This should be enough room for you to comfortably fit your electronics in the box.
  2. Make the base of the box a quarter inch tall.
  3. Add quarter inch thick walls around the the box.
  4. Add a hole for the DC power supply male insert on your arduino, so you can attach a 9V battery to your circuit.

Lid:

  1. Using the same sketch of the box, make a lid that is a quarter inch tall.
  2. Add holes in your lid for the potentiometer knobs, LEDs, and LCD.
  3. Optionally, add an "R G B" label approximately where each of the knobs will be.

Knobs:

  1. Design round knobs to fit on your potentiometers. Make sure to add tolerance, around 0.005in.
  2. Design them to be 1in taller than your box.

Assembly

  1. Insert your electronics into the box.
  2. Put the knobs on the potentiometers (glue for a tighter fit).
  3. Pull the LCD and LEDs through the lid and make sure the knobs are sticking out of the designated holes.
  4. Place hot glue on top of the walls of the box and stick the lid to it.
  5. Hot glue the LEDs and LCD to the lid for more stability.

Powering Your Circuit

Upload your code to the Arduino and attach a 9V battery to your arduino using a "snap to plug" adapter.


CONGRATULATIONS!!! YOU'VE FINISHED!!!