In this tutorial, we'll build a desktop app using Python's tkinter to generate random colors and display their HEX, RGB, and HSL values. We'll break it down step by step so beginners can follow along.
Step 1: Import Required Modules
First, we need to import the libraries required for the app:
import sys
import os
import tkinter as tk
from tkinter import messagebox
import random
import colorsys
Explanation:
tkinter – used to build the GUI.
messagebox – to show pop-up messages like "Copied to clipboard".
random – to generate random color values.
colorsys – to convert RGB values to HSL format.
Step 2: Define the App Theme
Next, let's define colors and fonts for our app:
APP_BG = "#121212"
PANEL_BG = "#1F1F1F"
BTN_BG = "#2C2C2C"
ACCENT = "#FF6F61"
TEXT_CLR = "#E0E0E0"
SUBTEXT_CLR = "#AAAAAA"
INPUT_BG = "#333333"
INPUT_FG = "#FFFFFF"
FONT = ("Segoe UI", 11)
Explanation:
We define backgrounds, button colors, accent colors, text colors for consistency.
Using a dark theme gives a modern look.
FONT is applied to labels, buttons, and other text.
Step 3: Create the Main App Class
Now, let's create the main class that initializes the app:
class RandomColorGeneratorApp:
def __init__(self, root):
self.root = root
root.title("MateTools – Pro Random Color Generator")
root.geometry("1000x620")
root.configure(bg=APP_BG)
root.resizable(False, False)
Explanation:
root is the main Tkinter window.
title() sets the window title.
geometry() sets the window size.
resizable(False, False) prevents resizing.
Step 4: Create the Left Panel (Controls)
We will now create the left panel where the app buttons and labels live:
left = tk.Frame(root, bg=PANEL_BG, width=420)
left.pack(side="left", fill="y")
tk.Label(
left,
text="MateTools",
bg=PANEL_BG,
fg=ACCENT,
font=("Segoe UI", 20, "bold")
).pack(padx=16, pady=(18, 10))
tk.Label(
left,
text="Pro Random Color Generator",
bg=PANEL_BG,
fg=TEXT_CLR,
font=("Segoe UI", 14, "bold")
).pack(anchor="w", padx=16, pady=(0, 2))
Explanation:
Frame – a container for widgets.
Label – displays text on the panel.
pack() – arranges widgets. side="left" means the panel sticks to the left side.
Step 5: Add Buttons
Next, we'll add buttons for generating colors and copying values:
btn_frame = tk.Frame(left, bg=PANEL_BG)
btn_frame.pack(fill="x", padx=16, pady=16)
def make_btn(text, cmd, color=BTN_BG):
return tk.Button(
btn_frame,
text=text,
command=cmd,
bg=color,
fg="white",
font=("Segoe UI", 11, "bold"),
relief="flat",
height=2,
width=20
)
make_btn("Generate Random Color", self.generate_color, ACCENT).pack(side="top", pady=8)
make_btn("Copy HEX", self.copy_hex).pack(side="top", pady=8)
make_btn("Copy RGB", self.copy_rgb).pack(side="top", pady=8)
make_btn("Copy HSL", self.copy_hsl).pack(side="top", pady=8)
make_btn("About", self.show_about).pack(side="top", pady=20)
Explanation:
We define a helper function make_btn() to avoid repeating code.
command – specifies which function runs when the button is clicked.
Buttons include: Generate, Copy HEX, RGB, HSL, and About.
Step 6: Create the Right Panel (Color Preview)
The right panel will show the generated color and its values:
right = tk.Frame(root, bg=APP_BG)
right.pack(side="right", fill="both", expand=True)
self.result_card = tk.Frame(right, bg=PANEL_BG)
self.result_card.pack(padx=30, pady=40, fill="both", expand=True)
tk.Label(
self.result_card,
text="Color Preview",
bg=PANEL_BG,
fg=TEXT_CLR,
font=("Segoe UI", 16, "bold")
).pack(pady=(20, 10))
self.color_preview = tk.Frame(self.result_card, bg="#333333", width=300, height=200)
self.color_preview.pack(pady=(10, 20))
self.color_preview.pack_propagate(False)
Explanation:
color_preview is a rectangular area showing the current color.
pack_propagate(False) prevents the frame from resizing to fit child widgets.
Step 7: Display Color Values (HEX, RGB, HSL)
self.hex_label = tk.Label(self.result_card, text="HEX: --", bg=PANEL_BG, fg=ACCENT, font=("Segoe UI", 14, "bold"))
self.hex_label.pack(pady=5)
self.rgb_label = tk.Label(self.result_card, text="RGB: --", bg=PANEL_BG, fg=TEXT_CLR, font=("Segoe UI", 14, "bold"))
self.rgb_label.pack(pady=5)
self.hsl_label = tk.Label(self.result_card, text="HSL: --", bg=PANEL_BG, fg=SUBTEXT_CLR, font=("Segoe UI", 14, "bold"))
self.hsl_label.pack(pady=5)
Explanation:
These labels update whenever a new color is generated.
HEX, RGB, and HSL formats are all displayed.
Step 8: Generate Random Colors
Here's the function to generate a random color and update the display:
def generate_color(self):
r = random.randint(0, 255)
g = random.randint(0, 255)
b = random.randint(0, 255)
self.current_color = f"#{r:02X}{g:02X}{b:02X}"
h, l, s = colorsys.rgb_to_hls(r/255, g/255, b/255)
hsl_str = f"{int(h*360)}, {int(s*100)}%, {int(l*100)}%"
self.color_preview.config(bg=self.current_color)
self.hex_label.config(text=f"HEX: {self.current_color}")
self.rgb_label.config(text=f"RGB: {r}, {g}, {b}")
self.hsl_label.config(text=f"HSL: {hsl_str}")
Explanation:
Random values are generated for R, G, B.
Converted to HEX and HSL for display.
Updates the preview frame and labels.
Step 9: Copy to Clipboard Functions
We create functions to copy color values:
def copy_hex(self):
self.root.clipboard_clear()
self.root.clipboard_append(self.current_color)
messagebox.showinfo("Copied", f"{self.current_color} copied to clipboard!")
def copy_rgb(self):
rgb_text = self.rgb_label.cget("text").replace("RGB: ", "")
self.root.clipboard_clear()
self.root.clipboard_append(rgb_text)
messagebox.showinfo("Copied", f"{rgb_text} copied to clipboard!")
def copy_hsl(self):
hsl_text = self.hsl_label.cget("text").replace("HSL: ", "")
self.root.clipboard_clear()
self.root.clipboard_append(hsl_text)
messagebox.showinfo("Copied", f"{hsl_text} copied to clipboard!")
Explanation:
clipboard_clear() removes existing content.
clipboard_append() copies new value.
messagebox.showinfo() gives a confirmation popup.
Step 10: About Dialog
def show_about(self):
messagebox.showinfo(
"About",
"MateTools – Pro Random Color Generator\n\n"
"• Generate random colors instantly\n"
"• View HEX, RGB, and HSL values\n"
"• Copy color values to clipboard\n\n"
"Built by MateTools"
)
Explanation:
Shows information about the app in a pop-up.
Step 11: Run the App
Finally, we run the Tkinter event loop:
if __name__ == "__main__":
root = tk.Tk()
RandomColorGeneratorApp(root)
root.mainloop()
Explanation:
Tk() creates the main window.
mainloop() starts the GUI and waits for user interactions.
✅ Congratulations!
You now have a fully functional Random Color Generator with Tkinter. You can generate colors, view HEX/RGB/HSL values, and copy them with a click.
Top comments (0)