カラーコード変換ツール

1. アプリ概要

色名・RGB値・HEXコードを相互変換するカラーコードコンバーター。リアルタイムプレビューとクリップボードコピー機能付き。

このアプリはconverterカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter、難易度は ★☆☆ 易しい です。

このアプリは「変換ツール」カテゴリです。形式変換ツールは入力・処理・出力の三層を明示的に書く好材料で、エラー入力の扱いやバリデーションの基本を体験できます。tkinter を活かして実装するこの構造は、他のアプリにも応用が効きます。

コードを読む前に実行することをおすすめします。動いている挙動を先に把握しておくと、解説で出てくる関数や処理がどこに対応するかが頭に入りやすくなります。

応用のヒントは、機能を 1 つ増やす・見た目を整える・例外を一つでも丁寧に扱う、のいずれかから始めるのがおすすめです。

2. 機能一覧

• 「色名→変換」ボタン（_on_name_change()）・「HEX→変換」ボタン（_on_hex_change()）・「RGB→変換」ボタン（_on_rgb_change()）・「HSL→変換」ボタン（_on_hsl_change()）・「HEXをコピー」ボタン（_copy()）・「RGB(r,g,b)をコピー」ボタン（_copy()）・「HSLをコピー」ボタン（_copy()）で操作
• キー <Return> から _on_hex_change() を実行
• キー <KeyRelease> から _on_hex_change() を実行
• キー <Return> から _on_rgb_change() を実行
• キー <KeyRelease> から _on_rgb_change() を実行
• キー <Return> から _on_hsl_change() を実行
• messagebox.showerror()・messagebox.showinfo() によるダイアログ通知
• ウィンドウはタイトル「カラーコード変換ツール」・サイズ 620x560 で起動
• CSS で使う HSL 形式（hsl(204, 70%, 53%)）でも表示・コピーできるので、色相だけずらした配色をそのままスタイルシートに貼れます
• HEX と RGB の入力欄は Enter でも、入力と同時（1文字打つたび）でも変換されます。ボタンを押さなくてもプレビューの色が追従します

3. 事前準備・環境

Windows 11（実機）で起動と基本操作を確認しています（全機能の網羅テストではありません）。Linux Mint 22.3（仮想マシン）では起動と画面表示を確認しました。macOS は標準ライブラリの範囲で動作する想定ですが、未検証です。

• Python 3.10 以上
• OS: Windows 11（実機で起動・基本操作を確認）・Linux Mint 22.3（仮想マシンで起動・画面表示を確認）

4. 完全なソースコード

import colorsys
import re
import tkinter as tk
from tkinter import ttk, messagebox


