初心者向け No.07

カラーピッカー

RGBスライダーで色を作りHEXコードを表示するカラーピッカー。Scaleウィジェットとリアルタイム更新を学びます。

🎯 難易度: ★☆☆ 📦 ライブラリ: tkinter（標準ライブラリ） ⏱️ 制作時間: 30〜90分
📋 目次

1. アプリ概要

RGBスライダーで色を作りHEXコードを表示するカラーピッカー。Scaleウィジェットとリアルタイム更新を学びます。

このアプリはツールカテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ） で、難易度は ★☆☆ です。

Pythonでは tkinter を使うことで、クロスプラットフォームなGUIアプリを簡単に作成できます。このアプリを通じて、ウィジェットの配置・イベント処理・データ管理など、GUI開発の実践的なスキルを習得できます。

ソースコードは完全な動作状態で提供しており、コピーしてそのまま実行できます。まずは実行して動作を確認し、その後コードを読んで仕組みを理解していきましょう。カスタマイズセクションでは機能拡張のアイデアも紹介しています。

GUIアプリ開発は、プログラミングの楽しさを実感できる最も効果的な学習方法のひとつです。アプリを作ることで、変数・関数・クラス・イベント処理など、プログラミングの重要な概念が自然と身についていきます。このアプリをきっかけに、オリジナルアプリの開発にも挑戦してみてください。

カラーピッカー 起動時の画面
起動時の画面
カラーピッカー 色選択中の画面
色選択中の画面

2. 機能一覧

  • R・G・Bそれぞれのスライダーで色を0〜255の範囲でリアルタイム調整
  • 選択した色のHEXコード（例: #FF8800）を即時表示
  • カラープレビューエリアで選んだ色を大きく確認できる
  • 「コピー」ボタンでHEXコードをクリップボードにコピー
  • 輝度に応じてプレビュー内のテキスト色を自動切替（白/黒）
  • 各スライダーのトラフカラーがR=赤・G=緑・B=青に色分けされており直感的に操作できる

3. 事前準備・環境

ℹ️
動作確認環境

Python 3.10 以上 / Windows・Mac・Linux すべて対応

以下の環境で動作確認しています。

  • Python 3.10 以上
  • OS: Windows 10/11・macOS 12+・Ubuntu 20.04+

4. 完全なソースコード

💡
コードのコピー方法

右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。

✅ 追加インストール不要（標準ライブラリのみ使用）
app007.py
import tkinter as tk
from tkinter import ttk


