A Simple Color Meter

A color meter program allows the user to view a color and its RGB value by dragging slider bars to indicate the red, green, and blue values of the color.  A color in this scheme has red, green, and blue components that range from 0 through 255, for a total of 2²⁴ possible colors.  An actual color value in Python is represented as a six-digit hexadecimal string, of the format xRRGGBB, where each pair of digits, RR, GG, and BB in the string correspond to the integer values of red, green, and blue, respectively.  Thus, the RGB integer values 10, 16, and 255 would produce the single RGB string “#0a10ff”.

Here is the interface for the program (scaledemo2.py).

Each of the three sliding scales has a vertical orientation, a label, and an interval from 0 to 255. Note that the user has positioned the bars at 191 (red), 118 (green), and 128 (blue). When any of the slider bars is adjusted, the program computes a six-digit hexadecimal string from these three values, displays this string in the upper left corner of the window, and repaints a canvas in the color that corresponds to this string.

Here is the code for the complete program (scaledemo2.py):

from breezypythongui import EasyFrame
from tkinter import VERTICAL
 
class ColorMeter(EasyFrame):
 
    def __init__(self):
        """Sets up the window and widgets."""
        EasyFrame.__init__(self, title = "Color Meter")
 
        # Label to display the RGB value
        self.rgbLabel = self.addLabel(text = "RGB : x000000",
                                      row = 0, column = 0)
 
        # Canvas to display the color
        self.canvas = self.addCanvas(row = 1, column = 0)
        self.canvas["bg"] = "black"
 
        # Sliding scale for red
        self.redScale = self.addScale(label = "Red",
                                      row = 0, column = 1,
                                      orient = VERTICAL,
                                      from_ = 0, to = 255,
                                      length = 300,
                                      tickinterval = 15,
                                      command = self.setColor)
 
 
        # Sliding scale for green
        self.greenScale = self.addScale(label = "Green",
                                        row = 0, column = 2,
                                        orient = VERTICAL,
                                        from_ = 0, to = 255,
                                        length = 300,
                                        tickinterval = 15,
                                        command = self.setColor)
 
        # Sliding scale for blue
        self.blueScale = self.addScale(label = "Blue",
                                       row = 0, column = 3,
                                       orient = VERTICAL,
                                       from_ = 0, to = 255,
                                       length = 300,
                                       tickinterval = 15,
                                       command = self.setColor)
 
 
    # Event handler for the three sliding scales
    def setColor(self, value):
        """Gets the RGB values from the scales,
        converts them to hex, and builds a six-digit
        hex string to update the view."""
        red = hex(self.redScale.get())[2:]
        green = hex(self.greenScale.get())[2:]
        blue = hex(self.blueScale.get())[2:]
        if len(red) == 1:
            red = "0" + red
        if len(green) == 1:
            green = "0" + green
        if len(blue) == 1:
            blue = "0" + blue
        color = "#" + red + green + blue
        self.rgbLabel["text"] = "RGB: " + color
        self.canvas["bg"] = color
       
 
# Instantiate and pop up the window.
ColorMeter().mainloop()

Note that each sliding scale object uses the same event handler method, setColor. This is because the same action is performed when any slider bar is adjusted. The setColor method ignores its value parameter, and instead uses the get method to obtain the RGB component from each of the sliding scale objects.