【pyhton】5分でわかるRGBカラーコード変換ツールの作成方法

Image by AI素材.com

はじめに

このコードは、Pythonを使用してGUIを作成して、RGB値を受け取って、そのRGB値に対応する16進コードを計算するツールです。このアプリは、スライダーを使用してRGB値を選択し、コードとともに色の見本を表示できます。このコードは、GUIのエレメントを構築する方法について学ぶ上で役立ちます。また、Pythonを使用してGUIを作成する方法、およびPythonでRGB値を処理する方法を理解するのにも役立ちます。

tkinterとは

tkinterは、Pythonの標準GUIライブラリの1つであり、ウィンドウを作成するための様々な機能を提供します。tkinterは、Windows、Mac、Linuxをはじめとする様々なプラットフォームで動作します。

tkinterの特徴は、Pythonの標準ライブラリであるため、Pythonをインストールすると同時にtkinterも使用できることです。さらに、tkinterは非常に使いやすく、GUIの作成が比較的簡単に行えるため、Python初心者でも扱いやすいという点があります。

tkinterを使うと、ボタン、ラベル、テキストボックス、プログレスバー、メニューバーなど、様々なGUI要素を簡単に作成することができます。また、tkinterはイベント駆動型のGUIフレームワークであるため、イベントに応じて特定のアクションを実行することができます。

PythonでGUIアプリケーションを作成する場合は、tkinterを利用することが多く、PythonのGUIアプリケーション開発の初歩となる重要なライブラリとなっています。

 本家のサイトはこちら

ソースコード

import tkinter as tk
#ボーダースタイル:relief

main_window = tk.Tk()
main_window.title("tm-kit カラーコード表")
main_window.geometry("450x700")

ent1 = tk.Entry(width = 50)
ent1.place(x=30 ,y=240)

lb20 = tk.Label(text='色のコピーはこちらーーー>')
lb20.place(x=60, y=580)
txt20 = tk.Entry(width= 20,bg="#98FB98")
txt20.place(x=200, y=580)

def hex2(num): # 10進数を二桁16進文字列に変換
    num2 = hex(num).replace('0x', '')
    if len(num2) == 1:
        num2 = '0' + num2
    return num2

def scrl_method(event):
    ent1.delete(0, 100)
    txt20.delete(0,100)
#rgbデータを取得
    r = scr1.get()
    g = scr2.get()
    b = scr3.get()
#取得したデータの数値を確認
    print(r)
    print(g)
    print(b)
#rgbデータを6桁で表示するための計算
    r8 = r << 16
    g8 = g << 8
    rgb = r8 | g8 | b
    print(hex(rgb))
    rgb = format(int(rgb),"06x")
    output = '#{}'.format(rgb)
    txt20.insert(0,output)
#出力するための処理
    moji = '(赤, 緑, 青) = ({}, {}, {}) = ({}, {}, {}) #{}'.format(r, g, b, hex(r), hex(g), hex(b),rgb)
    ent1.insert(0, moji)
    rgb = '#' + '{}{}{}'.format(hex2(r), hex2(g), hex2(b))
    cvs.configure(bg=rgb)
#緑の色見本 文字列
lb0 =  tk.Label(text='カラーコードの色見本')
lb0.place(x=10, y=10)
lb1 = tk.Label(text='Green:#008000 (0,128,0) ')
lb1.place(x=10, y=30)
lb2 = tk.Label(text='DarkGreen:#006400 (0,100,0) ')
lb2.place(x=10, y=50)
lb3 = tk.Label(text='ForestGreen:#228B22 (34,139,34) ')
lb3.place(x=10, y=70)
lb4 = tk.Label(text='SeaGreen:#2E8B57 (46,139,87)')
lb4.place(x=10, y=90)
lb5 = tk.Label(text='MediumSeaGreen:#3CB371 (60,179,113)')
lb5.place(x=10, y=110)
lb6 = tk.Label(text='SpringGreen:#00FF7F (0,255,127)')
lb6.place(x=10, y=130)
lb7 = tk.Label(text='LightGreen:#90EE90 (144,238,144)')
lb7.place(x=10, y=150)
lb8 = tk.Label(text='PaleGreen:#98FB98 (152,251,152)')
lb8.place(x=10, y=170)
#緑の色見本 着色
txt1 = tk.Entry(width= 20,bg="#008000")
txt1.place(x=250, y=30)
txt2 = tk.Entry(width= 20,bg="#006400")
txt2.place(x=250, y=50)
txt3 = tk.Entry(width= 20,bg="#228B22")
txt3.place(x=250, y=70)
txt4 = tk.Entry(width= 20,bg="#2E8B57")
txt4.place(x=250, y=90)
txt5 = tk.Entry(width= 20,bg="#3CB371" )
txt5.place(x=250, y=110)
txt6 = tk.Entry(width= 20,bg="#00FF7F")
txt6.place(x=250, y=130)
txt7 = tk.Entry(width= 20,bg="#90EE90")
txt7.place(x=250, y=150)
txt8 = tk.Entry(width= 20,bg="#98FB98")
txt8.place(x=250, y=170)