class App07:
    """カラーピッカー"""

    def __init__(self, root):
        self.root = root
        self.root.title("カラーピッカー")
        self.root.geometry("460x420")
        self.root.configure(bg="#f8f9fc")
        self._build_ui()

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="カラーピッカー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=16)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カラープレビュー
        self.preview = tk.Label(main_frame, bg="#000000", relief=tk.SOLID,
                                width=30, height=4)
        self.preview.pack(fill=tk.X, pady=(0, 12))

        # HEXコード表示
        self.hex_var = tk.StringVar(value="#000000")
        hex_frame = tk.Frame(main_frame, bg="#f8f9fc")
        hex_frame.pack(fill=tk.X, pady=(0, 12))
        tk.Label(hex_frame, text="HEX:", bg="#f8f9fc",
                 font=("Courier", 13, "bold")).pack(side=tk.LEFT)
        self.hex_label = tk.Label(hex_frame, textvariable=self.hex_var,
                                  font=("Courier", 13, "bold"), bg="#f8f9fc", fg="#333")
        self.hex_label.pack(side=tk.LEFT, padx=8)
        ttk.Button(hex_frame, text="コピー", command=self._copy_hex).pack(side=tk.LEFT)

        # RGBスライダー
        slider_bg = "#f8f9fc"
        slider_frame = tk.LabelFrame(main_frame, text="RGB スライダー",
                                     bg=slider_bg, padx=10, pady=10)
        slider_frame.pack(fill=tk.X)

        self.r_var = tk.IntVar(value=0)
        self.g_var = tk.IntVar(value=0)
        self.b_var = tk.IntVar(value=0)

        for row, (label, var, color) in enumerate([
            ("R", self.r_var, "#cc0000"),
            ("G", self.g_var, "#007700"),
            ("B", self.b_var, "#0000cc"),
        ]):
            tk.Label(slider_frame, text=f"{label}:", width=2,
                     bg=slider_bg).grid(row=row, column=0, sticky="w")
            scale = tk.Scale(slider_frame, variable=var, from_=0, to=255,
                             orient=tk.HORIZONTAL, command=lambda v: self._update(),
                             length=280, troughcolor=color, showvalue=True,
                             bg=slider_bg, highlightthickness=0)
            scale.grid(row=row, column=1, padx=8, sticky="ew", pady=2)
        slider_frame.columnconfigure(1, weight=1)

        self._update()

    def _update(self):
        r, g, b = self.r_var.get(), self.g_var.get(), self.b_var.get()
        hex_color = f"#{r:02x}{g:02x}{b:02x}"
        self.hex_var.set(hex_color.upper())
        self.preview.config(bg=hex_color)
        # 輝度に応じてテキスト色を変える
        brightness = 0.299 * r + 0.587 * g + 0.114 * b
        fg = "black" if brightness > 128 else "white"
        self.preview.config(fg=fg, text=hex_color.upper(),
                            font=("Courier", 16, "bold"))

    def _copy_hex(self):
        self.root.clipboard_clear()
        self.root.clipboard_append(self.hex_var.get())


if __name__ == "__main__":
    root = tk.Tk()
    app = App07(root)
    root.mainloop()

5. コード解説

カラーピッカーのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。

クラス設計とコンストラクタ

App07クラスにアプリの全機能をまとめています。__init__メソッドでウィンドウサイズ・背景色などの基本設定を行い、_build_ui()でUI構築を担当します。_update()はスライダー変更のたびに呼ばれ、プレビューとHEXコードをリアルタイムで更新します。

import tkinter as tk
from tkinter import ttk


class App07:
    """カラーピッカー"""

    def __init__(self, root):
        self.root = root
        self.root.title("カラーピッカー")
        self.root.geometry("460x420")
        self.root.configure(bg="#f8f9fc")
        self._build_ui()

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="カラーピッカー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=16)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カラープレビュー
        self.preview = tk.Label(main_frame, bg="#000000", relief=tk.SOLID,
                                width=30, height=4)
        self.preview.pack(fill=tk.X, pady=(0, 12))

        # HEXコード表示
        self.hex_var = tk.StringVar(value="#000000")
        hex_frame = tk.Frame(main_frame, bg="#f8f9fc")
        hex_frame.pack(fill=tk.X, pady=(0, 12))
        tk.Label(hex_frame, text="HEX:", bg="#f8f9fc",
                 font=("Courier", 13, "bold")).pack(side=tk.LEFT)
        self.hex_label = tk.Label(hex_frame, textvariable=self.hex_var,
                                  font=("Courier", 13, "bold"), bg="#f8f9fc", fg="#333")
        self.hex_label.pack(side=tk.LEFT, padx=8)
        ttk.Button(hex_frame, text="コピー", command=self._copy_hex).pack(side=tk.LEFT)

        # RGBスライダー
        slider_bg = "#f8f9fc"
        slider_frame = tk.LabelFrame(main_frame, text="RGB スライダー",
                                     bg=slider_bg, padx=10, pady=10)
        slider_frame.pack(fill=tk.X)

        self.r_var = tk.IntVar(value=0)
        self.g_var = tk.IntVar(value=0)
        self.b_var = tk.IntVar(value=0)

        for row, (label, var, color) in enumerate([
            ("R", self.r_var, "#cc0000"),
            ("G", self.g_var, "#007700"),
            ("B", self.b_var, "#0000cc"),
        ]):
            tk.Label(slider_frame, text=f"{label}:", width=2,
                     bg=slider_bg).grid(row=row, column=0, sticky="w")
            scale = tk.Scale(slider_frame, variable=var, from_=0, to=255,
                             orient=tk.HORIZONTAL, command=lambda v: self._update(),
                             length=280, troughcolor=color, showvalue=True,
                             bg=slider_bg, highlightthickness=0)
            scale.grid(row=row, column=1, padx=8, sticky="ew", pady=2)
        slider_frame.columnconfigure(1, weight=1)

        self._update()

    def _update(self):
        r, g, b = self.r_var.get(), self.g_var.get(), self.b_var.get()
        hex_color = f"#{r:02x}{g:02x}{b:02x}"
        self.hex_var.set(hex_color.upper())
        self.preview.config(bg=hex_color)
        # 輝度に応じてテキスト色を変える
        brightness = 0.299 * r + 0.587 * g + 0.114 * b
        fg = "black" if brightness > 128 else "white"
        self.preview.config(fg=fg, text=hex_color.upper(),
                            font=("Courier", 16, "bold"))

    def _copy_hex(self):
        self.root.clipboard_clear()
        self.root.clipboard_append(self.hex_var.get())


