![]() |
CSS1,CSS2では16の色の名前が定義されています。
これらの名前は、IE2.0 や Netscape Navigator 2.0 など古いブラウザでも安心して使用することができます。
カラーコード 色の名前 | |||||||
#FF0000 | Red | #00FF00 | Lime | #0000FF | blue | #000000 | Black |
#808080 | Gray | #C0C0C0 | Silver | #FFFFFF | White | #800000 | Maroon |
#008000 | Green | #000080 | Navy | #800080 | Purple | #808000 | Olive |
#008080 | Teal | #FFFF00 | Yellow | #FF00FF | Fuchsia | #00FFFF | Aqua |
色の指定の仕方 色の名前又はカラーコードで指定します。 | |
<P style="color : red;">文字の色</P> | 文字の色 |
<P style="background-color : #00FFFF;">背景色</P> | 背景色 |
<FONTcolor="green">HTMLタグで指定</FONT> | HTMLタグで指定 |
<STYLE type="text/css"> <!-- .clr{ color : #FFFFFF; background-color : purple; } --> </STYLE> |
スタイルシートで 文字色、背景色を 指定しています。 クラス名はclrです。 |
![]() |
Windows や Macintosh などの異なるOSでも色化けをする事なく表示することができるのが、 ウェブセーフカラーは,RGB値、赤(R)、緑(G)、藍(B) カラーコードで ”#RRGGBB” を |
下記の表でRGBの各数値が0,33,66・・・・・と増加して色が変化していく様子がよく判ります | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
black | #000000 | #000033 | #000066 | #000099 | #0000cc | blue | #0000ff | ||||
#003300 | #003333 | #003366 | #003399 | #0033cc | #0033ff | ||||||
#006600 | #006633 | #006666 | #006699 | #0066cc | #0066ff | ||||||
#009900 | #009933 | #009966 | #009999 | #0099cc | #0099ff | ||||||
#00cc00 | #00cc33 | #00cc66 | #00cc99 | #00cccc | #00ccff | ||||||
lime | #00ff00 | #00ff33 | #00ff66 | #00ff99 | #00ffcc | aqua | #00ffff | ||||
#330000 | #330033 | #330066 | #330099 | #3300cc | #3300ff | ||||||
#333300 | #333333 | #333366 | #333399 | #3333cc | #3333ff | ||||||
#336600 | #336633 | #336666 | #336699 | #3366cc | #3366ff | ||||||
#339900 | #339933 | #339966 | #339999 | #3399cc | #3399ff | ||||||
#33cc00 | #33cc33 | #33cc66 | #33cc99 | #33cccc | #33ccff | ||||||
#33ff00 | #33ff33 | #33ff66 | #33ff99 | #33ffcc | #33ffff | ||||||
#660000 | #660033 | #660066 | #660099 | #6600cc | #6600ff | ||||||
#663300 | #663333 | #663366 | #663399 | #6633cc | #6633ff | ||||||
#666600 | #666633 | #666666 | #666699 | #6666cc | #6666ff | ||||||
#669900 | #669933 | #669966 | #669999 | #6699cc | #6699ff | ||||||
#66cc00 | #66cc33 | #66cc66 | #66cc99 | #66cccc | #66ccff | ||||||
#66ff00 | #66ff33 | #66ff66 | #66ff99 | #66ffcc | #66ffff | ||||||
#990000 | #990033 | #990066 | #990099 | #9900cc | #9900ff | ||||||
#993300 | #993333 | #993366 | #993399 | #9933cc | #9933ff | ||||||
#996600 | #996633 | #996666 | #996699 | #9966cc | #9966ff | ||||||
#999900 | #999933 | #999966 | #999999 | #9999cc | #9999ff | ||||||
#99cc00 | #99cc33 | #99cc66 | #99cc99 | #99cccc | #99ccff | ||||||
#99ff00 | #99ff33 | #99ff66 | #99ff99 | #99ffcc | #99ffff | ||||||
#cc0000 | #cc0033 | #cc0066 | #cc0099 | #cc00cc | #cc00ff | ||||||
#cc3300 | #cc3333 | #cc3366 | #cc3399 | #cc33cc | #cc33ff | ||||||
#cc6600 | #cc6633 | #cc6666 | #cc6699 | #cc66cc | #cc66ff | ||||||
#cc9900 | #cc9933 | #cc9966 | #cc9999 | #cc99cc | #cc99ff | ||||||
#cccc00 | #cccc33 | #cccc66 | #cccc99 | #cccccc | #ccccff | ||||||
#ccff00 | #ccff33 | #ccff66 | #ccff99 | #ccffcc | #ccffff | ||||||
red | #ff0000 | #ff0033 | #ff0066 | #ff0099 | #ff00cc | fuchsia | #ff00ff | ||||
#ff3300 | #ff3333 | #ff3366 | #ff3399 | #ff33cc | #ff33ff | ||||||
#ff6600 | #ff6633 | #ff6666 | #ff6699 | #ff66cc | #ff66ff | ||||||
#ff9900 | #ff9933 | #ff9966 | #ff9999 | #ff99cc | #ff99ff | ||||||
#ffcc00 | #ffcc33 | #ffcc66 | #ffcc99 | #ffcccc | #ffccff | ||||||
yellow | #ffff00 | #ffff33 | #ffff66 | #ffff99 | #ffffcc | white | #ffffff |
![]() |
ウェブセーフカラー216色には無い、まろやかで繊細な色や
私たちが慣れ親しんだ色の名前で表示することができます。
コード順に並べてます。
|
|