使用方法

以下の説明で使用される画像は、初期状態のスキン画像を用いた状態のものです。
指し示す部位や名称も設定次第では異なります。

本ソフトを実行すると次のような画面が表示されます。

実行時の画面
  1. 現在の色が表示されている小窓です。
    この小窓を少し左ドラッグするとスポイト開始となります。
    マウスの左ボタンを放した位置の色を、現在の色として取得します。
    スポイト中の小窓ではマウスカーソル周辺の画面が拡大表示されます。
    また、スポイト中はカーソルキー等で、マウスカーソル位置の微調整が可能です。
  2. 現在の色のRGB値を操作する部分です。
    左側に各要素の数値が表示され、右側のバーでマウスによる操作が可能です。
    また、操作中の要素に対してはマウスホイールやキーボードによる操作も可能となります。
  3. 現在の色のRGB値が表示されています。
    この部分をクリックする事で、表示されている文字列をクリップボードへコピーします。
    RGB値の表記形式は、右クリックメニューの「表記形式」で選択できます。
    INIファイルを直接編集する事で、表記形式の編集や追加も可能です。
  4. 最小化・色リスト表示・終了などの機能ボタンが並んでいます。
    ボタン等にカーソルを乗せると、色の変化などでそこにボタンがある事を示します。
    カーソルを乗せて少し待つとツールチップが表示されますので、それで何のボタンか判断して下さい。

以上が基本的な使用方法となります。


現在の色

ツール本体で現在扱っている色が現在の色です。
ツール本体で扱える色は常にこの一色のみです。
複数の色を保持しておくには色リストへの追加などが必要となります。

HSV操作用に拡張された画面 スポイト中の画面

HSV値操作がONの状態の画面です。
操作項目が増えた分、画面が少し拡張されます。
さらに右側はスポイト中の画面です。

  1. 小窓です、通常時は現在の色で塗り潰されています。
    ここをドラッグする事でスポイトモードとなり、画面上の色を取得できます。
    また、ダブルクリックする事で色選択ダイアログを表示します。
  2. RGB値の操作バーです。バーはマウスで操作します。
    操作中の項目に対してはマウスホイールやキーボード操作も有効となります。
    カーソルキーで数値の増減、数字キーで数値の直接入力も可能ですが少々クセがあります。
    常に0埋め3桁数字で入力するようにすると意図した数値が入力できると思います。
  3. HSV値の操作バーです。操作自体はRGB値のものと同様です。
    通常Hの値は0~359の範囲を取りますが、設定でHSP式の0~191の範囲にする事もできます。
    HSV値は、もう少し赤っぽく・もう少し薄く・もう少し暗くといった感覚的な微調整に向いてると思います。
  4. このスキンでは色の色相環が表示されていますが、この色相環自体に意味はありません
    右側の画像のように、スポイト時の現在位置の色と座標を表示する為の領域として機能します。
  5. 現在の色のRGB値が、選択中の表記形式で表示されます。
    クリックする事で表示されている文字列をクリップボードへコピーします。
    またの真下のボタンで、現在の色を色リストへ追加します。


色リスト

色リスト

色リストの画面です。
ボタンやメニューから表示できる他、リストに色を追加すると自動的に表示されます。

新しく登録された色は一番上に配置されます。
実際に登録された色は左端の色で、RGB値もその色のものが表示されます。
右に並ぶ色は、登録色を基にした関連色です。
登録色・関連色ともに、ダブルクリックする事で現在の色として取得できます。

初期設定では16色まで色リストに登録できます。
それ以上登録した場合は、一番下の色がリストから無くなります。

このスキンの場合、画面上部のボタンでリスト内の色の操作なども行えます。
尚、左端のグラデーション表示に特別な意味はありません

登録色と関連色

配色の参考用にこのような関連色を表示する仕様となっています。
単純に色を保持するだけならグリッドペイントでも可能です。

関連色 (拡大してます)
  1. 登録色
    メイン画面から登録された色そのものです。
    リスト画面内で表示されるRGB値はこの色のものです。
  2. トライアドA
    色相環の中で登録色と正三角形の位置に当る色です。
    この三色での配色はバランスの取れたものになるそうです。
    具体的にはHSV値のH値を120加えてSV値はそのままの色となります。
  3. トライアドB
    正三角形の3つ目。HSV値のH値を120引いた色です。
  4. 補色
    色相環で反対側の位置に当る色。
    互いの色を引き立てる効果があるけど純色などでは少々キツくなるそうです。
  5. 反転色
    RGB値のそのまま反転させた色。普通にキツい配色になりやすいです。
  6. モノクロ
    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文字分と設定しています。
    最小・最大値も同じ値に設定にしないと固定できないようです。
    ラベル表示の有無・縦横のグリッド数は、出力時のグリッドペイントの設定に準拠します。
もちろん上記以外の部分も、全てご自由に編集して頂いて構いません。


メニュー項目

スキンによってはボタンでは存在しない機能も多々あります。
しかし右クリックメニュー内の項目からならどのスキンでも全ての機能が使用可能です。
また各操作に割り振られたショートカットキーからも同様に実行できます。


キー割り当て

以下は初期設定でのキー割り当てです。
各操作へのショートカットキーは、右クリックメニュー内で確認可能です。
1つの操作に複数のキーを割り当てた場合、最初のキーしか表示されませんがちゃんと有効なハズです。

ショートカットキー
操作キー
RGB値を(現在の表記形式で)コピーCtrl + C
Enter
色リストへ追加Ctrl + A
RGB値を自動入力Ctrl + Q
RGB値の貼り付けCtrl + V
ランダムカラーCtrl + R
HSV操作 ON/OFFCtrl + H
色リスト画面 ON/OFFCtrl + L
グリッドペイント画面 ON/OFFCtrl + 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値操作
操作キー
数値+1right(→)
num +
数値-1left(←)
num -
数値+8up(↑)
数値-8down(↓)
数値+16PageUp
num *
数値-16PageDown
num /
数値/10BackSpace
数値最大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
※この操作のキーと他の操作のキー割り当ては重複可能です。