トップ > 知っておきたい機能 > フィルとストローク >
フィル/ストロークダイアログの詳細(その2)

フィル/ストロークダイアログの見かたと使い方(続き)

前の記事の『フィル/ストロークダイアログの詳細』からの続きです。 この記事では、塗りの種類について詳しく説明します

塗りの種類
塗りの種類

前の記事でも説明したように、塗りの種類はボタンで選択します。 ボタンは選択式であり、どれか1つしか選択することはできません。 塗りの種類のボタンの意味は以下の通りです。

操作/コマンド 説明
[塗りなし]ボタン [塗りなし]
オブジェクトからフィル(またはストローク)を削除する
[単一色]ボタン [単一色]
単一色で塗る
[線形グラデーション]ボタン [線形グラデーション]
線形グラデーションで塗る
※始点から終点に線状に色が変化するグラデーション
[放射グラデーション]ボタン [放射グラデーション]
放射グラデーションで塗る
※中心点から放射状に色が変化するグラデーション
[メッシュグラデーション]ボタン [メッシュグラデーション]
メッシュグラデーションで塗る
※格子状/円錐状の網目ごとに色が変化するグラデーション
[パターン]ボタン [パターン]
パターンで塗る
※パターンとは図柄のこと
※パターンはいくつも用意されている
※自分でパターンを作ることもできる
[スウォッチ]ボタン [スウォッチ]
スウォッチから選んだ設定で塗る
※スウォッチとは塗りの色見本のこと
※色見本に登録されている色の中から選ぶということ
[塗りをアンセット]ボタン [塗りをアンセット]
塗りをアンセットにする
※クローンで複製する場合に必要になることがある
※クローン元をアンセットにするとクローン先のオブジェクトごとに塗りを設定できる

選択した塗りの種類によりダイアログの表示内容が切り替わります。 塗りの種類ごとの設定項目は以下の通りです。

[塗りなし]ボタンを選択した場合の設定項目

[塗りなし]ボタン([塗りなし]ボタン)を選択した場合は、オブジェクトからフィル(またはストローク)が削除されます。 よって、何も設定するものはありません。

[塗りなし]ボタンを選択した場合の表示内容
[塗りなし]ボタンを選択した場合の表示内容

上図のように何も項目は表示されません

[単一色]ボタンを選択した場合の設定項目

[単一色]ボタン([単一色]ボタン)を選択した場合は塗る色を指定する必要があり、そのための項目が表示されます

[単一色]ボタンを選択した場合の表示内容
[単一色]ボタンを選択した場合の表示内容

上図のように上部には色の指定方法の選択リストがあり、その下にはH / S / L / Aの入力欄(スライダと数値入力)があります。

また、さらに下にはアイコン([カラーマネジメントされています]アイコン / [色域の範囲外です!]アイコン / [インクが多すぎます!]アイコン)と[スポイトツール]ボタン([スポイトツール]ボタン)、およびRGBAの入力欄も表示されています。

色の指定方法と色の入力欄

では、それぞれもう少し詳しく見ていきましょう。 まずは、色の指定方法と色の入力欄からです。

色の指定方法と色の入力欄
色の指定方法と色の入力欄

『色の指定方法』は名前の通り色の指定方法を切り替えるためのもので、

  1. HSL
  2. HSV
  3. RGB
  4. CMYK
  5. HSLuv
  6. CMS

の6つの選択肢があります。

その下の、H / S / L / Aの入力欄は、色の入力欄です。 これらの項目は、選択した色の指定方法によって変化します。 初期状態では色の指定方法に "HSL" が選択されているため、H(色相)・S(彩度)・L(輝度)・A(不透明度)の入力欄が表示されています。

色の指定方法の各選択肢の意味とそれぞれの色の指定方法は以下の通りです。


色の指定方法に "HSL" を選択した場合は、HSL形式で色を指定します。

色の指定方法に "HSL" を選択した場合の色の指定方法
色の指定方法に "HSL" を選択した場合の色の指定方法

Hは色相(色合い)、Sは彩度(鮮やかさ)、Lは輝度(明るさ)、Aは不透明度を表します。 なお、Hは円の角度(0 から 360)で、S / L / Aはパーセント(0 から 100)で指定します。

  1. Hは色相(色合い)
  2. Sは彩度(鮮やかさ)
  3. Lは輝度(明るさ)
  4. Aは不透明度
  5. Hは円の角度(0 から 360)で指定する
  6. S / L / Aはパーセント(0 から 100)で指定する

