How to Build a Color Mixer App with grid() in Tkinter

MatthewJun 2, 2025

Step 1: Setup

import tkinter as tk

root = tk.Tk()
root.title("Color Mixer")
root.geometry("400x250")

Step 2: Define the Grid Layout

We’ll create:

3 labeled sliders (R, G, B)
A preview box that changes color
A reset button

# Labels
tk.Label(root, text="Red").grid(row=0, column=0, padx=10, pady=5, sticky="w")
tk.Label(root, text="Green").grid(row=1, column=0, padx=10, pady=5, sticky="w")
tk.Label(root, text="Blue").grid(row=2, column=0, padx=10, pady=5, sticky="w")

Step 3: Add Sliders and Dynamic Color Box

# Color variables
r = tk.IntVar()
g = tk.IntVar()
b = tk.IntVar()

# Color preview function
def update_color(*args):
    color = f'#{r.get():02x}{g.get():02x}{b.get():02x}'
    preview.config(bg=color)

# Sliders
tk.Scale(root, from_=0, to=255, orient="horizontal", variable=r, command=update_color).grid(row=0, column=1, sticky="we")
tk.Scale(root, from_=0, to=255, orient="horizontal", variable=g, command=update_color).grid(row=1, column=1, sticky="we")
tk.Scale(root, from_=0, to=255, orient="horizontal", variable=b, command=update_color).grid(row=2, column=1, sticky="we")

Step 4: Add the Color Preview Area

Note: rowspan=3 makes the preview fill 3 rows vertically!

preview = tk.Label(root, text="Preview", bg="#000000", fg="white", width=20, height=4)
preview.grid(row=0, column=2, rowspan=3, padx=10, pady=5, sticky="nsew")

Step 5: Add a Reset Button

def reset():
    r.set(0)
    g.set(0)
    b.set(0)
    update_color()

tk.Button(root, text="Reset", command=reset).grid(row=3, column=0, columnspan=3, pady=10)

Step 6: Make the Grid Responsive

for i in range(3):
    root.grid_columnconfigure(i, weight=1)

Full Example

import tkinter as tk

root = tk.Tk()
root.title("Color Mixer")
root.geometry("400x250")

# RGB vars
r, g, b = tk.IntVar(), tk.IntVar(), tk.IntVar()

def update_color(*args):
    color = f'#{r.get():02x}{g.get():02x}{b.get():02x}'
    preview.config(bg=color)

# Labels
tk.Label(root, text="Red").grid(row=0, column=0, padx=10, pady=5, sticky="w")
tk.Label(root, text="Green").grid(row=1, column=0, padx=10, pady=5, sticky="w")
tk.Label(root, text="Blue").grid(row=2, column=0, padx=10, pady=5, sticky="w")

# Sliders
tk.Scale(root, from_=0, to=255, orient="horizontal", variable=r, command=update_color).grid(row=0, column=1, sticky="we")
tk.Scale(root, from_=0, to=255, orient="horizontal", variable=g, command=update_color).grid(row=1, column=1, sticky="we")
tk.Scale(root, from_=0, to=255, orient="horizontal", variable=b, command=update_color).grid(row=2, column=1, sticky="we")

# Preview
preview = tk.Label(root, text="Preview", bg="#000000", fg="white", width=20, height=4)
preview.grid(row=0, column=2, rowspan=3, padx=10, pady=5, sticky="nsew")

# Reset button
def reset():
    r.set(0)
    g.set(0)
    b.set(0)
    update_color()

tk.Button(root, text="Reset", command=reset).grid(row=3, column=0, columnspan=3, pady=10)

# Responsive layout
for i in range(3):
    root.grid_columnconfigure(i, weight=1)

root.mainloop()

Leave a Reply Cancel reply