使用方法
以下の説明で使用される画像は、初期状態のスキン画像を用いた状態のものです。
指し示す部位や名称も設定次第では異なります。
本ソフトを実行すると次のような画面が表示されます。

- 現在の色が表示されている小窓です。
この小窓を少し左ドラッグするとスポイト開始となります。
マウスの左ボタンを放した位置の色を、現在の色として取得します。
スポイト中の小窓ではマウスカーソル周辺の画面が拡大表示されます。
また、スポイト中はカーソルキー等で、マウスカーソル位置の微調整が可能です。
- 現在の色のRGB値を操作する部分です。
左側に各要素の数値が表示され、右側のバーでマウスによる操作が可能です。
また、操作中の要素に対してはマウスホイールやキーボードによる操作も可能となります。
- 現在の色のRGB値が表示されています。
この部分をクリックする事で、表示されている文字列をクリップボードへコピーします。
RGB値の表記形式は、右クリックメニューの「表記形式」で選択できます。
INIファイルを直接編集する事で、表記形式の編集や追加も可能です。
- 最小化・色リスト表示・終了などの機能ボタンが並んでいます。
ボタン等にカーソルを乗せると、色の変化などでそこにボタンがある事を示します。
カーソルを乗せて少し待つとツールチップが表示されますので、それで何のボタンか判断して下さい。
- ツール画面内の何も無い場所をドラッグすると、ツール画面を移動できます。
メイン画面の移動中は、色リスト・グリッドペイントのサブ画面も付いて来ます。
- ツール画面内を右クリックすると操作メニューが表示されます。
大抵の操作はメニュー内の項目からも行えます。
また、各操作に対応するショートカットキーも表示されてますのでご参考に。
- ボタンや右クリックメニュー内の項目から、本ソフトの内容を要約した「ヒント」を参照可能です。
以上が基本的な使用方法となります。
現在の色
ツール本体で現在扱っている色が現在の色です。
ツール本体で扱える色は常にこの一色のみです。
複数の色を保持しておくには色リストへの追加などが必要となります。
HSV値操作がONの状態の画面です。
操作項目が増えた分、画面が少し拡張されます。
さらに右側はスポイト中の画面です。
- 小窓です、通常時は現在の色で塗り潰されています。
ここをドラッグする事でスポイトモードとなり、画面上の色を取得できます。
また、ダブルクリックする事で色選択ダイアログを表示します。
- RGB値の操作バーです。バーはマウスで操作します。
操作中の項目に対してはマウスホイールやキーボード操作も有効となります。
カーソルキーで数値の増減、数字キーで数値の直接入力も可能ですが少々クセがあります。
常に0埋め3桁数字で入力するようにすると意図した数値が入力できると思います。
- HSV値の操作バーです。操作自体はRGB値のものと同様です。
通常Hの値は0~359の範囲を取りますが、設定でHSP式の0~191の範囲にする事もできます。
HSV値は、もう少し赤っぽく・もう少し薄く・もう少し暗くといった感覚的な微調整に向いてると思います。
- このスキンでは色の色相環が表示されていますが、この色相環自体に意味はありません。
右側の画像のように、スポイト時の現在位置の色と座標を表示する為の領域として機能します。
- 現在の色のRGB値が、選択中の表記形式で表示されます。
クリックする事で表示されている文字列をクリップボードへコピーします。
また⑤の真下のボタンで、現在の色を色リストへ追加します。
色リスト