class App053:
    """カラーコード変換ツール"""

    # tkinter が認識する代表的な色名
    COMMON_COLORS = [
        "red", "green", "blue", "yellow", "cyan", "magenta",
        "white", "black", "gray", "orange", "purple", "pink",
        "brown", "navy", "lime", "teal", "gold", "silver",
        "maroon", "olive",
    ]

    def __init__(self, root):
        self.root = root
        self.root.title("カラーコード変換ツール")
        self.root.geometry("620x560")
        self.root.configure(bg="#f8f9fc")
        self._build_ui()
        self._on_hex_change()

    def _build_ui(self):
        """UIを構築する"""
        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 = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=14)
        main.pack(fill=tk.BOTH, expand=True)

        form = ttk.LabelFrame(main, text="入力（いずれか変更すれば連動）", padding=12)
        form.pack(fill=tk.X)

        # 色名
        ttk.Label(form, text="色名:").grid(row=0, column=0, sticky="w", pady=4)
        self.name_var = tk.StringVar(value="red")
        name_combo = ttk.Combobox(form, textvariable=self.name_var,
                                   values=self.COMMON_COLORS, width=14)
        name_combo.grid(row=0, column=1, padx=6, pady=4, sticky="w")
        ttk.Button(form, text="色名→変換", command=self._on_name_change
                   ).grid(row=0, column=2, padx=4)

        # HEX
        ttk.Label(form, text="HEX:").grid(row=1, column=0, sticky="w", pady=4)
        self.hex_var = tk.StringVar(value="#FF0000")
        hex_entry = ttk.Entry(form, textvariable=self.hex_var, width=14)
        hex_entry.grid(row=1, column=1, padx=6, pady=4, sticky="w")
        # Enter は正規化つき変換、入力中（KeyRelease）はダイアログを出さない静かな変換
        hex_entry.bind("<Return>", self._on_hex_change)
        hex_entry.bind("<KeyRelease>", lambda e: self._on_hex_change(quiet=True))
        ttk.Button(form, text="HEX→変換", command=self._on_hex_change
                   ).grid(row=1, column=2, padx=4)

        # RGB
        ttk.Label(form, text="RGB:").grid(row=2, column=0, sticky="w", pady=4)
        rgb_frame = tk.Frame(form, bg="#f8f9fc")
        rgb_frame.grid(row=2, column=1, padx=6, pady=4, sticky="w")
        self.r_var = tk.StringVar(value="255")
        self.g_var = tk.StringVar(value="0")
        self.b_var = tk.StringVar(value="0")
        for var, lbl in [(self.r_var, "R"), (self.g_var, "G"), (self.b_var, "B")]:
            tk.Label(rgb_frame, text=lbl, bg="#f8f9fc").pack(side=tk.LEFT)
            entry = ttk.Entry(rgb_frame, textvariable=var, width=4)
            entry.pack(side=tk.LEFT, padx=(0, 6))
            entry.bind("<Return>", self._on_rgb_change)
            entry.bind("<KeyRelease>", lambda e: self._on_rgb_change(quiet=True))
        ttk.Button(form, text="RGB→変換", command=self._on_rgb_change
                   ).grid(row=2, column=2, padx=4)

        # HSL（CSS と同じ H, S, L の順で表示・入力する）
        ttk.Label(form, text="HSL:").grid(row=3, column=0, sticky="w", pady=4)
        self.hsl_var = tk.StringVar(value="hsl(0, 100%, 50%)")
        hsl_entry = ttk.Entry(form, textvariable=self.hsl_var, width=20)
        hsl_entry.grid(row=3, column=1, padx=6, pady=4, sticky="w")
        hsl_entry.bind("<Return>", self._on_hsl_change)
        ttk.Button(form, text="HSL→変換", command=self._on_hsl_change
                   ).grid(row=3, column=2, padx=4)

        # プレビュー
        preview_frame = ttk.LabelFrame(main, text="プレビュー", padding=10)
        preview_frame.pack(fill=tk.BOTH, expand=True, pady=(8, 0))
        self.canvas = tk.Canvas(preview_frame, height=120, bg="#FF0000",
                                 relief=tk.FLAT, highlightthickness=1,
                                 highlightbackground="#cccccc")
        self.canvas.pack(fill=tk.BOTH, expand=True)
        self.preview_label = tk.Label(preview_frame, text="",
                                       font=("Noto Sans JP", 11), bg="white")
        self.preview_label.pack(fill=tk.X, pady=(6, 0))

        # コピーボタン
        copy = tk.Frame(main, bg="#f8f9fc")
        copy.pack(fill=tk.X, pady=(8, 0))
        ttk.Button(copy, text="HEXをコピー",
                   command=lambda: self._copy(self.hex_var.get())).pack(side=tk.LEFT, padx=2)
        ttk.Button(copy, text="RGB(r,g,b)をコピー",
                   command=lambda: self._copy(
                       f"rgb({self.r_var.get()},{self.g_var.get()},{self.b_var.get()})"
                   )).pack(side=tk.LEFT, padx=2)
        ttk.Button(copy, text="HSLをコピー",
                   command=lambda: self._copy(self.hsl_var.get())).pack(side=tk.LEFT, padx=2)

    @staticmethod
    def _hex_to_rgb(hex_str):
        """#RRGGBB / #RGB を (r, g, b) に変換"""
        s = hex_str.strip().lstrip("#")
        if len(s) == 3:
            s = "".join(ch * 2 for ch in s)
        if not re.fullmatch(r"[0-9A-Fa-f]{6}", s):
            raise ValueError("HEXは #RRGGBB 形式で入力してください")
        return int(s[0:2], 16), int(s[2:4], 16), int(s[4:6], 16)

    @staticmethod
    def _rgb_to_hex(r, g, b):
        """(r,g,b) を #RRGGBB に"""
        return f"#{r:02X}{g:02X}{b:02X}"

    @staticmethod
    def _rgb_to_hsl(r, g, b):
        """(r,g,b) を (H:0〜360, S:0〜100, L:0〜100) に変換

        colorsys.rgb_to_hls() の戻り値は H, L, S の順（真ん中が L）。
        CSS の hsl() は H, S, L の順なので、ここで並べ替えてから返す。
        """
        h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)
        return round(h * 360), round(s * 100), round(l * 100)

    @staticmethod
    def _hsl_to_rgb(h, s, l):
        """(H:0〜360, S:0〜100, L:0〜100) を (r,g,b) に変換

        引数は CSS と同じ H, S, L の順。colorsys.hls_to_rgb() へ渡すときに
        L と S を入れ替える（第2引数が L・第3引数が S）。
        """
        r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
        return round(r * 255), round(g * 255), round(b * 255)

    def _on_name_change(self):
        """色名 → HEX/RGB 変換"""
        name = self.name_var.get().strip()
        if not name:
            return
        try:
            # tkinter の winfo_rgb は 16bit 値を返す
            r16, g16, b16 = self.root.winfo_rgb(name)
            r, g, b = r16 // 257, g16 // 257, b16 // 257
        except tk.TclError:
            messagebox.showerror("エラー", f"未知の色名: {name}")
            return
        self.r_var.set(str(r))
        self.g_var.set(str(g))
        self.b_var.set(str(b))
        self.hex_var.set(self._rgb_to_hex(r, g, b))
        self._update_preview()

    def _on_hex_change(self, event=None, quiet=False):
        """HEX → RGB 変換（quiet=True では入力途中とみなしダイアログを出さない）"""
        try:
            r, g, b = self._hex_to_rgb(self.hex_var.get())
        except ValueError as e:
            if not quiet:
                messagebox.showerror("エラー", str(e))
            return
        self.r_var.set(str(r))
        self.g_var.set(str(g))
        self.b_var.set(str(b))
        if not quiet:
            # 入力中に書き換えるとカーソルが飛ぶので、正規化はボタン・Enter のときだけ
            self.hex_var.set(self._rgb_to_hex(r, g, b))
        self._update_preview()

    def _on_rgb_change(self, event=None, quiet=False):
        """RGB → HEX 変換（quiet=True では入力途中とみなしダイアログを出さない）"""
        try:
            r = int(self.r_var.get())
            g = int(self.g_var.get())
            b = int(self.b_var.get())
            for v in (r, g, b):
                if not (0 <= v <= 255):
                    raise ValueError
        except ValueError:
            if not quiet:
                messagebox.showerror("エラー", "RGB は各 0〜255 の整数で入力してください")
            return
        self.hex_var.set(self._rgb_to_hex(r, g, b))
        self._update_preview()

    def _on_hsl_change(self, event=None):
        """HSL → RGB/HEX 変換（hsl(204, 70%, 53%) と 204,70,53 の両方を受け付ける）"""
        nums = re.findall(r"\d+(?:\.\d+)?", self.hsl_var.get())
        if len(nums) < 3:
            messagebox.showerror("エラー", "HSL は hsl(204, 70%, 53%) の形式で入力してください")
            return
        h = float(nums[0]) % 360
        s = min(100.0, float(nums[1]))
        l = min(100.0, float(nums[2]))
        r, g, b = self._hsl_to_rgb(h, s, l)
        self.r_var.set(str(r))
        self.g_var.set(str(g))
        self.b_var.set(str(b))
        self.hex_var.set(self._rgb_to_hex(r, g, b))
        self._update_preview()

    def _update_preview(self):
        """プレビュー領域とHSL表示を更新"""
        try:
            r, g, b = self._hex_to_rgb(self.hex_var.get())
        except ValueError:
            return
        hex_v = self._rgb_to_hex(r, g, b)
        try:
            self.canvas.configure(bg=hex_v)
        except tk.TclError:
            return
        h, s, l = self._rgb_to_hsl(r, g, b)
        self.hsl_var.set(f"hsl({h}, {s}%, {l}%)")
        self.preview_label.configure(
            text=f"HEX={hex_v}   RGB=({r}, {g}, {b})   HSL=hsl({h}, {s}%, {l}%)"
        )

    def _copy(self, text):
        """クリップボードへコピー"""
        self.root.clipboard_clear()
        self.root.clipboard_append(text)
        self.root.update()
        messagebox.showinfo("コピー", f"クリップボードにコピーしました:\n{text}")


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