色の指定方法に "HSV" を選択した場合は、HSV形式で色を指定します。

色の指定方法に "HSV" を選択した場合の色の指定方法
色の指定方法に "HSV" を選択した場合の色の指定方法

Hは色相(色合い)、Sは彩度(鮮やかさ)、Vは明度(明るさ)、Aは不透明度を表します。 なお、Hは円の角度(0 から 360)で、S / V / Aはパーセント(0 から 100)で指定します。

  1. Hは色相(色合い)
  2. Sは彩度(鮮やかさ)
  3. Vは明度(明るさ)
  4. Aは不透明度
  5. Hは円の角度(0 から 360)で指定する
  6. S / V / Aはパーセント(0 から 100)で指定する
  
HSL形式とHSV形式はとても良く似ています。 HSL形式のL(輝度)は赤・緑・青成分の最大値と最小値の平均で、HSV形式のV(明度)は赤・緑・青成分の最大値です。
  
HSV形式での入力は、Inkscape 1.0から利用できるようになりました。

色の指定方法に "RGB" を選択した場合は、RGB形式で色を指定します。

色の指定方法に "RGB" を選択した場合の色の指定方法
色の指定方法に "RGB" を選択した場合の色の指定方法

Rは赤成分、Gは緑成分、Bは青成分、Aは不透明度を表します。 なお、R / G / Bは 0 から 255 の256段階で、Aはパーセント(0 から 100)で指定します。

  1. Rは赤成分
  2. Gは緑成分
  3. Bは青成分
  4. Aは不透明度
  5. R / G / Bは 0 から 255 の256段階で指定する
  6. Aはパーセント(0 から 100)で指定する

色の指定方法に "CMYK" を選択した場合は、CMYK形式で色を指定します。 なお、CMYKについては、特集 > CMYKって何だろうを参照ください。

色の指定方法に "CMYK" を選択した場合の色の指定方法
色の指定方法に "CMYK" を選択した場合の色の指定方法

Cはシアン(水色)、Mはマゼンタ(紫色)、Yはイエロー(黄色)、Kはキープレート(黒色)、Aは不透明度を表します。 なお、C / M / Y / K / Aともにパーセント(0 から 100)で指定します。

  1. Cはシアン(水色)
  2. Mはマゼンタ(紫色)
  3. Yはイエロー(黄色)
  4. Kはキープレート(黒色)
  5. Aは不透明度
  6. C / M / Y / K / Aともにパーセント(0 から 100)で指定する

色の指定方法に "HSLuv" を選択した場合は、HSLuv形式で色を指定します。

色の指定方法に "HSLuv" を選択した場合の色の指定方法
色の指定方法に "HSLuv" を選択した場合の色の指定方法

H*は色相(色合い)、S*は彩度(鮮やかさ)、L*は輝度(明るさ)、Aは不透明度を表します。 なお、H*は円の角度(0 から 360)で、S* / L* / Aはパーセント(0 から 100)で指定します。

  1. H*は色相(色合い)
  2. S*は彩度(鮮やかさ)
  3. L*は輝度(明るさ)
  4. Aは不透明度
  5. H*は円の角度(0 から 360)で指定する
  6. S* / L* / Aはパーセント(0 から 100)で指定する

色の指定方法に "CMS" を選択した場合は、CMS(カラーマネジメントシステム)を用いて色を指定します。

色の指定方法に "CMS" を選択した場合の色の指定方法

カラーマネジメントシステムを用いることで、特定の機器(モニタ・プリンタ等)ではどんな色になるかを画面上で見ることができます

カラーマネジメントシステムを用いるには、画像を出力する機器用のカラープロファイルが必要です。 カラープロファイルは機器の色の特性の情報であり、機器のメーカや標準化団体などが配布しています。

  1. カラーマネジメントシステムを用いることで、特定の機器(モニタ・プリンタ等)ではどんな色になるかを画面上で見ることができる
  2. カラーマネジメントシステムを用いるには、画像を出力する機器用のカラープロファイルが必要
  3. カラープロファイルは機器の色の特性の情報であり、機器のメーカや標準化団体などが配布している
  