色リストの画面です。
ボタンやメニューから表示できる他、リストに色を追加すると自動的に表示されます。
新しく登録された色は一番上に配置されます。
実際に登録された色は左端の色で、RGB値もその色のものが表示されます。
右に並ぶ色は、登録色を基にした関連色です。
登録色・関連色ともに、ダブルクリックする事で現在の色として取得できます。
初期設定では16色まで色リストに登録できます。
それ以上登録した場合は、一番下の色がリストから無くなります。
このスキンの場合、画面上部のボタンでリスト内の色の操作なども行えます。
尚、左端のグラデーション表示に特別な意味はありません。
登録色と関連色
配色の参考用にこのような関連色を表示する仕様となっています。
単純に色を保持するだけならグリッドペイントでも可能です。
(拡大してます)
- 登録色
メイン画面から登録された色そのものです。
リスト画面内で表示されるRGB値はこの色のものです。
- トライアドA
色相環の中で登録色と正三角形の位置に当る色です。
この三色での配色はバランスの取れたものになるそうです。
具体的にはHSV値のH値を120加えてSV値はそのままの色となります。
- トライアドB
正三角形の3つ目。HSV値のH値を120引いた色です。
- 補色
色相環で反対側の位置に当る色。
互いの色を引き立てる効果があるけど純色などでは少々キツくなるそうです。
- 反転色
RGB値のそのまま反転させた色。普通にキツい配色になりやすいです。
- モノクロ
YUVを加味して白黒化した色。人間の眼に映るその色の明るさ。のようなモノです。
背景に柄や模様を用いる場合、この値が近い色で描くとうるさくなりにくいようです。
背景と前景でこの値が近いと見難い配色となります。
色リストの操作
ボタンやメニューから色リストやリスト内の登録色に対していくつかの操作が可能です。
- ファイルへ保存/ファイルから開く
現在の色リストの内容をファイルへ保存したり、ファイルから読み込む事が可能です。
一応専用の拡張子を設けていますが使う方が把握できれば何でも構いません。
ファイル自体はRGB値を32bit単位で並べただけのバイナリファイルです。
- 上/下へ移動
リスト内の選択中の色を、上/下の色と位置交換します。
色の選択はリスト内の色を左クリックで行います。
TabキーやShift+Tabキーで選択色の切り替えも可能です。
また、リスト内の色をドラッグ&ドロップする事で直接交換もできます。
- 削除
選択中の色を色リストから除外します。
Shift+Delキーでも可能です。
グリッドペイント