if __name__ == "__main__":
    root = tk.Tk()
    app = App07(root)
    root.mainloop()

LabelFrameによるRGBスライダーエリア

tk.LabelFrame を使い「RGB スライダー」というタイトル付きの枠で3本のスライダーをまとめています。columnconfigure(1, weight=1) でスライダー列をウィンドウ幅に合わせて伸縮させることで、リサイズ時も見た目が崩れません。

import tkinter as tk
from tkinter import ttk


class App07:
    """カラーピッカー"""

    def __init__(self, root):
        self.root = root
        self.root.title("カラーピッカー")
        self.root.geometry("460x420")
        self.root.configure(bg="#f8f9fc")
        self._build_ui()

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="カラーピッカー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=16)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カラープレビュー
        self.preview = tk.Label(main_frame, bg="#000000", relief=tk.SOLID,
                                width=30, height=4)
        self.preview.pack(fill=tk.X, pady=(0, 12))

        # HEXコード表示
        self.hex_var = tk.StringVar(value="#000000")
        hex_frame = tk.Frame(main_frame, bg="#f8f9fc")
        hex_frame.pack(fill=tk.X, pady=(0, 12))
        tk.Label(hex_frame, text="HEX:", bg="#f8f9fc",
                 font=("Courier", 13, "bold")).pack(side=tk.LEFT)
        self.hex_label = tk.Label(hex_frame, textvariable=self.hex_var,
                                  font=("Courier", 13, "bold"), bg="#f8f9fc", fg="#333")
        self.hex_label.pack(side=tk.LEFT, padx=8)
        ttk.Button(hex_frame, text="コピー", command=self._copy_hex).pack(side=tk.LEFT)

        # RGBスライダー
        slider_bg = "#f8f9fc"
        slider_frame = tk.LabelFrame(main_frame, text="RGB スライダー",
                                     bg=slider_bg, padx=10, pady=10)
        slider_frame.pack(fill=tk.X)

        self.r_var = tk.IntVar(value=0)
        self.g_var = tk.IntVar(value=0)
        self.b_var = tk.IntVar(value=0)

        for row, (label, var, color) in enumerate([
            ("R", self.r_var, "#cc0000"),
            ("G", self.g_var, "#007700"),
            ("B", self.b_var, "#0000cc"),
        ]):
            tk.Label(slider_frame, text=f"{label}:", width=2,
                     bg=slider_bg).grid(row=row, column=0, sticky="w")
            scale = tk.Scale(slider_frame, variable=var, from_=0, to=255,
                             orient=tk.HORIZONTAL, command=lambda v: self._update(),
                             length=280, troughcolor=color, showvalue=True,
                             bg=slider_bg, highlightthickness=0)
            scale.grid(row=row, column=1, padx=8, sticky="ew", pady=2)
        slider_frame.columnconfigure(1, weight=1)

        self._update()

    def _update(self):
        r, g, b = self.r_var.get(), self.g_var.get(), self.b_var.get()
        hex_color = f"#{r:02x}{g:02x}{b:02x}"
        self.hex_var.set(hex_color.upper())
        self.preview.config(bg=hex_color)
        # 輝度に応じてテキスト色を変える
        brightness = 0.299 * r + 0.587 * g + 0.114 * b
        fg = "black" if brightness > 128 else "white"
        self.preview.config(fg=fg, text=hex_color.upper(),
                            font=("Courier", 16, "bold"))

    def _copy_hex(self):
        self.root.clipboard_clear()
        self.root.clipboard_append(self.hex_var.get())


