.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で上の色見本が開かれる。
| カテゴリ：Visual Studio 2012 処理対象：IDE |
|
||||||||||||||||||||||||||||
 |
「.NET TIPS」 |
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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
Copyright © ITmedia, Inc. All Rights Reserved.