 |
| ||||||||||||||||
| 初心者による初心者の為のスタイルシート・リファレンス！ 基礎から応用までの解説とサンプルを是非あなたのホームページ作りに生かして下さい！ | |||||||||||||||||
| 色リファレンス |  トップページ |
色リファレンス：目次
■設定方法
色の指定方法には、キーワードによる指定方法と、RGB値による指定方法があります。
しかしred,blueといった通常の色の名前以外にも、Windowsが使用しているシステムカラーによる指定も可能です。
それぞれを256段階で表現し、全体の配分によって色を特定する方法です。 つまり３つの数値により決定します。
数値として利用されるのは通常は二つの16進数（00-FF）がポピュラーです。大文小文字は関係ありません。
これ以外にも10進数（0-255）や％（パーセント：0-100%）を使う事も出来ます。
具体的な表記は以下のようになります。(Rが赤、Gが緑、Bが青の数値)
16進数表示で#RGBとした場合、例えば#9cfとした場合、#99ccffと解釈されます。
表記例(例えば"color":の後に続けて以下の数字を指定した場合の色)：
16進数： #228b22 #ff4500 #0000ff
10進数： rgb(192,128,192) rgb(88,100,255) rgb(0,0,255)
％： rgb(0%,100%,100%) rgb(30%,60%,90%) rgb(21%,87%,0%)
キーワードによる指定
色の英語名を使い色を示すのがキーワードによる指定の一般的な方法です。しかしred,blueといった通常の色の名前以外にも、Windowsが使用しているシステムカラーによる指定も可能です。
RGB値よる指定
一方RGB値による指定ですが、これは色の三原色である赤（Red）、緑（Green）、青（Blue）についてそれぞれを256段階で表現し、全体の配分によって色を特定する方法です。 つまり３つの数値により決定します。
数値として利用されるのは通常は二つの16進数（00-FF）がポピュラーです。大文小文字は関係ありません。
これ以外にも10進数（0-255）や％（パーセント：0-100%）を使う事も出来ます。
具体的な表記は以下のようになります。(Rが赤、Gが緑、Bが青の数値)
１６進： #RRGGBB 又は#RGB ※R,G,Bはそれぞれ0〜Fを示す
１０進： rgb(n,n,n) ※nは0〜255を示す
％： rgb(n%,n%,n%) ※nは1〜100を示す
16進数表示で#RGBとした場合、例えば#9cfとした場合、#99ccffと解釈されます。
表記例(例えば"color":の後に続けて以下の数字を指定した場合の色)：
16進数： #228b22 #ff4500 #0000ff
10進数： rgb(192,128,192) rgb(88,100,255) rgb(0,0,255)
％： rgb(0%,100%,100%) rgb(30%,60%,90%) rgb(21%,87%,0%)
■色リファレンス
基本１６色
どのPCやブラウザでも安心して利用出来るHTMLの勧告で定義された16色です。|
white #ffffff silver #c0c0c0 gray #808080 black #000000 |
navy #000080 blue #0000ff aqua #00ffff teal #008080 |
green #008000 lime #00ff00 olive #808000 purple #800080 |
red #ff0000 fuchsia #ff00ff maroon #800000 yellow #ffff00 |
WEBセーフカラー
RGBの各色を6段階に分けて組み合わされる216色。16進では00,33,66,99,cc,ffの組み合わせとなる。何故セーフかと言うと、これらは表示色数256色の画面で、WindowsとMacintoshで正しく表示される色だからです。
これ以外の色を使った場合、216色のうち最も近い色に変換されてしまいます。
従ってWEBセーフカラーの範囲で色を選べば、どの閲覧者にも期待通りの色を見せる事が出来ます。
なお以下のセーフカラー一覧では、見易くするため表記を#RRGGBBでは無く#RGBとしました。
| #FFF | #FFC | #FF9 | #FF6 | #FF3 | #FF0 |
| #FCF | #FCC | #FC9 | #FC6 | #FC3 | #FC0 |
| #F9F | #F9C | #F99 | #F96 | #F93 | #F90 |
| #F6F | #F6C | #F69 | #F66 | #F63 | #F60 |
| #F3F | #F3C | #F39 | #F36 | #F33 | #F30 |
| #F0F | #F0C | #F09 | #F06 | #F03 | #F00 |
| #CFF | #CFC | #CF9 | #CF6 | #CF3 | #CF0 |
| #CCF | #CCC | #CC9 | #CC6 | #CC3 | #CC0 |
| #C9F | #C9C | #C99 | #C96 | #C93 | #C90 |
| #C6F | #C6C | #C69 | #C66 | #C63 | #C60 |
| #C3F | #C3C | #C39 | #C36 | #C33 | #C30 |
| #C0F | #C0C | #C09 | #C06 | #C03 | #C00 |
| #9FF | #9FC | #9F9 | #9F6 | #9F3 | #9F0 |
| #9CF | #9CC | #9C9 | #9C6 | #9C3 | #9C0 |
| #99F | #99C | #999 | #996 | #993 | #990 |
| #96F | #96C | #969 | #966 | #963 | #960 |
| #93F | #93C | #939 | #936 | #933 | #930 |
| #90F | #90C | #909 | #906 | #903 | #900 |
| #6FF | #6FC | #6F9 | #6F6 | #6F3 | #6F0 |
| #6CF | #6CC | #6C9 | #6C6 | #6C3 | #6C0 |
| #69F | #69C | #699 | #696 | #693 | #690 |
| #66F | #66C | #669 | #666 | #663 | #660 |
| #63F | #63C | #639 | #636 | #633 | #630 |
| #60F | #60C | #609 | #606 | #603 | #600 |
| #3FF | #3FC | #3F9 | #3F6 | #3F3 | #3F0 |
| #3CF | #3CC | #3C9 | #3C6 | #3C3 | #3C0 |
| #39F | #39C | #399 | #396 | #393 | #390 |
| #36F | #36C | #369 | #366 | #363 | #360 |
| #33F | #33C | #339 | #336 | #333 | #330 |
| #30F | #30C | #309 | #306 | #303 | #300 |
| #0FF | #0FC | #0F9 | #0F6 | #0F3 | #0F0 |
| #0CF | #0CC | #0C9 | #0C6 | #0C3 | #0C0 |
| #09F | #09C | #099 | #096 | #093 | #090 |
| #06F | #06C | #069 | #066 | #063 | #060 |
| #03F | #03C | #039 | #036 | #033 | #030 |
| #00F | #00C | #009 | #006 | #003 | #000 |
色の名前による指定
| white #ffffff |
snow #fffafa |
ghostwhite #f8f8ff |
| floralwhite #fffaf0 |
ivory #fffff0 |
seashell #fff5ee |
| whitesmoke #f5f5f5 |
aliceblue #f0f8ff |
lightcyan #e0ffff |
| mintcream #f5fffa |
azure #f0ffff |
honeydew #f0fff0 |
| blanchedalmond #ffebcd |
antiquewhite #faebd7 |
papayawhip #ffefd5 |
| lemonchiffon #fffacd |
cornsilk #fff8dc |
ilghtyellow #ffffe0 |
| beige #f5f5dc |
linen #faf0e6 |
oldlace #fdf5e6 |
| lavenderblush #fff0f5 |
black #000000 |
|
| gainsboro #dcdcdc |
lightgrey #d3d3d3 |
silver #c0c0c0 |
| darkgray #a9a9a9 |
gray #808080 |
dimgray #696969 |
| lightslategray #778899 |
slategray #708090 |
darkslategray #2f4f4f |
| lawngreen #7cfc00 |
greenyellow #adff2f |
chartreuse #7fff00 |
| lime #00ff00 |
limegreen #32cd32 |
yellowgreen #9acd32 |
| olive #808000 |
olivedrab #6b8e23 |
darkolivegreen #556b2f |
| forestgreen #228b22 |
darkgreen #006400 |
green #008800 |
| seagreen #2e8b57 |
mediumseagreen #3b371 |
darkseagreen #8fbc8b |
| lightgreen #90ee90 |
palegreen #98fb98 |
springgreen #00ff7f |
| mediumspringgreen #00fa9a |
teal #008080 |
darkcyan #008b8b |
| lightseagreen #20b2aa |
mediumaquamarine #66cdaa |
cadetblue #5f9ea0 |
| steelblue #4682b4 |
aquamarine #7fffd4 |
powderblue #b0e0e6 |
| paleturquoise #afeeee |
lightblue #add8e6 |
lightsteelblue #b0c4de |
| skyblue #87ceeb |
lightskyblue #87cefa |
mediumturquoise #48d1cc |
| turquoise #40e0d0 |
darkturquoise #00ced1 |
aqua #00ffff |
| red #ff0000 |
crimson #dc143c |
maroon #800000 |
| darkred #8b0000 |
brown #a52a2a |
sienna #a0522d |
| saddlebrown #8b4513 |
indianred #cd5c5c5 |
rosybrown #bc8f8f |
| lightcoral #f08080 |
salmon #fa8072 |
darksalmon #e9967a |
| coral #ff7f50 |
tomato #ff6347 |
sandybrown #f4a460 |
| lightsalmon #ffa07a |
peru #cd853f |
chocolate #d2691e |
| orangered #ff4500 |
orange #ffa500 |
darkorange #ff8c00 |
| tan #d2b48c |
peachpuff #ffdab9 |
bisque #ffe4c4 |
| moccasin #ffe4b5 |
navajowhite #ffdead |
wheat #f5deb3 |
| burlywood #deb887 |
darkgoldenrod #b8860b |
goldenrod #daa520 |
| gold #ffd700 |
yellow #ffff00 |
lightgoldenrodyellow #fafad2 |
| palegoldenrod #eee8aa |
khaki #f0e68c |
darkkhaki #bdb76b |
| cyan #00ffff |
deepskyblue #00bfff |
dodgerblue #1e90ff |
| cornflowerblue #6090ef |
royalblue #4169e1 |
blue #0000ff |
| mediumblue #0000cd |
navy #000080 |
darkblue #00008b |
| midnightblue #191970 |
darkslateblue #483d8b |
slateblue #6a5acd |
| mediumslateblue #0e00b0 |
mediumpurple #9370db |
darkorchid #9932cc |
| darkviolet #9400d3 |
blueviolet #8a2be2 |
mediumorchid #ba55d3 |
| plum #dda0dd |
lavender #e6e6fa |
thistle #d8bfd8 |
| orchid #da70d6 |
violet #ee82ee |
indigo #4b0082 |
| darkmagenta #8b008b |
purple #800080 |
mediumvioletred #c71585 |
| deeppink #ff1493 |
fuchsia #ff00ff |
magenta #ff00ff |
| hotpink #ff69b4 |
palevioletred #db7093 |
lightpink #ffb6c1 |
| pink #ffc0cb |
mistyrose #ffe4e1 |
|
システムカラーによる指定
| activeborder: アクティブなウィンドウの枠 |
activecaption: アクティブなウィンドウの タイトルバー |
| appworkspace アプリケーション内の ウィンドウの背景 |
background デスクトップの背景 |
| buttonface 立体的なボタンの表面 |
buttonhighlight 立体的なボタンの光の 当たっている面 |
| buttonshadow 立体的なボタンの影になってる面 |
buttontext 立体的なボタンのテキスト |
| captiontext タイトルバーのテキスト |
graytext 選択できないテキスト |
| highlight 選択している状態 |
highlighttext 選択しているテキスト |
| inactiveborder アクティブで無いウィンドウの枠 |
inactivecaption アクティブで無いウィンドウの タイトルバー |
| inactivecaptiontext アクティブで無いウィンドウの タイトルバーテキスト |
infobackground ツールチップの背景 |
| infotext ツールチップのテキスト |
menu メニューの背景 |
| menutext メニューのテキスト |
scrollbar スクロールバー |
| threeddarkshadow 立体的に表示される部分の暗い影 |
threedface 立体的に表示される部分の表面 |
| threedhighlight 立体的に表示される部分の 光の当たる面 |
threedlightshadow 立体的に表示される部分の 明るい影 |
| threedshadow 立体的に表示される部分の影 |
window ウィンドウの背景 |
| windowfreme ウィンドウのフレーム |
windowtext ウィンドウのテキスト |