if __name__ == "__main__":
    root = tk.Tk()
    app = App07(root)
    root.mainloop()

Scaleウィジェットとリアルタイム更新

tk.Scale の command 引数に lambda v: self._update() を渡すことで、スライダーを動かすたびに _update() が呼ばれます。troughcolor にR/G/Bそれぞれの色を指定することで、スライダーのトラック色が直感的なガイドになります。

import tkinter as tk
from tkinter import ttk


class App07:
    """カラーピッカー"""

    def __init__(self, root):
        self.root = root
        self.root.title("カラーピッカー")
        self.root.geometry("460x420")
        self.root.configure(bg="#f8f9fc")
        self._build_ui()

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="カラーピッカー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=16)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カラープレビュー
        self.preview = tk.Label(main_frame, bg="#000000", relief=tk.SOLID,
                                width=30, height=4)
        self.preview.pack(fill=tk.X, pady=(0, 12))

        # HEXコード表示
        self.hex_var = tk.StringVar(value="#000000")
        hex_frame = tk.Frame(main_frame, bg="#f8f9fc")
        hex_frame.pack(fill=tk.X, pady=(0, 12))
        tk.Label(hex_frame, text="HEX:", bg="#f8f9fc",
                 font=("Courier", 13, "bold")).pack(side=tk.LEFT)
        self.hex_label = tk.Label(hex_frame, textvariable=self.hex_var,
                                  font=("Courier", 13, "bold"), bg="#f8f9fc", fg="#333")
        self.hex_label.pack(side=tk.LEFT, padx=8)
        ttk.Button(hex_frame, text="コピー", command=self._copy_hex).pack(side=tk.LEFT)

        # RGBスライダー
        slider_bg = "#f8f9fc"
        slider_frame = tk.LabelFrame(main_frame, text="RGB スライダー",
                                     bg=slider_bg, padx=10, pady=10)
        slider_frame.pack(fill=tk.X)

        self.r_var = tk.IntVar(value=0)
        self.g_var = tk.IntVar(value=0)
        self.b_var = tk.IntVar(value=0)

        for row, (label, var, color) in enumerate([
            ("R", self.r_var, "#cc0000"),
            ("G", self.g_var, "#007700"),
            ("B", self.b_var, "#0000cc"),
        ]):
            tk.Label(slider_frame, text=f"{label}:", width=2,
                     bg=slider_bg).grid(row=row, column=0, sticky="w")
            scale = tk.Scale(slider_frame, variable=var, from_=0, to=255,
                             orient=tk.HORIZONTAL, command=lambda v: self._update(),
                             length=280, troughcolor=color, showvalue=True,
                             bg=slider_bg, highlightthickness=0)
            scale.grid(row=row, column=1, padx=8, sticky="ew", pady=2)
        slider_frame.columnconfigure(1, weight=1)

        self._update()

    def _update(self):
        r, g, b = self.r_var.get(), self.g_var.get(), self.b_var.get()
        hex_color = f"#{r:02x}{g:02x}{b:02x}"
        self.hex_var.set(hex_color.upper())
        self.preview.config(bg=hex_color)
        # 輝度に応じてテキスト色を変える
        brightness = 0.299 * r + 0.587 * g + 0.114 * b
        fg = "black" if brightness > 128 else "white"
        self.preview.config(fg=fg, text=hex_color.upper(),
                            font=("Courier", 16, "bold"))

    def _copy_hex(self):
        self.root.clipboard_clear()
        self.root.clipboard_append(self.hex_var.get())


