色の指定

  
  10進数での指定

Photoshop などで描画色や背景色のRGB値を調べて、 R (赤)、G (緑)、B (青) の値をそれぞれ0〜255の段階で表わします。ここで得られた10進数の値を R=r, G=g, B=b とすると、これをそのまま使った色指定は

rgb(r,g,b)

とします。color:rgb(r,g,b) は PageMill はサポートしていません。BGCOLOR="rgb(50,80,45)" などとソースモードで色を指定しても、入力モードにすると全て #00000 に変えられてしまいます。background:rgb(50,80,45) とする場合もサポートはしていませんが、入力モードにしても変換されることがないので、十分使うことができます。
 

 
  パーセントでの指定

10進数で得た R (赤)、G (緑)、B (青) の値をそれぞれ0〜100%の階調で表わします。ここで得られた値を R=r%, G=g%, B=b %とすると、パーセントでの色指定は

rgb(r%,g%,b%)

とします。光の3原色の濃淡から、ある程度直感的に色彩を連想することも不可能ではありませんが、PageMill はサポートしていません。10進数の指定の場合と同じ結果になります。
 

 16進数での指定

10進数で得られたRGB値を16進数に換算し

color:#rrggbb や BGCOLOR="#rrggbb"

などとします。経験的には、color:rrggbb としても問題なく表示されました。10進数の0〜9が00〜09に、10〜15が0A〜0Fになりますから、方程式を工夫すれば、案外上手くいくかも。16進数は全てのブラウザであらゆる場合に使え、細かく指定できるので便利ですが、直感的ではないですね。
 

  16階調の指定

R (赤)、G (緑)、B (青) の値をそれぞれ16の階調で16進数で color:#rgb や BGCOLOR="#rgb" などと指定する方法があります。計算上、163=4096色が可能ですが、PageMill はサポートしていません。10進数での指定と同じ結果になります。
 

 Web Safe Color の指定

16進数のR (赤)、G (緑)、B (青) の値をそれぞれ 00, 33, 66, 99, cc, ff の6の階調で指定する Web Safe Colors と呼ばれる方法があります。計算上、63=216色が可能で、これを用いればOSやブラウザによる色化けを予防することができます。実質的に16進数のRGB値ですが、10進数やパーセントでも同じ結果が得られます。

色見本はこちらをご覧ください。
 

 事前定義色での指定

16種類の事前に定義された色名で指定します。覚えやすいのですが、中間色がないので不便です。次の色名での指定でも同じですが、aqua に対して cyan、fuchsia に対して magenta をサポートしていないブラウザもあるそうです。

 

#00ffff
aqua (cyan)
#000000
black
#0000ff
blue
#ff00ff
fuchsia (magenta)
#808080
gray
#008000
green
#00ff00
lime
#800000
maroon
#000080
navy
#808000
olive
#800080
purple
#ff0000
red
#16163f
silver
#008080
teal
#ffffff
white
#ffff00
yellow

 

 色名での指定

16色の事前定義色を含む140種類の色が名前で指定でき、あらゆる場合に使えます。そのうえ嬉しいことに、色名で指定した背景色を PageMill は16進数のrgb値に自動で書き換えてくれます。color:palegoldenrod の書式ではそのままですが、ソースモードで <BODY BGCOLOR="palegoldenrod"> と入れて編集モードに戻すと、ちゃんと <BODY BGCOLOR="#eee8aa"> に書き替えられています。ただしミススペルは黒になってしまいますから、英語の得意な人は、gray に対して lightgrey だということに注意してください。

color:palegoldenrod や BGCOLOR="palegoldenrod"

などとして使います。下の色見本では16進数のrgb値順に縦に配列してあります。ちなみに、このページの背景色は linen です。余裕がある人は、似た色をグラデーションで並べたり、アルファベット順に並べたりしてはいかがですか?

 