5. コード解説

カラーコード変換ツールのコードを、実際に書かれている実装に沿って解説します。

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

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

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

   新しいファイルを作成して app053.py と保存します。使うのは colorsys・re・tkinter だけなので、追加インストールは不要です。

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

   App053 クラスを定義し、__init__ と、末尾の root = tk.Tk() ～ mainloop() の最小構成を書いて、まず空のウィンドウが出ることを確認します。

3. 3
   ウィンドウを設定する

   title("カラーコード変換ツール")・geometry("620x560")・configure(bg="#f8f9fc") をコンストラクタで設定します。

4. 4
   画面部品を並べる

   _build_ui() の中で、tk.Frame×4・tk.Label×2（ほかにループでも生成）・ttk.LabelFrame×2・ttk.Label×4・ttk.Combobox・ttk.Button×7・ttk.Entry×2（ほかにループでも生成）・tk.Canvas を作って配置します（掲載コードと同じ並び順で書くとレイアウトが一致します）。まず表示だけ確認しましょう。

5. 5
   イベントを接続する

   「2. 機能一覧」で挙げた各ボタンを command= で対応するメソッド（_on_name_change()・_on_hex_change()・_on_rgb_change()・_on_hsl_change()・_copy()・_copy()・_copy()）につなぎます。bind("<Return>", ...)・bind("<KeyRelease>", ...)・bind("<Return>", ...)・bind("<KeyRelease>", ...)・bind("<Return>", ...) の登録も忘れずに。