if __name__ == "__main__":
    root = tk.Tk()
    app = App07(root)
    root.mainloop()

クリップボードへのHEXコードコピー

_copy_hex()メソッドではroot.clipboard_clear()で既存内容を消去してからclipboard_append()でHEXコードを書き込みます。tkinterのclipboard機能は標準ライブラリだけで実現でき、外部ライブラリは不要です。

import tkinter as tk
from tkinter import ttk


class App07:
    """カラーピッカー"""

    def __init__(self, root):
        self.root = root
        self.root.title("カラーピッカー")
        self.root.geometry("460x420")
        self.root.configure(bg="#f8f9fc")
        self._build_ui()

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="カラーピッカー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=16)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カラープレビュー
        self.preview = tk.Label(main_frame, bg="#000000", relief=tk.SOLID,
                                width=30, height=4)
        self.preview.pack(fill=tk.X, pady=(0, 12))

        # HEXコード表示
        self.hex_var = tk.StringVar(value="#000000")
        hex_frame = tk.Frame(main_frame, bg="#f8f9fc")
        hex_frame.pack(fill=tk.X, pady=(0, 12))
        tk.Label(hex_frame, text="HEX:", bg="#f8f9fc",
                 font=("Courier", 13, "bold")).pack(side=tk.LEFT)
        self.hex_label = tk.Label(hex_frame, textvariable=self.hex_var,
                                  font=("Courier", 13, "bold"), bg="#f8f9fc", fg="#333")
        self.hex_label.pack(side=tk.LEFT, padx=8)
        ttk.Button(hex_frame, text="コピー", command=self._copy_hex).pack(side=tk.LEFT)

        # RGBスライダー
        slider_bg = "#f8f9fc"
        slider_frame = tk.LabelFrame(main_frame, text="RGB スライダー",
                                     bg=slider_bg, padx=10, pady=10)
        slider_frame.pack(fill=tk.X)

        self.r_var = tk.IntVar(value=0)
        self.g_var = tk.IntVar(value=0)
        self.b_var = tk.IntVar(value=0)

        for row, (label, var, color) in enumerate([
            ("R", self.r_var, "#cc0000"),
            ("G", self.g_var, "#007700"),
            ("B", self.b_var, "#0000cc"),
        ]):
            tk.Label(slider_frame, text=f"{label}:", width=2,
                     bg=slider_bg).grid(row=row, column=0, sticky="w")
            scale = tk.Scale(slider_frame, variable=var, from_=0, to=255,
                             orient=tk.HORIZONTAL, command=lambda v: self._update(),
                             length=280, troughcolor=color, showvalue=True,
                             bg=slider_bg, highlightthickness=0)
            scale.grid(row=row, column=1, padx=8, sticky="ew", pady=2)
        slider_frame.columnconfigure(1, weight=1)

        self._update()

    def _update(self):
        r, g, b = self.r_var.get(), self.g_var.get(), self.b_var.get()
        hex_color = f"#{r:02x}{g:02x}{b:02x}"
        self.hex_var.set(hex_color.upper())
        self.preview.config(bg=hex_color)
        # 輝度に応じてテキスト色を変える
        brightness = 0.299 * r + 0.587 * g + 0.114 * b
        fg = "black" if brightness > 128 else "white"
        self.preview.config(fg=fg, text=hex_color.upper(),
                            font=("Courier", 16, "bold"))

    def _copy_hex(self):
        self.root.clipboard_clear()
        self.root.clipboard_append(self.hex_var.get())


