スタイルシートの道具箱
当サイトについて リンク集
基礎編1
基礎編2
色リファレンス
小技集
テキスト
フォント
背景
配置
ボーダー
ボックス
リスト
テーブル
フィルタ
その他
 初心者による初心者の為のスタイルシート・リファレンス! 基礎から応用までの解説とサンプルを是非あなたのホームページ作りに生かして下さい!
色リファレンス トップページ
色リファレンス:目次

■設定方法

▲ページTOPへ
色の指定方法には、キーワードによる指定方法と、RGB値による指定方法があります。

キーワードによる指定

色の英語名を使い色を示すのがキーワードによる指定の一般的な方法です。
しかしred,blueといった通常の色の名前以外にも、Windowsが使用しているシステムカラーによる指定も可能です。

RGB値よる指定

一方RGB値による指定ですが、これは色の三原色である赤(Red)、緑(Green)、青(Blue)について
それぞれを256段階で表現し、全体の配分によって色を特定する方法です。 つまり3つの数値により決定します。

数値として利用されるのは通常は二つの16進数(00-FF)がポピュラーです。大文小文字は関係ありません。
これ以外にも10進数(0-255)や(パーセント:0-100%)を使う事も出来ます。

具体的な表記は以下のようになります。(Rが赤、Gが緑、Bが青の数値)
16進: #RRGGBB 又は#RGB   ※R,G,Bはそれぞれ0〜Fを示す
10進: 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%)



■色リファレンス

▲ページTOPへ

基本16色

どの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
ウィンドウのテキスト
▲ページTOPへ