In this post, I present an embedded Python app that takes two colors as inputs in html color convention (that uses Hexadecimal color codes), and produces a mixed color of the two. Furthermore, the user can also specify the mix proportion or the ratio of the first color to be mixed with the second color. The result is shown in both Shell output as text and with actual colors on the UI. Code is runnable on the page, and the explanation of the solution is also provided.
Objective
Create a HTML color mixer: Input any two html color codes and optionally the mix ratio, and the app will generate the mixed color and show its new color in both html hex and RGB codes. The output will be printed in the shell as well as shown in the UI in actual colors.
By default, color1 and color2 are mixed at 50%-50% if mix ratio is not specified.
Example:
Inputs:
color1: #00CED1
color2: #8A2BE2
mix: 60 (%)
Outputs:
Shell output (text): Mixed hex color code: #378cd7 | rgb code: (55, 140, 215) Mix Ratio = color1:color2::60.0%:40.0%
Visual output (colored boxes): 
Run it Below
Click on Run 
icon on the widget below to run it. To enter the colors, place your cursor on the blinking caret on the right pane of the widget, and type or paste in a code in the format “#hhhhhh” (without the quotes; where h represent the hexadecimal digits for the color) and press ENTER/RETURN on your keyboard (softkeyboard on mobile devices will work too). After you entered the second color, enter the mix ratio as percentage. For example, to mix 80% of first color with 20% of the second color, you would enter 80 when prompted. You don’t have to enter the ratio for the second color, because the app will figure it out from the first color’s ratio automatically. If you don’t specify any value, that is, you just ENTER without typing anything on the prompt, the app will use 50% as the default mix ratio.
Input validation: Only basic input validation is in the code to keep things focused on the actual mechanics of conversion. However, if you forget to enter “#” in the color codes, the code will take care of it for you. If you entered a ‘%’ symbol for the mix ratio, the code will take care of it too. If you encounter error, just click on Stop (square icon on the widget’s menu bar), and click Run again. If you need help in choosing some colors codes, click here and you can copy the codes from that page and paste for your inputs!
The Calculations Logic
Hex to RGB Conversions:
A custom function is created to convert each hex color to RGB format.
Hex colors are in the format #RRGGBB, where RR, GG, and BB are two-digit hexadecimal numbers representing the red, green, and blue components of the color. The function converts each pair of hexadecimal digits to their decimal equivalents, which are used in RGB.
For example, the hex color #FF5733 conversion process would be:
- Remove the ‘#’ symbol from the string
- Take 1st, 2nd and digits from the string: FF
and convert it to decimal for the red component of RGB, which is 255 in this example. - Then take 3rd, and 4th digits from the string: 57
and convert it to decimal for the green component of RGB, which is 87 in this example. - Then take 3rd, and 4th digits from the string: 33
and convert it to decimal for the blue component of RGB, which is 51 in this example.
So the hex color #FF5733 is converted to [255, 87, 51] in RGB format. Each of the two hex color inputs are converted to their RGB equivalents this way.
Color Mixing:
The two colors are mixed using their RGB values using the specified mix ratio. If no ratio is specified for the first color, a 50-50 ratio is used, meaning 50% of the first color is mixed with 50% of the second color to come up with 100% of the new, mixed color.
If a mix ratio is specified for the first color, we use that portion and 100% minus that value is used for the second color.
So, if mix ratio for color was entered as 80. 80% of the first color will be mixed with 20% of the second color.
The general formula to do this mix in a simplified notation:
= (color1 * mix ratio for first color) + (color2 * mix ratio for second color)
And these are using the RGB values for the math as we converted to earlier.
Since RGB value are actually 3 values (R, G, B) stored in a list object, we have to do this calculation for each of the elements such that:R = rgb1[0] * ratio1 + rgb2[0] * ratio2
G = rgb1[1] * ratio1 + rgb2[1] * ratio2
B = rgb1[2] * ratio1 + rgb2[2] * ratio2
where rgb1 is the first color’s RGB values in a list (hence the indexing: 0 to 2) and
where rgb2 is the second color’s RGB values in a list.
After mixing the function converts the mixed color in RGB format back to hex values, and returns both the new hex value and the RGB value of the mixed color such that the results are shown in both formats.
Visualization Logic
To show the original two colors, and the new mixed color, we create a canvas and draw three rectangles there and fill them with their respective colors. This UI creation leverages tkinter library.
Results are printed in shell window, and the visualization is drawn in color on the canvas window.
I hope you found this post helpful and interesting. Explore this site for more tips and articles. Be sure to also check out my Patreon site where you can find free downloads and optional fee-based code and documentation. Thanks for visiting!
