カラーコードサンプラー
HEX・RGB・HSLのカラーコードを相互変換しプレビュー表示するツール。colorsysモジュールを活用。
1. アプリ概要
HEX・RGB・HSLのカラーコードを相互変換しプレビュー表示するツール。colorsysモジュールを活用。
このアプリはconvertersカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter（標準ライブラリ）、難易度は ★★☆ です。
このアプリは「変換ツール」カテゴリです。形式変換ツールは入力・処理・出力の三層を明示的に書く好材料で、エラー入力の扱いやバリデーションの基本を体験できます。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。
完成形を見てから細部の解説に進む流れが効果的です。実行→気になる箇所を解説で確認→自分の手で改造、というサイクルで定着が早まります。
カスタマイズ章では具体的な拡張アイデアを示しています。一つ実装するごとに動作確認することで、変更が予期せぬ副作用を起こさないかも体感できます。
2. 機能一覧
- カラーコードサンプラーのメイン機能
- 直感的なGUIインターフェース
- 入力値のバリデーション
- エラーハンドリング
- 結果の見やすい表示
- クリア機能付き
3. 事前準備・環境
Python 3.10 以上 / Windows・Mac・Linux すべて対応
以下の環境で動作確認しています。
- Python 3.10 以上
- OS: Windows 10/11・macOS 12+・Ubuntu 20.04+
4. 完全なソースコード
右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。
import colorsys
import re
import tkinter as tk
from tkinter import ttk, messagebox
class App098:
"""カラーコードサンプラー"""
def __init__(self, root):
self.root = root
self.root.title("カラーコードサンプラー")
self.root.geometry("680x540")
self.root.configure(bg="#f8f9fc")
self._suspend = False # 連動更新中の再帰防止
self._build_ui()
self._set_from_rgb(55, 118, 171) # 初期色 #3776AB
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=18, pady=14)
main.pack(fill=tk.BOTH, expand=True)
# HEX
hex_frame = ttk.LabelFrame(main, text="HEX", padding=10)
hex_frame.pack(fill=tk.X, pady=4)
self.hex_var = tk.StringVar()
ttk.Entry(hex_frame, textvariable=self.hex_var, width=14
).pack(side=tk.LEFT, padx=4)
ttk.Button(hex_frame, text="適用", command=self._apply_hex).pack(side=tk.LEFT, padx=4)
ttk.Button(hex_frame, text="コピー",
command=lambda: self._copy(self.hex_var.get())).pack(side=tk.LEFT, padx=4)
# RGB sliders
rgb_frame = ttk.LabelFrame(main, text="RGB (0〜255)", padding=10)
rgb_frame.pack(fill=tk.X, pady=4)
self.r_var = tk.IntVar()
self.g_var = tk.IntVar()
self.b_var = tk.IntVar()
for i, (label, var) in enumerate([("R", self.r_var), ("G", self.g_var), ("B", self.b_var)]):
tk.Label(rgb_frame, text=label, bg="#f8f9fc",
font=("Noto Sans JP", 11, "bold")).grid(row=i, column=0, padx=2)
scale = ttk.Scale(rgb_frame, from_=0, to=255, variable=var,
command=lambda v, vv=var: self._on_rgb_slider(),
length=320)
scale.grid(row=i, column=1, padx=4, sticky="ew")
ttk.Label(rgb_frame, textvariable=var, width=4
).grid(row=i, column=2, padx=2)
rgb_frame.columnconfigure(1, weight=1)
# HSL sliders
hsl_frame = ttk.LabelFrame(main, text="HSL (H:0〜360 / S,L:0〜100)", padding=10)
hsl_frame.pack(fill=tk.X, pady=4)
self.h_var = tk.IntVar()
self.s_var = tk.IntVar()
self.l_var = tk.IntVar()
for i, (label, var, mx) in enumerate([("H", self.h_var, 360),
("S", self.s_var, 100),
("L", self.l_var, 100)]):
tk.Label(hsl_frame, text=label, bg="#f8f9fc",
font=("Noto Sans JP", 11, "bold")).grid(row=i, column=0, padx=2)
scale = ttk.Scale(hsl_frame, from_=0, to=mx, variable=var,
command=lambda v, vv=var: self._on_hsl_slider(),
length=320)
scale.grid(row=i, column=1, padx=4, sticky="ew")
ttk.Label(hsl_frame, textvariable=var, width=4
).grid(row=i, column=2, padx=2)
hsl_frame.columnconfigure(1, weight=1)
# プレビュー
preview_frame = ttk.LabelFrame(main, text="プレビュー", padding=10)
preview_frame.pack(fill=tk.BOTH, expand=True, pady=(6, 0))
self.preview = tk.Canvas(preview_frame, height=110,
highlightthickness=1, highlightbackground="#cccccc")
self.preview.pack(fill=tk.BOTH, expand=True)
self.info_var = tk.StringVar()
tk.Label(preview_frame, textvariable=self.info_var,
bg="white", font=("Noto Sans JP", 10), justify=tk.LEFT
).pack(anchor="w", pady=(4, 0))
@staticmethod
def _hex_to_rgb(hex_str):
"""#RRGGBB / #RGB を (r,g,b) に"""
s = hex_str.strip().lstrip("#")
if len(s) == 3:
s = "".join(c * 2 for c 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)
def _apply_hex(self):
"""HEX入力を反映"""
try:
r, g, b = self._hex_to_rgb(self.hex_var.get())
except ValueError as e:
messagebox.showerror("エラー", str(e))
return
self._set_from_rgb(r, g, b)
def _on_rgb_slider(self):
"""RGBスライダー変化"""
if self._suspend:
return
self._set_from_rgb(self.r_var.get(), self.g_var.get(), self.b_var.get(),
update_rgb=False)
def _on_hsl_slider(self):
"""HSLスライダー変化"""
if self._suspend:
return
h = self.h_var.get() / 360.0
s = self.s_var.get() / 100.0
l = self.l_var.get() / 100.0
r, g, b = colorsys.hls_to_rgb(h, l, s)
r, g, b = int(r * 255), int(g * 255), int(b * 255)
self._set_from_rgb(r, g, b, update_hsl=False)
def _set_from_rgb(self, r, g, b, update_rgb=True, update_hsl=True):
"""RGB値を起点に各表示を更新"""
r, g, b = max(0, min(255, r)), max(0, min(255, g)), max(0, min(255, b))
self._suspend = True
try:
if update_rgb:
self.r_var.set(r)
self.g_var.set(g)
self.b_var.set(b)
hex_v = f"#{r:02X}{g:02X}{b:02X}"
self.hex_var.set(hex_v)
h_f, l_f, s_f = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)
if update_hsl:
self.h_var.set(int(round(h_f * 360)))
self.s_var.set(int(round(s_f * 100)))
self.l_var.set(int(round(l_f * 100)))
try:
self.preview.configure(bg=hex_v)
except tk.TclError:
pass
self.info_var.set(
f"HEX={hex_v} RGB=({r}, {g}, {b}) "
f"HSL=({int(h_f*360)}, {int(s_f*100)}%, {int(l_f*100)}%)"
)
finally:
self._suspend = False
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 = App098(root)
root.mainloop()
5. コード解説
カラーコードサンプラーのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。
クラス設計とコンストラクタ
App098クラスにアプリの全機能をまとめています。__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ファイルを作成する
新しいファイルを作成して app098.py と保存します。
-
2クラスの骨格を作る
App098クラスを定義し、__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：保存機能の追加
処理結果をファイルに保存する機能を追加しましょう。