.NET TIPS

Visual Studio 2012のXAMLデザイナで「色名」により色を指定するには?[VS 2012]

デジタルアドバンテージ 一色 政彦
2012/10/01

●Visual Studio 2010での色名による色指定

 WPFやSilverlightなどのXAMLを用いた開発で、Visual Studio 2010(以降、VS 2010)までのXAMLデザイナでは、次の画面のように[プロパティ]ウィンドウの機能を使って、色名(この例では「SkyBlue」を選択中)による色指定が行えた。

VS 2010のXAMLデザイナ([プロパティ]ウィンドウ)における色名による色指定

 開発者間で色味を統一する場合に、覚えにくいARGB値(=「(透明度を意味する)アルファ値」「赤」「緑」「青」のデータを順に16進数で記述したもの。各要素の値は8bitなので、16進数値は「00」〜「FF」となる)ではなく、上の画面のような色名で色を指定したケースも少なくないだろう。

●Visual Studio 2012での色名による色指定

 しかしVisual Studio 2012(以降、VS 2012)のXAMLデザイナでは、次の画面のように、「色名による色指定機能」が[プロパティ]ウィンドウに搭載されておらず、ARGB値によって色を指定しなければならなくなった。

VS 2012のXAMLデザイナ([プロパティ]ウィンドウ)におけるARGB値による色指定
ちなみに、指定したARGB値と完全に同色の既存の色名が存在する場合は、その色名がXAMLコードに自動的に書き込まれる。例えば「#FFFF0000」と入力すると、XAMLコードには「Red」という値が書き込まれる。

 とはいっても「色名による色指定」ができないわけではない。VS 2012で色名を入力したい場合は、次の画面のように、XAMLエディタのIntelliSenseを使えばよい。

VS 2012のXAMLエディタにおける色名による色指定

 だが、このIntelliSenseによる色指定の方法では、「実際の色」が見られないので、「どのような色味なのか」が分からず、色を選択しにくい。