lb9 = tk.Label(text='色のコードの表',font = ("UD デジタル 教科書体 N-R",18))
lb9.place(x=10, y=200)

#色のラベル
lb10 = tk.Label(text='赤')
lb10.place(x=10, y=300)
lb11 = tk.Label(text='緑')
lb11.place(x=10, y=350)
lb12 = tk.Label(text='青')
lb12.place(x=10, y=400)

#スクロール
scr1 = tk.Scale(orient=tk.HORIZONTAL,to=255,command=scrl_method)
scr1.place(x=100 ,y=280)
scr2 = tk.Scale(orient=tk.HORIZONTAL,to=255,command=scrl_method)
scr2.place(x=100 ,y=330)
scr3 = tk.Scale(orient=tk.HORIZONTAL,to=255,command=scrl_method)
scr3.place(x=100 ,y=380)

#キャンバスエリア
cvs = tk.Canvas(bg='#000000', width=250, height=100)
cvs.place(x=100, y=450)

main_window.mainloop()

ソースコードの仕組み

このコードは、Pythonのtkinterを使ってGUIを作成するものです。このプログラムでは、ユーザーが3つのスクロールバーを使用してRGBカラーコードを調整できます。 RGBの値は、6桁の16進数で表示され、カラーコードが入力フィールドに表示されます。また、スクロールバーを調整すると、選択した色に基づいてキャンバスの背景色が変更されます。また、選択したRGB値が入力フィールドに表示されます。緑の色見本が表示され、選択した色の16進数カラーコードが表示されます。最後に、ユーザーは16進数カラーコードを入力して、対応するRGB値を求めることができます。

main_window = tk.Tk() main_window.title("tm-kit カラーコード表") main_window.geometry("450x700")
ウィンドウを作成するために必要なウィンドウオブジェクトを作成します。window.geometryは、ウィンドウのサイズを設定します。この場合、幅450ピクセル、高さ700ピクセルのサイズに設定しています

ent1 = tk.Entry(width = 50)
ent1.place(x=30 ,y=240)
このコードは、Tkinterを使用してウィンドウにテキスト入力欄を配置しています。placeメソッドを使って、入力欄をx座標30、y座標240の位置に配置しています。

def hex2(num):
この関数は、コメントにも記載していますが、10進数を二桁の16進数へ変換しています。

def scrl_method(event):
この関数は、GUIで入力されたRGB値を取得し、それを16進数のカラーコードに変換して、その値をGUI上に表示する処理をしています。RGB値を6桁の16進数に変換し、出力用のテキストボックスに16進数のカラーコードを表示します。また、そのカラーコードを使って、GUI上のキャンバスの背景色を変更しています。

cvs = tk.Canvas(bg='#000000', width=250, height=100) cvs.place(x=100, y=450)
main_window.mainloop()
このプログラムは、tkinterを使用してウィンドウを表示し、Canvasを作成しています。Canvasはグラフィックスの描画をするためのウィジェットで、このプログラムでは、背景色を黒色に指定して、横幅が250、縦幅が100のCanvasを作成しています。
最後に、mainloop()メソッドを呼び出して、ウィンドウを表示しています。mainloop()メソッドは、Tkinterアプリケーションのメインループを実行するために使用されます。

動画

カラーコードの動画となります。参考までに

まとめ

本記事では、Pythonを使ってGUIを作成し、RGB値から16進コードを計算するツールの作り方を紹介しました。Pythonの基本的な文法についても触れ、初心者でも理解しやすい解説となっています。タイトルにある通り、5分でソースコードを書けるわけではありませんが、記事を読めば手順が理解できます。RGB値から16進コードを計算するツールは、Webデザインやグラフィックデザインにおいて有用であり、関心のある人には役立つ記事となっています。
 他のpythonの記事はこちらから

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です