カラーマネジメントについては、特集 > Inkscapeでカラーマネジメントするを参照ください。

アイコン

続いては、色の入力欄の下にある3つのアイコン([カラーマネジメントされています]アイコン / [色域の範囲外です!]アイコン / [インクが多すぎます!]アイコン)です。

アイコン
アイコン

これらのアイコン([カラーマネジメントされています]アイコン / [色域の範囲外です!]アイコン / [インクが多すぎます!]アイコン)は色の指定状態を表す表示灯、つまりインジケータです。 ユーザが色に関する設定を行ったり色を指定したりすることで自動的に点灯・消灯します。 ボタンではないのでユーザが押すことはできません。

操作/コマンド 説明
[カラーマネジメントされています]アイコン [カラーマネジメントされています]
カラーマネジメントが有効な場合に点灯する
[色域の範囲外です!]アイコン [色域の範囲外です!]
現在カラーマネジメント中の機器では表現できない色が指定されている場合に点灯する
[インクが多すぎます!]アイコン [インクが多すぎます!]
文字通りインクの使いすぎで点灯する
※と思うのですが詳細はわかりません

[スポイトツール]ボタン

次は、アイコンの右にある[スポイトツール]ボタン([スポイトツール]ボタン)です。

[スポイトツール]ボタン
[スポイトツール]ボタン

[スポイトツール]ボタン([スポイトツール]ボタン)は、一時的にスポイトツールに切り替えるためのボタンです。 [スポイトツール]ボタン([スポイトツール]ボタン)を押すとスポイトツールに切り替わり、他のオブジェクトをクリックすることで色を抽出することができます。 色の抽出後は前に選択していたツールに戻ります。

操作/コマンド 説明
[スポイトツール (画像から色を採取)]ボタン 一時的にスポイトツールに切り替わる
※他のオブジェクトをクリックすることで色を抽出できる
※色の抽出後は前に選択していたツールに戻る

では、[スポイトツール]ボタン([スポイトツール]ボタン)を使って色を抽出してみましょう。

1. [スポイトツール]ボタンを押す
1. [スポイトツール]ボタンを押す

上図のように任意のオブジェクトを(1)のように選択し、(2)の[スポイトツール]ボタン([スポイトツール]ボタン)を押します。 今回はピンク色のオブジェクトを選択しています

2. スポイトツールに切り替わっている
2. スポイトツールに切り替わっている

上図のように画面左部にあるツールボックスのスポイトツールが選択されています。 このように、[スポイトツール]ボタン([スポイトツール]ボタン)を押すと自動的にスポイトツールに切り替わります。

3. 色を抽出したいオブジェクトをクリック
3. 色を抽出したいオブジェクトをクリック

上図のように色を抽出したいオブジェクトをマウスの左ボタン(マウスの左ボタン)でクリックします。

4. ピンク色のオブジェクトが水色に変化する
4. ピンク色のオブジェクトが水色に変化する

上図のように選択していた(1)のオブジェクトの色が水色に変化します。 また、(2)のH / S / L / Aの入力欄および(3)のRGBAの入力欄にも水色がセットされています。

5. 選択ツールに戻っている
5. 選択ツールに戻っている

上図のように画面左部にあるツールボックスの選択ツールが選択されています。 このように、色の抽出後は前に選択していたツールに戻ります。

RGBAの入力欄

最後はダイアログの右下にあるRGBAの入力欄です。 HTMLカラーコードとも呼ばれます

RGBAの入力欄
RGBAの入力欄

RGBAの入力欄は、赤成分(R)・緑成分(G)・青成分(B)・不透明度(A)を16進数のカラーコードで確認・修正するためのものです。

  
"HTMLカラーコード" で検索すればHTML表記での色見本のサイトがたくさん見つかります。

R / G / B / Aをそれぞれ2桁の16進数で表現するため、"0480e8ff" のように全部で8桁になります。 "0480e8ff" の場合は、R / G / B / Aのそれぞれの強度は以下になります。

成分 強度(16進数)
赤成分(R) 04
緑成分(G) 80
青成分(B) e8
不透明度(A) ff

16進数であるため、下から2桁目は16の位となります。 よって、10進数との対応は以下のようになります。