6. 6
   中心になるメソッドを実装する

   アプリの本体である _on_name_change()（17行）・_on_hex_change()（15行）・_on_rgb_change()（15行）など を実装します。

7. 7
   動作確認する

   python app053.py で起動し、各ボタンが反応すること・キー操作（<Return>・<KeyRelease>・<Return>・<KeyRelease>・<Return>）が効くことを確認します。

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

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。

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

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。

1. 課題1：色名をプルダウンで選んだ瞬間に変換する

   色名の一覧から選んでも、「色名→変換」を押すまで何も起きません。選んだ時点で HEX・RGB・プレビューが変わるようにしましょう。

   期待結果：プルダウンから blue を選ぶ。いまは赤のままだが、直したあとは選んだ瞬間に HEX が #0000FF になり、プレビューが青に変わる。

   合格条件

   • 一覧から色を選ぶと、その場で HEX・RGB・プレビューが変わる
   • 「色名→変換」ボタンは、これまでどおり使える
   • 存在しない色名を打ってボタンを押すと、いままでどおりエラーが出る

   ヒント①（どこを触るか）: 触るのは _build_ui() の1か所です。name_combo.grid(...) のすぐ下に bind を1行足します。_on_name_change() の中身は変えません。
   ヒント②（使うもの）: name_combo.bind("<<ComboboxSelected>>", lambda e: self._on_name_change()) と書きます。HEX 欄の hex_entry.bind("<KeyRelease>", lambda e: self._on_hex_change(quiet=True)) が同じ書き方の手本です。
   つまずきやすい点: lambda を挟まず self._on_name_change をそのまま渡すと、bind が渡すイベントを受け取れず TypeError になります。<<ComboboxSelected>> が発火するのは一覧から選んだときだけで、キーボードで打ち込んでいる途中は反応しません。

2. 課題2：プレビューの文字色を明るさで切り替える

   プレビュー下の数値表示は白背景に固定で、選んだ色との関係が見えません。ラベルの背景を選んだ色にして、明るさに応じて文字を黒か白へ切り替えましょう。

   期待結果：#000000 を入れるとラベルが黒背景に白文字、#FFFF00 を入れると黄色背景に黒文字で表示される。

   合格条件

   • ラベルの背景が、いま選んでいる色と同じになる
   • 暗い色では白文字、明るい色では黒文字になる
   • HEX・RGB・HSL の数値表示の中身は変わらない

   ヒント①（どこを触るか）: 触るのは _update_preview() の末尾、self.preview_label.configure(...) の1か所です。self.canvas.configure(bg=hex_v) はそのまま残します。
   ヒント②（使うもの）: 明るさは _update_preview() の先頭で受け取っている r・g・b から出せます。bright = (r * 299 + g * 587 + b * 114) / 1000 と計算し、fg = "black" if bright > 128 else "white" と決めて configure(bg=hex_v, fg=fg, text=...) にまとめます。
   つまずきやすい点: _rgb_to_hsl() が返す L をそのまま使うと、赤・黄・青などの純色はどれも L=50 で同じ扱いになり、黄色まで白文字になってしまいます。上の重みづけは、緑を明るく感じる目の性質に合わせたものです。_update_preview() は HEX が読めないと途中で戻る作りなので、入力の途中では色が変わりません。

3. 課題3：保存機能の追加

   処理結果をファイルに保存する機能を追加しましょう。