●色名の色見本

 そこで本TIPSでは、IntelliSenseにより色指定を行う際の参考になる色見本を以下に用意した(この場所へのリンク先: 「http://www.atmarkit.co.jp/fdotnet/dotnettips/1071colorname/colorname.html#colorsample」)。注意点として、「Transparent」以外の色は全て、ARGB値におけるアルファ値が「FF」であるため、アルファ値を省略してRGB値として表記している(なお、「Transparent」はアルファ値が「00」となり完全な透明となる。「Transparent」はRGB値では表現できないため、この表では「Transparent」だけをARGB値で記載している)。

色の名前 色見本 RGB値
(16進数)
RGB値
(10進数)
色相
(色合い)
彩度
(鮮やかさ)
明度
(明るさ)
Black   #000000 (0, 0, 0) 0 0 0
DarkGreen   #006400 (0, 100, 0) 80 240 47
Maroon   #800000 (128, 0, 0) 0 240 60
DarkRed   #8B0000 (139, 0, 0) 0 240 65
Olive   #808000 (128, 128, 0) 40 240 60
Green   #008000 (0, 128, 0) 80 240 60
Teal   #008080 (0, 128, 128) 120 240 60
DarkCyan   #008B8B (0, 139, 139) 120 240 65
Navy   #000080 (0, 0, 128) 160 240 60
DarkBlue   #00008B (0, 0, 139) 160 240 65
Indigo   #4B0082 (75, 0, 130) 183 240 61
Purple   #800080 (128, 0, 128) 200 240 60
DarkMagenta   #8B008B (139, 0, 139) 200 240 65
MidnightBlue   #191970 (25, 25, 112) 160 152 64
DarkSlateGray   #2F4F4F (47, 79, 79) 120 60 59
SaddleBrown   #8B4513 (139, 69, 19) 16 182 74
DarkOliveGreen   #556B2F (85, 107, 47) 54 93 72
OliveDrab   #6B8E23 (107, 142, 35) 53 145 83
ForestGreen   #228B22 (34, 139, 34) 80 145 81
DarkTurquoise   #00CED1 (0, 206, 209) 120 240 98
MediumBlue   #0000CD (0, 0, 205) 160 240 96
DarkGoldenrod   #B8860B (184, 134, 11) 28 212 91
SeaGreen   #2E8B57 (46, 139, 87) 97 120 87
DarkViolet   #9400D3 (148, 0, 211) 188 240 99
MediumVioletRed   #C71585 (199, 21, 133) 214 194 103
Firebrick   #B22222 (178, 34, 34) 0 163 99
LightSeaGreen   #20B2AA (32, 178, 170) 117 166 98
Brown   #A52A2A (165, 42, 42) 0 142 97
Sienna   #A0522D (160, 82, 45) 12 134 96
DarkSlateBlue   #483D8B (72, 61, 139) 165 93 94
DimGray   #696969 (105, 105, 105) 0 0 98
Red   #FF0000 (255, 0, 0) 0 240 120
OrangeRed   #FF4500 (255, 69, 0) 10 240 120
DarkOrange   #FF8C00 (255, 140, 0) 21 240 120
Orange   #FFA500 (255, 165, 0) 25 240 120
Gold   #FFD700 (255, 215, 0) 33 240 120
Yellow   #FFFF00 (255, 255, 0) 40 240 120
LawnGreen   #7CFC00 (124, 252, 0) 60 240 118
Chartreuse   #7FFF00 (127, 255, 0) 60 240 120
Lime   #00FF00 (0, 255, 0) 80 240 120
SpringGreen   #00FF7F (0, 255, 127) 99 240 120
MediumSpringGreen   #00FA9A (0, 250, 154) 104 240 117
Aqua   #00FFFF (0, 255, 255) 120 240 120
Cyan   #00FFFF (0, 255, 255) 120 240 120
DeepSkyBlue   #00BFFF (0, 191, 255) 130 240 120
Blue   #0000FF (0, 0, 255) 160 240 120
Magenta   #FF00FF (255, 0, 255) 200 240 120
Fuchsia   #FF00FF (255, 0, 255) 200 240 120
Crimson   #DC143C (220, 20, 60) 232 200 112
Chocolate   #D2691E (210, 105, 30) 16 180 112
Goldenrod   #DAA520 (218, 165, 32) 28 178 117
DeepPink   #FF1493 (255, 20, 147) 218 240 129
BlueViolet   #8A2BE2 (138, 43, 226) 180 182 126
Peru   #CD853F (205, 133, 63) 19 140 126
YellowGreen   #9ACD32 (154, 205, 50) 53 145 120
LimeGreen   #32CD32 (50, 205, 50) 80 145 120
DarkOrchid   #9932CC (153, 50, 204) 186 145 119
MediumSeaGreen   #3CB371 (60, 179, 113) 97 119 112
SteelBlue   #4682B4 (70, 130, 180) 138 105 117
CadetBlue   #5F9EA0 (95, 158, 160) 121 61 120
SlateGray   #708090 (112, 128, 144) 140 30 120
Gray   #808080 (128, 128, 128) 0 0 120
GreenYellow   #ADFF2F (173, 255, 47) 55 240 142
DodgerBlue   #1E90FF (30, 144, 255) 139 240 134
Turquoise   #40E0D0 (64, 224, 208) 116 172 135
RoyalBlue   #4169E1 (65, 105, 225) 150 174 136
MediumTurquoise   #48D1CC (72, 209, 204) 118 143 132
LightSlateGray   #778899 (119, 136, 153) 140 34 128
MediumOrchid   #BA55D3 (186, 85, 211) 192 141 139
IndianRed   #CD5C5C (205, 92, 92) 0 127 139
Tomato   #FF6347 (255, 99, 71) 6 240 153
MediumAquamarine   #66CDAA (102, 205, 170) 106 121 144
SlateBlue   #6A5ACD (106, 90, 205) 165 128 138
DarkKhaki   #BDB76B (189, 183, 107) 37 91 139
Coral   #FF7F50 (255, 127, 80) 10 240 157
CornflowerBlue   #6495ED (100, 149, 237) 145 190 158
MediumPurple   #9370DB (147, 112, 219) 173 143 155
Orchid   #DA70D6 (218, 112, 214) 201 141 155
PaleVioletRed   #DB7093 (219, 112, 147) 226 143 155
RosyBrown   #BC8F8F (188, 143, 143) 0 60 155
DarkSeaGreen   #8FBC8F (143, 188, 143) 80 60 155
DarkGray   #A9A9A9 (169, 169, 169) 0 0 159
LightSalmon   #FFA07A (255, 160, 122) 11 240 177
HotPink   #FF69B4 (255, 105, 180) 220 240 169
SandyBrown   #F4A460 (244, 164, 96) 18 208 160
MediumSlateBlue   #7B68EE (123, 104, 238) 165 191 160
Salmon   #FA8072 (250, 128, 114) 4 223 171
DarkSalmon   #E9967A (233, 150, 122) 10 171 167
BurlyWood   #DEB887 (222, 184, 135) 22 136 168
Tan   #D2B48C (210, 180, 140) 22 105 164
Aquamarine   #7FFFD4 (127, 255, 212) 106 240 179
PaleGreen   #98FB98 (152, 251, 152) 80 222 189
LightSkyBlue   #87CEFA (135, 206, 250) 135 220 181
LightCoral   #F08080 (240, 128, 128) 0 189 173
Khaki   #F0E68C (240, 230, 140) 36 184 178
LightGreen   #90EE90 (144, 238, 144) 80 176 179
Violet   #EE82EE (238, 130, 238) 200 182 173
SkyBlue   #87CEEB (135, 206, 235) 131 171 174
Plum   #DDA0DD (221, 160, 221) 200 113 179
Silver   #C0C0C0 (192, 192, 192) 0 0 180
PaleGoldenrod   #EEE8AA (238, 232, 170) 36 160 192
PaleTurquoise   #AFEEEE (175, 238, 238) 120 155 194
PowderBlue   #B0E0E6 (176, 224, 230) 124 124 191
LightBlue   #ADD8E6 (173, 216, 230) 129 127 189
LightSteelBlue   #B0C4DE (176, 196, 222) 142 98 187
Thistle   #D8BFD8 (216, 191, 216) 200 58 191
PeachPuff   #FFDAB9 (255, 218, 185) 18 240 207
NavajoWhite   #FFDEAD (255, 222, 173) 23 240 201
Bisque   #FFE4C4 (255, 228, 196) 21 240 212
Moccasin   #FFE4B5 (255, 228, 181) 25 240 205
LightPink   #FFB6C1 (255, 182, 193) 233 240 205
Wheat   #F5DEB3 (245, 222, 179) 26 184 199
Gainsboro   #DCDCDC (220, 220, 220) 0 0 207
LightGray   #D3D3D3 (211, 211, 211) 0 0 198
MistyRose   #FFE4E1 (255, 228, 225) 4 240 225
BlanchedAlmond   #FFEBCD (255, 235, 205) 24 240 216
LemonChiffon   #FFFACD (255, 250, 205) 36 240 216
Pink   #FFC0CB (255, 192, 203) 233 240 210
PapayaWhip   #FFEFD5 (255, 239, 213) 24 240 220
LightYellow   #FFFFE0 (255, 255, 224) 40 240 225
AntiqueWhite   #FAEBD7 (250, 235, 215) 22 186 218
LightGoldenrodYellow   #FAFAD2 (250, 250, 210) 40 192 216
Snow   #FFFAFA (255, 250, 250) 0 240 237
SeaShell   #FFF5EE (255, 245, 238) 16 240 232
FloralWhite   #FFFAF0 (255, 250, 240) 26 240 232
Cornsilk   #FFF8DC (255, 248, 220) 32 240 223
Beige   #F5F5DC (245, 245, 220) 40 133 218
Ivory   #FFFFF0 (255, 255, 240) 40 240 232
Honeydew   #F0FFF0 (240, 255, 240) 80 240 232
LightCyan   #E0FFFF (224, 255, 255) 120 240 225
Azure   #F0FFFF (240, 255, 255) 120 240 232
LavenderBlush   #FFF0F5 (255, 240, 245) 226 240 232
Linen   #FAF0E6 (250, 240, 230) 20 160 225
Lavender   #E6E6FA (230, 230, 250) 160 160 225
MintCream   #F5FFFA (245, 255, 250) 100 240 235
AliceBlue   #F0F8FF (240, 248, 255) 138 240 232
GhostWhite   #F8F8FF (248, 248, 255) 160 240 236
OldLace   #FDF5E6 (253, 245, 230) 26 204 227
WhiteSmoke   #F5F5F5 (245, 245, 245) 0 0 230
White   #FFFFFF (255, 255, 255) 0 0 240
Transparent   #00FFFFFF アルファ値が0 - - -
色見本(濃い色から薄い色の順)
これらの色名は、Brushesクラス(System.Windows.Media名前空間)で定義されている静的プロパティである。これらのプロパティの型は全て、SolidColorBrushクラス(System.Windows.Media)である。

●色見本を上手に活用するには?

 上の色見本は、濃い色から薄い色の順に並んでおり、単純に「色見本から色を探したい」という場合にも便利だろう。色見本の位置にジャンプできるようにしているので、そのリンクをVS 2012のIDEから簡単に呼び出せるようにして、この色見本を有効に活用していただけるとうれしい。

 その手順を簡単に説明しておこう。

 メニューバーの[ツール]−[外部ツール]を実行し、表示される[外部ツール]ダイアログで[追加]ボタンをクリックし、

[タイトル]欄に「色名による色見本(&M)」を、
[コマンド]欄に「C:\Program Files\Internet Explorer\iexplore.exe」(環境によっては異なる場合があるので注意。Internet Explorer以外のブラウザを指定してもよい)を、
[引数]欄に「http://www.atmarkit.co.jp/fdotnet/dotnettips/1071colorname/colorname.html#colorsample」を、

指定して、[OK]ボタンをクリックすればよい。これで設定は完了だ。

 以降、メニューバーの[ツール]−[色名による色見本]を実行すれば(もしくはアクセラレータ・キーとして[Alt]+[T]、[M]キーを押せば)、Internet Explorerで上の色見本が開かれる。End of Article

カテゴリ:Visual Studio 2012 処理対象:IDE

この記事と関連性の高い別の.NET TIPS
コンソール・アプリケーションで文字色や背景色を変えるには?
HTMLカラーの色名表記と16進表記を相互に変換するには?
DataGridコントロールで入力中のセルをハイライト表示するには?
画像の背景部分を透明にするには?
DataGridコントロールで1行おきに色付けするには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」

@IT Special

- PR -

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH