TJ16th-TJ_ComfyUI_ColorUtility/SPEC.md

RGBカラーピッカーノード 仕様書

概要

RGBスライダーとカラープレビューを備えたComfyUIカスタムノード。 ユーザーがRGB値を視覚的に選択でき、HEX形式のカラーコードを出力する。

ノード名

RGBColorPicker

入力パラメータ

パラメータ名	型	範囲	デフォルト値	説明
red	INT	0-255	255	赤色の値
green	INT	0-255	0	緑色の値
blue	INT	0-255	0	青色の値

出力

出力名	型	形式	説明
hex_color	STRING	#RRGGBB	HEX形式のカラーコード(例: #FF0000)

UI機能

1. RGBスライダー

   • 各色(R/G/B)に対応する3つのスライダー
   • 範囲: 0-255
   • リアルタイムでカラープレビューに反映

2. ビジュアルカラーピッカー

   • カラーホイール(色相環)
   • 中央の明度・彩度グラデーションパネル
   • インタラクティブな色選択
   • マウスクリック/ドラッグで色を選択
   • 選択した色をRGBスライダーに反映

3. カラープレビュー

   • 現在選択されているRGB値の色を表示
   • スライダー操作に応じて即座に更新
   • ビジュアルピッカーの操作にも連動

動作仕様

1. ユーザーが各スライダーでRGB値を設定
2. RGB値(R, G, B)をHEX形式(#RRGGBB)に変換
3. 各8bit値を16進数2桁に変換して連結
4. HEX文字列を出力として返す

変換例

• RGB(255, 0, 0) → #FF0000 (赤)
• RGB(0, 255, 0) → #00FF00 (緑)
• RGB(0, 0, 255) → #0000FF (青)
• RGB(171, 205, 239) → #ABCDEF
• RGB(255, 255, 255) → #FFFFFF (白)
• RGB(0, 0, 0) → #000000 (黒)

カテゴリ

TJnodes/color

技術仕様

Python側

• 言語: Python
• フレームワーク: ComfyUI Custom Node API
• 必要なライブラリ: なし(標準ライブラリのみ)

JavaScript側

• Canvas API: カラーホイールとグラデーション描画
• DOM API: インタラクティブUI構築
• 必要なライブラリ: なし(vanilla JS)
• 色空間変換: RGB ⇔ HSV カスタム実装

ファイル構成

tj_ComfyUIUtil/
├── __init__.py          # ノード登録とWEB_DIRECTORYのエクスポート
├── rgb_color_picker.py  # メインノード実装
├── js/
│   └── rgb_color_picker.js  # カラープレビュー用JavaScript拡張
└── SPEC.md             # 本仕様書

実装のポイント

Python側 (rgb_color_picker.py)

• クラス名: RGBColorPicker
• INPUT_TYPESでスライダー(0-255)を定義
  • "red": ("INT", {"default": 255, "min": 0, "max": 255, "step": 1})
  • "green": ("INT", {"default": 0, "min": 0, "max": 255, "step": 1})
  • "blue": ("INT", {"default": 0, "min": 0, "max": 255, "step": 1})
• RETURN_TYPES = ("STRING",)
• RETURN_NAMES = ("hex_color",)
• FUNCTION = "convert_to_hex"
• RGB→HEX変換は"#{:02X}{:02X}{:02X}".format(r, g, b)を使用
• カテゴリは"TJnodes/color"

JavaScript側 (js/rgb_color_picker.js)

• app.registerExtensionで拡張を登録
• beforeRegisterNodeDefフックでノードタイプを検出(nodeData.name === "RGBColorPicker")
• カスタムウィジェットとして以下を実装:
  1. カラーホイール(色相環): Canvas APIで描画
  2. 明度・彩度グラデーション: 中央の矩形領域
  3. カラープレビュー: 選択色の表示
  4. インタラクション:
     • マウスクリック/ドラッグでホイールと中央パネルから色を選択
     • RGB値とHSV値の相互変換
     • スライダー変更時にピッカーUIを更新
     • ピッカー操作時にスライダーを更新
• ウィジェットのdrawメソッドでDOM要素の位置を更新
• RGB ⇔ HSV 変換関数を実装
• 参考: Pickr.js のようなカラーピッカーUI

__init__.py

• NODE_CLASS_MAPPINGSでノードクラスをマッピング
• NODE_DISPLAY_NAME_MAPPINGSで表示名を設定
• WEB_DIRECTORY = "./js"をエクスポート
• __all__にWEB_DIRECTORYを含める