全体的な配色イメージを掴む為の簡易ペイント機能です。
色を保持しておく為のパレットのような使い方もできます。
右クリックメニュー内「表示 > グリッドペイント」から表示可能です。
ペイントはグリッド単位で行われます。
各グリッドのサイズや縦横のグリッド数は、グリッドペイント内のメニューの「設定 > グリッド設定」から変更可能です。
グリッドペイント画面内の操作は主にマウスボタンで行います。
ver 1.20より色々機能追加しました。
・グリッド名・RGB値毎のラベルを設定可能に
・内容を任意のファイルへ保存可能に
・テキストファイルへ色情報を書き出し
・テキストファイルから色情報を取り込み
・HTMLファイルへ内容を出力、など
操作方法
※機能追加に伴い、操作方法が少し変更されました。
操作ボタンは「
設定 > 操作設定」で変更可能です。
[]内は初期設定での操作ボタンです。
- 色を置く(着色) [左ボタン]
カーソル位置のグリッドに現在の色を置きます。
ドラッグする事で直線や四角形状の範囲に色を置きます。
- 色を拾う [右ボタン]
カーソル位置のグリッドの色を現在の色として取得します。
- 塗りつぶし [右+左ボタン]
カーソル位置のグリッドと隣接する同色のグリッドすべてを現在の色にします。
- ラベル設定 [中ボタン(ホイール)]
カーソル位置の色に対応するラベル名を設定します。
未記入状態でOKボタンを押す事で、ラベルの削除となります。
各ラベルは全角12文字/半角24文字迄設定可能です。
注意点として、各ラベルはグリッドの位置ではなく色のRGB値に対して関連付けられます。
また、ラベルの内容はグリッドペイントのデータ毎に保持されます。
設定したラベルはステータスバー上にRGB値とともに表示される他、グリッドサイズが縦横ともにフォントサイズ以上であれば各グリッド内にも表示されます。
- スクロール [上記以外のボタン]
上記操作以外のボタンで画面内をドラッグする事で、画面を掴んで表示位置を移動させます。
着色ロックが有効な場合、色を置く・塗りつぶしのボタンもこの動作になります。
また、マウスホイールの回転でも表示位置の移動は可能です。
グリッドペイント内のメニュー項目
ファイル
- グリッド初期化
グリッド名・全ラベルの削除、グリッド全面を初期化色で塗りつぶします。
グリッドのサイズ・操作設定・着色ロックの状態はそのまま維持されます。
- グリッドを開く / 保存
グリッドペイントの内容を任意のファイルへ読み書きします。
特に保存しなくても、ソフト終了時の内容は次回起動時に引き継がれます。
ファイルの拡張子はなんでも良いですが、無関係なデータを読み込むとエラーとなります。
- テキスト取り込み
「RGB値空白ラベル名」の形式で色情報が列挙されたテキストファイルから、多数の色をまとめて取り込みます。
RGB値の表記方式は、初期状態で登録済みのような形式なら読み込めると思います。
取り込んだ色は左上のグリッドから順に1箇所ずつ配置されます。
また「#name空白グリッド名」と記述した行があればグリッド名を、「#grid空白グリッド幅, グリッド高, 横グリッド数, 縦グリッド数」と記述した行があればグリッドサイズを取り込み時に変更します。
テキストファイル内の/* ~ */の区間、//・ ; 以降の内容はコメントとして無視されます。
サンプルとして「html_color.txt」を添付してますので、そちらも参考にして下さい。
- テキスト書き出し
上記の「テキスト取り込み」の逆で、グリッドペイント内の色情報をテキストファイルへ保存します。
書き出し時のRGB値の記述形式は、ソフト本体の表記形式に準拠します。
書き出される内容は、各色のRGB値・対応ラベル・グリッド名・グリッドサイズに限定され、色の配置情報は失われます。
書き出されたテキストファイルは、そのまま「テキスト取り込み」で取り込めます。
- HTMLテーブル
ブラウザで閲覧可能なHTMLファイルとして、各色をRGB値・対応ラベルとともに出力します。
出力されるHTMLファイルの内容は、各色をタイル状に並べた所謂「カラーサンプル」のようなものになります。
ブラウザ上の表示状態を変更されたい場合、お手数ですが直接HTMLファイル内のスタイルシート部を編集して頂く事になります。
- HTMLグリッド
ブラウザで閲覧可能なHTMLファイルとして、グリッドペイント内の配色状態を出力します。
HTMLテーブルが色そのものを見るのに対し、こちらは色の配置を見る為の出力形式となります。
ブラウザ上では各グリッドは2文字分の正方形、RGB値は表示されません。
「設定 > グリッド設定」内の「ラベルを表示しない」が有効の場合、ラベルも表示されません。
こちらもブラウザ上の表示状態を変更するには、直接スタイルシート部を編集して頂く必要があります。
設定
- グリッド名
現在のグリッドの名前を設定します。
設定されたグリッド名は、グリッドペイント画面のタイトルバーに表示されます。
また、HTMLファイルとして書き出した際のタイトルにもなります。
- 着色ロック
誤操作によるグリッド内の色の変更を防止する為の機能です。
ロック時は「色を置く」「塗りつぶし」の操作を無効化します。
ロック中はグリッドペイント画面のタイトルに「[@]」が付き、ステータスバーに錠前っぽいアイコンが表示されます。
ロック状態は画面下部のステータスバーをダブルクリックする事でも切り替え可能です。
- グリッド設定
各グリッドのサイズ・縦横のグリッド数・初期化時の色・グリッド内のラベル表示の有無を設定します。
グリッドサイズは4~2048[px]、グリッド数は1~2048迄の数値を指定可能ですが、全体サイズが大き過ぎるとシステムエラーが発生します。
逆に小さ過ぎる場合は操作そのものが困難となりますので、適宜調整をお願いします。
初期化色は「グリッド初期化」や「テキスト取り込み」の余ったグリッドに使用される色の設定です。
「ラベルを表示しない」は、グリッド内にラベル表示可能な状態でも表示させない為の設定です。
- 操作設定
グリッドペイント内の操作に使用するマウスボタンの設定を変更できます。
「--------」は未設定状態で、その操作自体不可能になります。
「右+左ボタン」は右ボタンを押したまま左ボタンを押す操作を指します。「右+中ボタン」も同様です。
「Shift」「Ctrl」がチェック状態なら、キーボード上の該当キーを押したままマウスボタン操作を行う必要があります。
複数の操作に同じ操作設定を行った場合、他方の操作は未設定状態になります。
出力したHTMLファイルの編集
「
HTMLテーブル」「
HTMLグリッド」で出力するHTMLファイルの、ブラウザ上の表示状態を予め調整できる項目は、ソフト内には用意していません。
この為、表示状態を調整されたい場合はHTMLファイルを
テキストエディタで開き、直接編集して頂く必要があります。
以下に具体的な編集内容を記述しておきますが、
ご使用のブラウザによっては正常に反映されない場合もあります。
- HTMLテーブル
/* p.col:nth-of-type(4n+1){clear:left} /* (Xn+1) X=[Number of column] */
p.col{float:left; overflow:hidden; white-space:nowrap; height:3em;
width:23.0%; min-width:8em; max-width:16em; /* Cell width */
という行が6~8行目にあります。この中のこの色の部分で各色の表示サイズを調整しています。
「em」はブラウザ上の1文字分を示す単位、「%」はブラウザ全体のサイズに対する割合を示す単位です。
「高さは3文字分、幅はブラウザの幅の23%分。但し、最小で8文字分、最大で16文字分」という設定になっています。
それぞれの数値を書き換えて頂く事で、全ての色の表示サイズが変更されます。
「float:left;」で各色をタイル状に並べてますので、この部分は残して置いて下さい。
また最初の行の部分で、任意の個数毎に改行させる事もできます。
先頭の「/*」でコメントアウト化されてますので、まずこれを削除し、「4」の部分を任意の数字にして頂く事で、その個数毎に改行するようになります。
- HTMLグリッド
width:2.0em; min-width:2.0em; max-width:2.0em; /* Grid width */
height:2.0em; min-height:2.0em; max-height:2.0em; /* Grid height */
という行が10,11行目にあります。各グリッドの表示サイズを幅・高さともに2文字分と設定しています。
最小・最大値も同じ値に設定にしないと固定できないようです。
ラベル表示の有無・縦横のグリッド数は、出力時のグリッドペイントの設定に準拠します。
もちろん上記以外の部分も、全てご自由に編集して頂いて構いません。
メニュー項目
スキンによってはボタンでは存在しない機能も多々あります。
しかし右クリックメニュー内の項目からならどのスキンでも全ての機能が使用可能です。
また各操作に割り振られたショートカットキーからも同様に実行できます。
- [RGB値をコピー]
現在の色をRGB値を文字列としてクリップボードへコピーします。
- 現在の表記形式
メイン画面に表示されている文字列をそのままコピーします。
- (各形式でのRGB表記)
現在のRGB値を各形式で表記したものが列挙されます。
16進数値の英字は、そのまま選択で大文字、Shiftキー押しながら選択すると小文字でコピーします。
- 色取得時コピー
ONの場合、スポイト・色リスト・グリッドペイントで色を取得した際
そのまま現在の表記形式でRGB値をクリップボードへコピーします。
[表記形式]
現在の色のRGB値の表記形式を選択します。
INIファイルを編集する事で追加・変更も可能です。
- 小文字
16進数値の英字を小文字で表示します。
- (選択可能な表記形式)
選択可能な表記形式が列挙されます。現在の表記形式には●印が付きます。
項目内のr・g・bなどの部分がRGBの各数値に置き換わります。
r:10進数値
__r:3桁空白有りの10進数値
rrr:3桁0埋めの10進数値
RR:2桁16進数値
色リストへ追加
現在の色を色リストへ追加登録します。
RGB値を自動入力
ペイントソフト等のRGB値の入力欄へ自動入力します。
それぞれ入力欄がTabキーで移動可能であり、R値の入力欄にフォーカスを合わせた状態で実行します。
デフォルトでは「R数値 > Tab > G数値 > Tab > B数値」のキー入力をエミュレートします。
INIファイルを編集する事で一応調整可能です。
RGB値の貼り付け
「RGB値をコピー」の逆です。
クリップボード上の文字列をRGB値を表記したものとして読み込み、現在の色にしようとします。
初期の表記形式程度ならなんとか読み込めます。
ランダムカラー
ランダムなRGB値の色を現在の色とします。
色に悩んだ時にポチポチ換えながら眺めると良いかも知れません。
[表示]
表示に関する設定項目などがあります。
- HSV操作
基本的にはHSV値操作用にツール画面の表示領域を拡張・縮小します。
但し縮小状態ではHSV操作はできない・拡張状態ではHSV操作できなくてはいけないと言うような制約は無い為、「スキン画像の切り替え」が実際の動作となります。
- 色リスト
色リスト画面の表示/非表示を切り替えます。
但し登録色が1つも無い状態では表示されません。
- グリッドペイント
グリッドペイント画面の表示/非表示を切り替えます。
- 最前面表示
非アクティブ状態でも他ソフトのウィンドウの背面に回らないようにします。
本ツールの全てのウィンドウに適用されます。
- タスクトレイアイコン化
最小化時、タスクトレイに格納するかの設定です。
タスクトレイ格納時は、タスクトレイ内のアイコンをクリックする事で通常表示に戻ります。
- ツールチップ
ウィンドウがアクティブな状態でマウスカーソルをボタン等に乗せて少し待つと、何のボタンかなどの注釈が出る機能です。
デフォルトでONになっていますが邪魔だと感じたらOFFにして下さい。
- HSP式 Hue192
HSVのH(色相)の値の範囲を0~191にします。
この範囲はHSPのスクリプト内での指定に用いられるもので一般的では無いようです。
- スキン変更
対応する画像ファイルを選択する事で、ツール本体・色リストの外観を変更します。
詳細はコチラで。「skin」フォルダ内にスキン用の画像をいくつか同梱してます。
- フォント設定
ツール内で使用するフォントを設定します。
RGB値表記・RGB/HSVの各数値・スポイト中の座標・グリッドペイント内のラベル表示などに適用されます。
但しツール自体がフォントサイズ12辺りを想定した造りですので、大きいサイズを指定すると表示しきれません。
- ヒント
本ツールの使い方などがザックリと書かれたものがダイアログで表示されます。
- HTMLマニュアル参照
今現在ご覧になっているものが表示されます。
実行ファイルと同じ場所に「manual.html」が存在しなければメニュー項目として表示されません。
[色リスト]
色リストに登録された色に対する操作項目です。
最小化
「表示 > タスクトレイアイコン化」の項目でタスクトレイに格納する事も可能です。
終了
本ツールを終了します。
終了時、INIファイルやグリッドペイントのデータファイルが生成・更新されます。
キー割り当て
以下は初期設定でのキー割り当てです。
各操作へのショートカットキーは、右クリックメニュー内で確認可能です。
1つの操作に複数のキーを割り当てた場合、最初のキーしか表示されませんがちゃんと有効なハズです。
ショートカットキー
操作 | キー |
RGB値を(現在の表記形式で)コピー | Ctrl + C Enter |
色リストへ追加 | Ctrl + A |
RGB値を自動入力 | Ctrl + Q |
RGB値の貼り付け | Ctrl + V |
ランダムカラー | Ctrl + R |
HSV操作 ON/OFF | Ctrl + H |
色リスト画面 ON/OFF | Ctrl + L |
グリッドペイント画面 ON/OFF | Ctrl + G |
ヒント | F1 |
最小化 | Ctrl + M |
終了 | Alt + F4 |
色リスト
操作 | キー |
(選択色を)上へ移動 | Shift + up(↑) Shift + W |
(選択色を)下へ移動 | Shift + down(↓) Shift + S |
(選択色を)削除 | Shift + Del |
リスト内の選択色を現在の色にする | Q |
トライアドAを現在の色にする | W |
トライアドBを現在の色にする | E |
補色を現在の色にする | R |
反転色を現在の色にする | T |
モノクロ色を現在の色にする | Y |
グリッドペイント
操作 | キー |
グリッドを開く | Ctrl + O |
グリッドを保存 | Ctrl + S |
RGB・HSV値操作
操作 | キー |
数値+1 | right(→) num + |
数値-1 | left(←) num - |
数値+8 | up(↑) |
数値-8 | down(↓) |
数値+16 | PageUp num * |
数値-16 | PageDown num / |
数値/10 | BackSpace |
数値最大 | Home |
数値最小(0) | End Del |
数字入力 | 0~9 num 0~9 |
※操作中のRGB・HSV値に対して有効です。 |
操作キー
操作 | キー |
次のコントロール(色)へ | Tab |
前のコントロール(色)へ | Shift + Tab |
ウィンドウ切り替え | Ctrl + Tab |
メニュー表示 | Menu |
スポイト中のマウスカーソル位置調整
操作 | キー |
マウスカーソル左へ | left(←) A |
マウスカーソル上へ | up(↑) W |
マウスカーソル右へ | right(→) D |
マウスカーソル下へ | down(↓) S |
※この操作のキーと他の操作のキー割り当ては重複可能です。 |