#000000
black
#48d1cc
mediumturquoise
#9400d3
darkviolet
#dc143c
crimson
#ff1493
deeppink
#000080
navy
#4b0082
indigo
#98fb98
palegreen
#dcdcdc
gainsboro
#ff4500
orangered
#00008b
darkblue
#556b2f
darkolivegreen
#9932cc
darkorchid
#dda0dd
plum
#ff6347
tomato
#0000cd
mediumblue
#5f9ea0
cadetblue
#9acd32
yellowgreen
#deb887
burlywood
#ff69b4
hotpink
#0000ff
blue
#6495ed
cornflowerblue
#a0522d
sienna
#e0ffff
lightcyan
#ff7f50
coral
#008000
green
#66cdaa
mediumaquamarine
#a52a2a
brown
#e6e6fa
lavender
#ff8c00
darkorange
#008080
teal
#696969
dimgray
#a9a9a9
darkgray
#e9967a
darksalmon
#ffa500
orange
#006400
darkgreen
#6a5acd
slateblue
#add8e6
lightblue
#ee82ee
violet
#ffa07a
lightsalmon
#008b8b
darkcyan
#6b8e23
olivedrab
#adff2f
greenyellow
#eee8aa
palegoldenrod
#ffb6c1
lightpink
#00bfff
deepskyblue
#708090
slategray
#afeeee
paleturquoise
#f08080
lightcoral
#ffc0cb
pink
#00ced1
darkturquoise
#778899
lightslategray
#b0c4de
lightsteelblue
#f0e68c
khaki
#ffd700
gold
#00fa9a
mediumspringgreen
#7b68ee
mediumslateblue
#b0e0e6
powderblue
#f0f8ff
aliceblue
#ffdab9
peachpuff
#00ff00
lime
#7cfc00
lawngreen
#b22222
firebrick
#f0fff0
honeydew
#ffdead
navajowhite
#00ff7f
springgreen
#7fffd4
aquamarine
#b8860b
darkgoldenrod
#f0ffff
azure
#ffe4b5
moccasin
#00ffff
cyan
#7fff00
chartreuse
#ba55d3
mediumorchid
#f4a460
sandybrown
#ffe4c4
bisque
#00ffff
aqua
#800000
maroon
#bc8f8f
rosybrown
#f5deb3
wheat
#ffe4e1
mistyrose
#1e90ff
dodgerblue
#800080
purple
#bdb76b
darkkhaki
#f5f5dc
beige
#ffebcd
blanchedalmond
#191970
midnightblue
#808000
olive
#c0c0c0
silver
#f5f5f5
whitesmoke
#ffefd5
papayawhip
#20b2aa
lightseagreen
#808080
gray
#c71585
mediumvioletred
#f5fffa
mintcream
#fff0f5
lavenderblush
#228b22
forestgreen
#87ceeb
skyblue
#cd5c5c
indianred
#f8f8ff
ghostwhite
#fff8dc
cornsilk
#2e8b57
seagreen
#87cefa
lightskyblue
#cd853f
peru
#fa8072
salmon
#fff5ee
seashell
#2f4f4f
darkslategray
#8a2be2
blueviolet
#d2691e
chocolate
#faebd7
antiquewhite
#fffacd
lemonchiffon
#3cb371
mediumseagreen
#8b0000
darkred
#d2b48c
tan
#faf0e6
linen
#fffaf0
floralwhite
#32cd32
limegreen
#8b4513
saddlebrown
#d3d3d3
lightgrey
#fafad2
lightgoldenrodyellow
#fffafa
snow
#40e0d0
turquoise
#8b008b
darkmagenta
#d8bfd8
thistle
#fdf5e6
oldlac
#ffff00
yellow
#4169e1
royalblue
#8fbc8f
darkseagreen
#da70d6
orchid
#ff0000
red
#ffffe0
lightyellow
#4682b4
steelblue
#90ee90
lightgreen
#daa520
goldenrod
#ff00ff
fuchsia
#fffff0
ivory
#483d8b
darkslateblue
#9370db
mediumpurple
#db7093
palevioletred
#ff00ff
magenta
#ffffff
white

 

 
SEO [PR] !uO z[y[WJ Cu