カラーコード 色見本、定義済みの色の名前16色、ウェブセーフカラー216色

JavaScript,スタイルシート サンプル集

216色 ウェブセーフカラー   Netscape140色  色の名前
リストマーク 基本の色 定義済みの色の名前16色

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です。



リストマーク 216色 ウェブセーフカラー(安全色)色見本

Windows や Macintosh などの異なるOSでも色化けをする事なく表示することができるのが、
このウェブセーフカラー216色です。


  ウェブセーフカラーは,RGB値、赤(R)緑(G)、藍(B)  カラーコードで ”#RRGGBB” を
それぞれ0〜255の256段階で色を表示している数値を6段階にしたものです。

  その6段階の数値は
10進数で0から51ずつ増加した数値(0,51,102,153,204,255)
16進数では(0,33,66,99,CC,FF)になります。これらは割合でいうと "20%" になります。
216色はRGB の各数値を 20% ずつ上げていった値を組み合わせて表示しています。

下記の表で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
▲ページ Top に戻る

リストマーク Netscape140色  色の名前

ウェブセーフカラー216色には無い、まろやかで繊細な色や
私たちが慣れ親しんだ色の名前で表示することができます。
コード順に並べてます。

Black #000000
Navy #000080
Darkblue #00008B
Mediumblue #0000CD
Blue #0000FF
Darkgreen #006400
Green #008000
Teal #008080
Darkcyan #008B8B
Deepskyblue #00BFFF
Darkturquoise #00CED1
Mediumspringgreen #00FA9A
Lime #00FF00
Springgreen #00FF7F
Aqua #00FFFF
Cyan #00FFFF
Midnightblue #191970
Dodgerblue #1E90FF
Lightseagreen #20B2AA
Forestgreen #228B22
Seagreen #2E8B57
Darkslategray #2F4F4F
Limegreen #32CD32
Mediumseagreen #3CB371
Turquoise #40E0D0
Royalblue #4169E1
Steelblue #4682B4
Darkslateblue #483D8B
Mediumturquoise #48D1CC
Indigo #4B0082
Darkolivegreen #556B2F
Cadetblue #5F9EA0
Cornflowerblue #6495ED
Mediumaquamarine #66CDAA
Dimgray #696969
Slateblue #6A5ACD
Olivedrab #6B8E23
Slategray #708090
Lightslategray #778899
Mediumslateblue #7B68EE
Lawngreen #7CFC00
Chartreuse #7FFF00
Aquamarine #7FFFD4
Maroon #800000
Purple #800080
Olive #808000
Gray #808080
Skyblue #87CEEB
Lightskyblue #87CEFA
Blueviolet #8A2BE2
Darkred #8B0000
Darkmagenta #8B008B
Saddlebrown #8B4513
Darkseagreen #8FBC8F
Lightgreen #90EE90
Mediumpurple #9370DB
Darkviolet #9400D3
Palegreen #98FB98
Darkorchid #9932CC
Yellowgreen #9ACD32
Sienna #A0522D
Brown #A52A2A
Darkgray #A9A9A9
Darkgray #ADD8E6
Greenyellow #ADFF2F
Paleturquoise #AFEEEE
Lightsteelblue #B0C4DE
Powderblue #B0E0E6
Firebrick #B22222
Darkgoldenrod #B8860B
Mediumorchid #BA55D3
Rosybrown #BC8F8F
Darkkhaki #BDB76B
Silver #C0C0C0
Mediumvioletred #C71585
Indianred #CD5C5C
Peru #CD853F
Chocolate #D2691E
Tan #D2B48C
Lightgre #D3D3D3
Thistle #D8BFD8
Orchid #DA70D6
Goldenrod #DAA520
Palevioletred #DB7093
Crimson #DC143C
Gainsboro #DCDCDC
Plum #DDA0DD
Burlywood #DEB887
Lightcyan #E0FFFF
Lavender #E6E6FA
Darksalmon #E9967A
Violet #EE82EE
Palegoldenrod #EEE8AA
Lightcoral #F08080
Khaki #F0E68C
Aliceblue #F0F8FF
Honeydew #F0FFF0
Azure #F0FFFF
Sandybrown #F4A460
Wheat #F5DEB3
Beige #F5F5DC
Whitesmoke #F5F5F5
Mintcream #F5FFFA
Ghostwhite #F8F8FF
Salmon #FA8072
Antiquewhite #FAEBD7
Linen #FAF0E6
Lightgoldenrodyellow #FAFAD2
Oldlace #FDF5E6
Red #FF0000
Fuchsia #FF00FF
Magenta #FF00FF
Deeppink #FF1493
Orangered #FF4500
Tomato #FF6347
Hotpink #FF69B4
Coral #FF7F50
Darkorange #FF8C00
Lightsalmon #FFA07A
Orange #FFA500
Lightpink #FFB6C1
Pink #FFC0CB
Gold #FFD700
Peachpuff #FFDAB9
Navajowhite #FFDEAD
Moccasin #FFE4B5
Bisque #FFE4C4
Mistyrose #FFE4E1
Blanchedalmond #FFEBCD
Papayawhip #FFEFD5
Lavenderblush #FFF0F5
Seashell #FFF5EE
Cornsilk #FFF8DC
Lemonchiffon #FFFACD
Floralwhite #FFFAF0
Snow #FFFAFA
Yellow #FFFF00
Lightyellow #FFFFE0
Ivory #FFFFF0
White #FFFFFF

▲ページ Top に戻る