if __name__ == "__main__":
    root = tk.Tk()
    app = App07(root)
    root.mainloop()

HEXコード生成と輝度判定

_update()メソッドでは f"#{r:02x}{g:02x}{b:02x}" の書式指定でHEXコードを生成します。輝度計算（ITU-R BT.601 係数: 0.299R + 0.587G + 0.114B）で128を閾値として文字色を白/黒に自動切替し、どんな背景色でも読みやすいテキストを表示します。

import tkinter as tk
from tkinter import ttk


class App07:
    """カラーピッカー"""

    def __init__(self, root):
        self.root = root
        self.root.title("カラーピッカー")
        self.root.geometry("460x420")
        self.root.configure(bg="#f8f9fc")
        self._build_ui()

    def _build_ui(self):
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
        title_frame.pack(fill=tk.X)
        tk.Label(title_frame, text="カラーピッカー",
                 font=("Noto Sans JP", 16, "bold"),
                 bg="#3776ab", fg="white").pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=16)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # カラープレビュー
        self.preview = tk.Label(main_frame, bg="#000000", relief=tk.SOLID,
                                width=30, height=4)
        self.preview.pack(fill=tk.X, pady=(0, 12))

        # HEXコード表示
        self.hex_var = tk.StringVar(value="#000000")
        hex_frame = tk.Frame(main_frame, bg="#f8f9fc")
        hex_frame.pack(fill=tk.X, pady=(0, 12))
        tk.Label(hex_frame, text="HEX:", bg="#f8f9fc",
                 font=("Courier", 13, "bold")).pack(side=tk.LEFT)
        self.hex_label = tk.Label(hex_frame, textvariable=self.hex_var,
                                  font=("Courier", 13, "bold"), bg="#f8f9fc", fg="#333")
        self.hex_label.pack(side=tk.LEFT, padx=8)
        ttk.Button(hex_frame, text="コピー", command=self._copy_hex).pack(side=tk.LEFT)

        # RGBスライダー
        slider_bg = "#f8f9fc"
        slider_frame = tk.LabelFrame(main_frame, text="RGB スライダー",
                                     bg=slider_bg, padx=10, pady=10)
        slider_frame.pack(fill=tk.X)

        self.r_var = tk.IntVar(value=0)
        self.g_var = tk.IntVar(value=0)
        self.b_var = tk.IntVar(value=0)

        for row, (label, var, color) in enumerate([
            ("R", self.r_var, "#cc0000"),
            ("G", self.g_var, "#007700"),
            ("B", self.b_var, "#0000cc"),
        ]):
            tk.Label(slider_frame, text=f"{label}:", width=2,
                     bg=slider_bg).grid(row=row, column=0, sticky="w")
            scale = tk.Scale(slider_frame, variable=var, from_=0, to=255,
                             orient=tk.HORIZONTAL, command=lambda v: self._update(),
                             length=280, troughcolor=color, showvalue=True,
                             bg=slider_bg, highlightthickness=0)
            scale.grid(row=row, column=1, padx=8, sticky="ew", pady=2)
        slider_frame.columnconfigure(1, weight=1)

        self._update()

    def _update(self):
        r, g, b = self.r_var.get(), self.g_var.get(), self.b_var.get()
        hex_color = f"#{r:02x}{g:02x}{b:02x}"
        self.hex_var.set(hex_color.upper())
        self.preview.config(bg=hex_color)
        # 輝度に応じてテキスト色を変える
        brightness = 0.299 * r + 0.587 * g + 0.114 * b
        fg = "black" if brightness > 128 else "white"
        self.preview.config(fg=fg, text=hex_color.upper(),
                            font=("Courier", 16, "bold"))

    def _copy_hex(self):
        self.root.clipboard_clear()
        self.root.clipboard_append(self.hex_var.get())


