カラーコード変換ツール
色名・RGB値・HEXコードを相互変換するカラーコードコンバーター。リアルタイムプレビューとクリップボードコピー機能付き。
1. アプリ概要
色名・RGB値・HEXコードを相互変換するカラーコードコンバーター。リアルタイムプレビューとクリップボードコピー機能付き。
このアプリはconverterカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter、難易度は ★☆☆ 易しい です。
このアプリは「変換ツール」カテゴリです。形式変換ツールは入力・処理・出力の三層を明示的に書く好材料で、エラー入力の扱いやバリデーションの基本を体験できます。tkinter を活かして実装するこの構造は、他のアプリにも応用が効きます。
コードを読む前に実行することをおすすめします。動いている挙動を先に把握しておくと、解説で出てくる関数や処理がどこに対応するかが頭に入りやすくなります。
応用のヒントは、機能を 1 つ増やす・見た目を整える・例外を一つでも丁寧に扱う、のいずれかから始めるのがおすすめです。
2. 機能一覧
- カラーコード変換ツールのメイン機能
- 直感的なGUIインターフェース
- 入力値のバリデーション
- エラーハンドリング
- 結果の見やすい表示
- クリア機能付き
3. 事前準備・環境
Python 3.10 以上 / Windows・Mac・Linux すべて対応
以下の環境で動作確認しています。
- Python 3.10 以上
- OS: Windows 10/11・macOS 12+・Ubuntu 20.04+
4. 完全なソースコード
右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。
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("620x480")
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")
ttk.Entry(form, textvariable=self.hex_var, width=14
).grid(row=1, column=1, padx=6, pady=4, sticky="w")
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)
ttk.Entry(rgb_frame, textvariable=var, width=4).pack(side=tk.LEFT, padx=(0, 6))
ttk.Button(form, text="RGB→変換", command=self._on_rgb_change
).grid(row=2, 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)
@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}"
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):
"""HEX → RGB 変換"""
try:
r, g, b = self._hex_to_rgb(self.hex_var.get())
except ValueError as e:
messagebox.showerror("エラー", str(e))
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_rgb_change(self):
"""RGB → HEX 変換"""
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:
messagebox.showerror("エラー", "RGB は各 0〜255 の整数で入力してください")
return
self.hex_var.set(self._rgb_to_hex(r, g, b))
self._update_preview()
def _update_preview(self):
"""プレビュー領域を更新"""
hex_v = self.hex_var.get()
try:
self.canvas.configure(bg=hex_v)
except tk.TclError:
return
r, g, b = self._hex_to_rgb(hex_v)
self.preview_label.configure(
text=f"HEX={hex_v} RGB=({r}, {g}, {b})"
)
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. コード解説
カラーコード変換ツールのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。
クラス設計とコンストラクタ
App053クラスにアプリの全機能をまとめています。__init__でウィンドウ設定、_build_ui()でUI構築、process()でメイン処理を担当します。責任の分離により、コードが読みやすくなります。
※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。
UIレイアウトの構築
LabelFrameで入力エリアと結果エリアを視覚的に分けています。pack()で縦に並べ、expand=Trueで結果エリアが画面いっぱいに広がるよう設定しています。
※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。
イベント処理
ボタンのcommand引数でクリックイベントを、bind('
※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。
Textウィジェットでの結果表示
tk.Textウィジェットをstate=DISABLED（読み取り専用）で作成し、更新時はNORMALに変更してinsert()で内容を書き込み、再びDISABLEDに戻します。
※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。
例外処理とエラーハンドリング
try-exceptでValueErrorとExceptionを捕捉し、messagebox.showerror()でエラーメッセージを表示します。予期しないエラーも処理することで、アプリの堅牢性が向上します。
※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。
6. ステップバイステップガイド
このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。
-
1ファイルを作成する
新しいファイルを作成して app053.py と保存します。
-
2クラスの骨格を作る
App053クラスを定義し、__init__とmainloop()の最小構成を作ります。
-
3タイトルバーを作る
Frameを使ってカラーバー付きのタイトルエリアを作ります。
-
4入力フォームを実装する
LabelFrameとEntryウィジェットで入力エリアを作ります。
-
5処理ロジックを実装する
_execute()メソッドにメインロジックを実装します。
-
6結果表示を実装する
TextウィジェットかLabelに結果を表示する_show_result()を実装します。
-
7エラー処理を追加する
try-exceptとmessageboxでエラーハンドリングを追加します。
7. カスタマイズアイデア
基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。
💡 ダークモードを追加する
bg色・fg色を辞書で管理し、ボタン1つでダークモード・ライトモードを切り替えられるようにしましょう。
💡 データの保存機能
処理結果をCSV・TXTファイルに保存する機能を追加しましょう。filedialog.asksaveasfilename()でファイル保存ダイアログが使えます。
💡 設定ダイアログ
フォントサイズや色などの設定をユーザーが変更できるオプションダイアログを追加しましょう。
8. よくある問題と解決法
❌ 日本語フォントが表示されない
原因：システムに日本語フォントが見つからない場合があります。
解決法：font引数を省略するかシステムに合ったフォントを指定してください。
❌ ライブラリのインポートエラー
原因：必要なライブラリがインストールされていません。
解決法：pip install コマンドで必要なライブラリをインストールしてください。
❌ ウィンドウサイズが合わない
原因：画面解像度や表示スケールによって異なる場合があります。
解決法：root.geometry()で適切なサイズに調整してください。
9. 練習問題
アプリの理解を深めるための練習問題です。
-
課題1：機能拡張
カラーコード変換ツールに新しい機能を1つ追加してみましょう。
-
課題2：UIの改善
色・フォント・レイアウトを変更して、より使いやすいUIにカスタマイズしましょう。
-
課題3：保存機能の追加
処理結果をファイルに保存する機能を追加しましょう。