16進数 10進数
00 0
01 1
02 2
03 3
04 4
05 5
06 6
07 7
08 8
09 9
0a 10
0b 11
0c 12
0d 13
0e 14
0f 15
10 16
11 17
.
.
.
省略
.
.
.
f0 240
f1 241
f2 242
f3 243
f4 244
f5 245
f6 246
f7 247
f8 248
f9 249
fa 250
fb 251
fc 252
fd 253
fe 254
ff 255

カラーホイールで色を指定することもできる

Inkscapeでは、カラーホイールで色を指定することもできます。 カラーホイールを使うことで、視覚的に色を指定することができます

ただし、カラーホイールで指定できるのは『色の指定方法』が "HSL" / "HSV" / "HSLuv" の場合のみです。

色の指定方法 カラーホイールでの指定
HSL
HSV
RGB ×
CMYK ×
HSLuv
CMS ×

では、実際にカラーホイールで色を指定してみましょう。 今回は、色の指定方法に "HSV" を選択したものとして解説します。

1. "カラーホイール" をクリックして展開する
1. "カラーホイール" をクリックして展開する

上図のように任意のオブジェクトを(1)のように選択し、(2)の色の指定方法に "HSV" を選択し、(3)の "カラーホイール" をマウスの左ボタン(マウスの左ボタン)でクリックします。

2. カラーホイールが展開される
2. カラーホイールが展開される

上図のようにカラーホイールが展開されます。 見ての通り、カラーホイールは(1)のカラフルなリングと(2)の内接する三角形で構成されています。 (1)のリングが『色相環』、(2)の三角形が『三角セレクタ』と呼ばれます。

では、もう少し詳しく見てみましょう。

3. 色相環で色相を指定し三角セレクタで彩度と輝度を指定する
3. 色相環で色相を指定し三角セレクタで彩度と輝度を指定する

上図のように色相環の右(時計の3時)の位置に(1)の線が描かれています。 この線が現在の色相の値を表しています。 色相環は右(時計の3時)が 0(ゼロ)、上(時計の12時)が 90、左(時計の9時)が 180、下(時計の6時)が 270 ですので、現在の色相は 0(ゼロ) です。

(2)の小さな円は、現在の彩度と輝度を表しています。 三角セレクタは先端の頂点が彩度 / 輝度ともに高い(濃く明るい)ことを、右の頂点が彩度が低く輝度が高い(薄く明るい)ことを、左の頂点が彩度 / 輝度ともに低い(薄く暗く)ことを表しています。 つまり、現在の彩度と輝度は、彩度が約50%で輝度が約100%ということです。

  
三角セレクタは常に(1)の線に向きます。 (1)の線に向いている頂点が三角セレクタの先端です。

では、実際にカラーホイールを使って色を指定してみましょう。 今回は、濃いやや暗い水色を指定します。 まずは、色相を指定しましょう。

4. 色相環の左(時計の9時)をクリックする
4. 色相環の左(時計の9時)をクリックする

上図のように色相環の左(時計の9時)をクリックします。

5. 現在の色相を表す線が左(時計の9時)に移動する
5. 現在の色相を表す線が左(時計の9時)に移動する

上図のように現在の色相を表す線が左(時計の9時)に移動します。 また、三角セレクタが連動して回転し、先端が左を向きました。 これで、色相の指定は終わりです。

次に彩度と輝度を指定しましょう。 彩度を 100% に、輝度を 50% に指定します。

6. 三角セレクタの彩度 100% 輝度 50% の位置をクリックする
6. 三角セレクタの彩度 100% 輝度 50% の位置をクリックする

上図のように三角セレクタの彩度が 100% で輝度が 50% の位置をマウスの左ボタン(マウスの左ボタン)でクリックします。

7. 現在の彩度と輝度を表す小さな円が移動する
7. 現在の彩度と輝度を表す小さな円が移動する

上図のように現在の彩度と輝度を表す小さな円が移動します。 これで、彩度と輝度の指定も終わりました。

もう、カラーホイールは不要です。 折りたたんでおきましょう。

8. "カラーホイール" をクリックして折りたたむ
8. "カラーホイール" をクリックして折りたたむ

上図のように "カラーホイール" をマウスの左ボタン(マウスの左ボタン)でクリックします。

9. 色の入力欄に濃いやや暗い水色が設定されている
9. 色の入力欄に濃いやや暗い水色が設定されている