if __name__ == "__main__":
    root = tk.Tk()
    app = App07(root)
    root.mainloop()

6. ステップバイステップガイド

このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。

  1. 1
    ファイルを作成する

    新しいファイルを作成して app007.py と保存します。

  2. 2
    クラスの骨格を作る

    App07クラスを定義し、__init__でウィンドウサイズ（460×420）・背景色・タイトルを設定して_build_ui()を呼び出す最小構成を作ります。

  3. 3
    タイトルバーとカラープレビューを作る

    Frameで青いタイトルバーを作り、その下にカラープレビュー用のLabelを配置します。

  4. 4
    HEXコード表示とコピーボタンを作る

    StringVar・Label・ttk.Buttonを横並びに配置し、コピーボタンのcommandに_copy_hex()を設定します。

  5. 5
    RGBスライダーを実装する

    LabelFrameの中にR/G/B用のIntVarとScaleを3行並べます。各Scaleのtroughcolorに対応する色を指定し、commandでリアルタイム更新を繋ぎます。

  6. 6
    _update()メソッドを実装する

    R・G・BのIntVar値からHEXコードを生成し、プレビューLabelの背景色と表示テキストを更新します。輝度計算で白/黒の文字色を自動選択する処理も追加します。

  7. 7
    動作確認をする

    python app007.py で実行し、スライダーを動かすとプレビューとHEXコードがリアルタイムで変わることを確認します。コピーボタンでHEXコードがクリップボードに入るかもテストします。

7. カスタマイズアイデア

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。

💡 お気に入りカラーを保存する

「保存」ボタンを追加し、気に入った色のHEXコードをリストに保存する機能を実装しましょう。Listboxウィジェットで一覧表示し、クリックで色を再現できるようにします。

💡 HSL・HSVカラーモードを追加する

colorsysモジュール（標準ライブラリ）を使うとRGB⇔HSL/HSV変換ができます。ラジオボタンで表示モードを切り替えられるようにしてみましょう。

💡 HEXコードから色を直接入力する

HEX欄をEntryウィジェットに変更し、ユーザーが「#FF8800」のように直接入力するとスライダーが連動して動く双方向バインドを実装してみましょう。

8. よくある問題と解決法

❌ スライダーを動かしても色が更新されない

原因：Scale の command に渡す関数のシグネチャが間違っています。command は value を引数に取るので lambda v: self._update() のように受け取る必要があります。

解決法：command=lambda v: self._update() の形式で記述してください。

❌ 「Noto Sans JP」フォントが適用されない

原因：システムに「Noto Sans JP」がインストールされていない場合があります。

解決法：font=("Noto Sans JP", 16, "bold") を font=("Yu Gothic", 16, "bold")（Windows）や font=("Hiragino Sans", 16, "bold")（Mac）に変更してください。

❌ clipboard_append でコピーしても貼り付けられない

原因：tkinterのクリップボードはウィンドウが閉じると消えてしまうことがあります。

解決法：root.mainloop() の前に root.clipboard_clear() と root.update() を呼んでおくか、pyperclipライブラリを使うとより安定します。

9. 練習問題

アプリの理解を深めるための練習問題です。難易度順に挑戦してみてください。

  1. 課題1：RGB値をラベルに表示する

    スライダーの下に「R: 255, G: 128, B: 0」のようにRGB値を文字で表示するLabelを追加してみましょう。_update()メソッドの中で更新します。

  2. 課題2：補色を自動表示する

    現在の色の補色（R=255-r, G=255-g, B=255-b）を別のプレビューエリアに並べて表示する機能を追加してみましょう。

  3. 課題3：色履歴パレットを作る

    「追加」ボタンを押すと現在の色をパレットに保存し、Canvas上に小さな色見本として並べて表示する機能を実装してみましょう。

🚀
次に挑戦するアプリ

このアプリをマスターしたら、次のNo.08に挑戦しましょう。