上図のように選択していた(1)のオブジェクトの色が濃いやや暗い水色に変化します。 また、(2)のH / S / V / Aの入力欄および(3)のRGBAの入力欄にも同色がセットされています。

  1. H(色相)は色相環から選ぶ
  2. S(彩度)は色相環に内接する三角セレクタ内の位置で選ぶ
  3. V(輝度)は色相環に内接する三角セレクタ内の位置で選ぶ

次の記事へ

長くなってきましたので、一区切りします。 続きは次の記事を参照ください

ページの先頭へ
 

まとめ

[塗りなし]ボタン([塗りなし]ボタン)を選択した場合は、オブジェクトからフィル(またはストローク)が削除されます。

[単一色]ボタン([単一色]ボタン)を選択した場合は、塗る色を指定する必要があります。 色の指定方法には、HSL / HSV / RGB / CMYK / HSLuv / CMSの6つの方法があります。 色の指定方法の詳細は以下の通りです。

操作/コマンド 説明
HSL HSL形式で色を指定する
Hは色相(色合い)
Sは彩度(鮮やかさ)
Lは輝度(明るさ)
Aは不透明度
Hは円の角度(0 から 360)で指定する
S / L / Aはパーセント(0 から 100)で指定する
HSV HSV形式で色を指定する
Hは色相(色合い)
Sは彩度(鮮やかさ)
Vは明度(明るさ)
Aは不透明度
Hは円の角度(0 から 360)で指定する
S / V / Aはパーセント(0 から 100)で指定する
RGB RGB形式で色を指定する
Rは赤成分
Gは緑成分
Bは青成分
Aは不透明度
R / G / Bは 0 から 255 の256段階で指定する
Aはパーセント(0 から 100)で指定する
CMYK CMYK形式で色を指定する
Cはシアン(水色)
Mはマゼンタ(紫色)
Yはイエロー(黄色)
Kはキープレート(黒色)
Aは不透明度
C / M / Y / K / Aともにパーセント(0 から 100)で指定する
HSLuv HSLuv形式で色を指定する
H*は色相(色合い)
S*は彩度(鮮やかさ)
L*は輝度(明るさ)
Aは不透明度
H*は円の角度(0 から 360)で指定する
S* / L* / Aはパーセント(0 から 100)で指定する
CMS CMS(カラーマネジメントシステム)を用いて色を指定する

色の入力欄の下にある3つのアイコン([カラーマネジメントされています]アイコン / [色域の範囲外です!]アイコン / [インクが多すぎます!]アイコン)は色の指定状態を表す表示灯です。 ボタンではないのでユーザが押すことはできません。

アイコン 説明
[カラーマネジメントされています]アイコン [カラーマネジメントされています]
カラーマネジメントが有効な場合に点灯する
[色域の範囲外です!]アイコン [色域の範囲外です!]
現在カラーマネジメント中の機器では表現できない色が指定されている場合に点灯する
[インクが多すぎます!]アイコン [インクが多すぎます!]
文字通りインクの使いすぎで点灯する
※と思うのですが詳細はわかりません

アイコンの右にある[スポイトツール]ボタン([スポイトツール]ボタン)は、一時的にスポイトツールに切り替えるためのボタンです。

操作/コマンド 説明
[スポイトツール (画像から色を採取)]ボタン 一時的にスポイトツールに切り替わる
※他のオブジェクトをクリックすることで色を抽出できる
※色の抽出後は前に選択していたツールに戻る

ダイアログの右下にあるRGBAの入力欄は、HTMLカラーコードとも呼ばれます。 RGBAの入力欄は、赤成分・緑成分・青成分・不透明度を16進数のカラーコードで確認・修正するためのものです。

Inkscapeでは、カラーホイールで色を指定することもできます。 カラーホイールで指定できるのは『色の指定方法』が "HSL" / "HSV" / "HSLuv" の場合のみです。

色の指定方法 カラーホイールでの指定
HSL
HSV
RGB ×
CMYK ×
HSLuv
CMS ×

カラーホイールは『色相環』と呼ばれるカラフルなリングと『三角セレクタ』と呼ばれる三角形で構成されます。 色相環で色相を、三角セレクタで彩度と輝度を指定します。

ページの先頭へ