HTML 【 色見本 】 ~ カラーチャート

interior design, renovation and technology concept - woman working with color samples for selection

背景や文字などに使う色のトーンは、Webサイトのイメージを作る重要な要素です。
HTMLでは、色をコードやカラーネームなどで指定します(指定の方法は、HTML 【 色指定 】 ~ colorの指定方法にまとめましたのでご参照下さい)。
ここでは、色見本を表示します。

目次

■基本16色
■Webセーフカラー
■カラーネーム

■基本16色

基本16色(Basic 16 Colors)とは、HTMLでカラーネームで指定して表示が可能な16種類の色のことです。標準16色ともいいます。
16進数カラーコードで、「FFと00の組合せ8色」と「80と00の組合せ8色」で、#000000(Black)が重複しているため代わりに#C0C0C0(Silver)を加えた16色です。

#000000
black
#808080
gray
#C0C0C0
silver
#FFFFFF
white
#FF0000
red
#800000
maroon
#FF00FF
fuchsia
#800080
purple
#00FF00
lime
#008000
green
#FFFF00
yellow
#808000
olive
#0000FF
blue
#000080
navy
#00FFFF
aqua
#008080
teal

▲目次へ戻る

Webセーフカラー

Webセーフカラー(Web Safe Color)とは、Web上の色をRGB値の三原色をそれぞれ6段階に分割し、「00」、「33」、「66」、「99」、「CC」、「FF」の6種類のみを組み合わせた216色のことです。
ブラウザの違い等、Web環境に左右されることが少ないため、Web上で古くから使われている色です。

#000000 #FFFFCC #99FF99 #66FFFF #3333FF #FF00FF
#333333 #FFFF99 #66FF66 #33FFFF #0000FF #FF00CC
#666666 #FFFF66 #33FF33 #00FFFF #3300FF #CC0099
#999999 #FFFF33 #00FF00 #00CCFF #3300CC #FF33CC
#CCCCCC #FFFF00 #00FF33 #0099CC #6633FF #990066
#FFFFFF #CCFF00 #00CC33 #33CCFF #330099 #CC3399
#FF3300 #99CC00 #33FF66 #006699 #6633CC #FF66CC
#CC3300 #CCFF33 #009933 #3399CC #9966FF #FF0099
#FF6633 #669900 #33CC66 #66CCFF #6600FF #660033
#993300 #99CC33 #66FF99 #0099FF #330066 #993366
#CC6633 #CCFF66 #00FF66 #003366 #663399 #CC6699
#FF9966 #99FF00 #006633 #336699 #9966CC #CC0066
#FF6600 #336600 #339966 #6699CC #6600CC #FF99CC
#663300 #669933 #66CC99 #0066CC #CC99FF #FF3399
#996633 #99CC66 #00CC66 #99CCFF #9933FF #FF0066
#CC9966 #66CC00 #99FFCC #3399FF #9900FF #990033
#CC6600 #CCFF99 #33FF99 #0066FF #660099 #CC3366
#FFCC99 #99FF33 #00FF99 #003399 #9933CC #FF6699
#FF9933 #66FF00 #009966 #3366CC #CC66FF #CC0033
#FF9900 #339900 #33CC99 #6699FF #9900CC #FF3366
#996600 #66CC33 #66FFCC #0033CC #CC33FF #FF0033
#CC9933 #99FF66 #00CC99 #3366FF #CC00FF #330000
#FFCC66 #33CC00 #33FFCC #0033FF #330033 #663333
#CC9900 #66FF33 #00FFCC #000033 #663366 #660000
#FFCC33 #33FF00 #003333 #333366 #660066 #996666
#FFCC00 #003300 #336666 #000066 #996699 #993333
#333300 #336633 #006666 #666699 #993399 #990000
#666633 #006600 #669999 #333399 #990099 #CC9999
#666600 #669966 #339999 #000099 #CC99CC #CC6666
#999966 #339933 #009999 #9999CC #CC66CC #CC3333
#999933 #009900 #99CCCC #6666CC #CC33CC #CC0000
#999900 #99CC99 #66CCCC #3333CC #CC00CC #FFCCCC
#CCCC99 #66CC66 #33CCCC #0000CC #FFCCFF #FF9999
#CCCC66 #33CC33 #00CCCC #CCCCFF #FF99FF #FF6666
#CCCC33 #00CC00 #CCFFFF #9999FF #FF66FF #FF3333
#CCCC00 #CCFFCC #99FFFF #6666FF #FF33FF #FF0000

▲目次へ戻る

■カラーネーム

HTMLではカラーコードの他にカラーネームで指定できる色もあります。
カラーネームによる指定の場合、色によってはブラウザの違い等、Web環境によって正しく表示できないこともあるので注意が必要です。

カラーサンプル カラーネーム 16進数 読み方
lightpink #FFB6C1 ライトピンク
pink #FFC0CB ピンク
crimson #DC143C クリムゾン
palevioletred #DB7093 ペールバイオレットレッド
lavenderblush #FFF0F5 ラベンダー・ブラシ
hotpink #FF69B4 ホットピンク
deeppink #FF1493 ディープピンク
mediumvioletred #C71585 ミディアムバイオレットレッド
orchid #DA70D6 オーキッド
magenta #FF00FF マゼンタ
fuchsia #FF00FF フクシャ
darkmagenta #8B008B ダークマゼンタ
purple #800080 パープル
violet #EE82EE バイオレット
plum #DDA0DD プラム
thistle #D8BFD8 シスル
mediumorchid #BA55D3 ミディアムオーキッド
darkviolet #9400D3 ダークバイオレット
darkorchid #9932CC ダークオーキッド
indigo #4B0082 インディゴ
blueviolet #8A2BE2 ブルーバイオレット
mediumpurple #9370DB ミディアムパープル
mediumslateblue #7B68EE ミディアムスレートブルー
slateblue #6A5ACD スレートブルー
darkslateblue #483D8B ダークスレートブルー
blue #0000FF ブルー
mediumblue #0000CD ミディアムブルー
darkblue #00008B ダークブルー
navy #000080 ネイビー
midnightblue #191970 ミッドナイトブルー
lavender #E6E6FA ラベンダー
ghostwhite #F8F8FF ゴーストホワイト
royalblue #4169E1 ロイヤルブルー
cornflowerblue #6495ED コーンフラワーブルー
lightsteelblue #B0C4DE ライトスティールブルー
lightslategray #778899 ライトスレートグレイ
slategray #708090 スレートグレイ
dodgerblue #1E90FF ドジャーブルー
aliceblue #F0F8FF アリスブルー
steelblue #4682B4 スティールブルー
lightskyblue #87CEFA ライトスカイブルー
skyblue #87CEEB スカイブルー
deepskyblue #00BFFF ディープスカイブルー
lightblue #ADD8E6 ライトブルー
powderblue #B0E0E6 パウダーブルー
cadetblue #5F9EA0 カデットブルー
cyan #00FFFF シアン
aqua #00FFFF アクア
darkturquoise #00CED1 ダークターコイズ
darkcyan #008B8B ダークシアン
teal #008080 ティール
darkslategray #2F4F4F ダーク・スレート・グレイ
paleturquoise #AFEEEE ペールターコイズ
lightcyan #E0FFFF ライトシアン
azure #F0FFFF アズール
mediumturquoise #48D1CC ミディアムターコイズ
lightseagreen #20B2AA ライトシーグリーン
turquoise #40E0D0 ターコイズ
aquamarine #7FFFD4 アクアマリン
mediumaquamarine #66CDAA ミディアムアクアマリン
mediumspringgreen #00FA9A ミディアムスプリンググリーン
springgreen #00FF7F スプリンググリーン
mintcream #F5FFFA ミントクリーム
mediumseagreen #3CB371 ミディアムシーグリーン
seagreen #2E8B57 シーグリーン
lime #00FF00 ライム
green #008000 グリーン
forestgreen #228B22 フォレストグリーン
palegreen #98FB98 ペールグリーン
lightgreen #90EE90 ライトグリーン
darkseagreen #8FBC8F ダークシーグリーン
honeydew #F0FFF0 ハニーデュー
darkgreen #006400 ダークグリーン
limegreen #32CD32 ライムグリーン
chartreuse #7FFF00 シャルトリューズ
lawngreen #7CFC00 ローングリーン
greenyellow #ADFF2F グリーンイエロー
darkolivegreen #556B2F ダークオリーブグリーン
yellowgreen #9ACD32 イエローグリーン
olivedrab #6B8E23 オリーブドラブ
lightgoldenrodyellow #FAFAD2 ライト・ゴールデンロッド・イエロー
yellow #FFFF00 イエロー
olive #808000 オリーブ
lightyellow #FFFFE0 ライトイエロー
beige #F5F5DC ベージュ
ivory #FFFFF0 アイボリー
darkkhaki #BDB76B ダークカーキ
palegoldenrod #EEE8AA ペールゴールデンロッド
khaki #F0E68C カーキ
lemonchiffon #FFFACD レモンシフォン
gold #FFD700 ゴールド
cornsilk #FFF8DC コーンシルク
darkgoldenrod #B8860B ダークゴールデンロッド
goldenrod #DAA520 ゴールデンロッド
wheat #F5DEB3 ウィート
oldlace #FDF5E6 オールドレース
floralwhite #FFFAF0 フローラルホワイト
orange #FFA500 オレンジ
moccasin #FFE4B5 モカシン
papayawhip #FFEFD5 パパイヤホイップ
navajowhite #FFDEAD ナバホホワイト
blanchedalmond #FFEBCD ブランチド・アーモンド
tan #D2B48C タン
antiquewhite #FAEBD7 アンティークホワイト
burlywood #DEB887 バーリーウッド
darkorange #FF8C00 ダークオレンジ
bisque #FFE4C4 ビスク
peru #CD853F ペルー
linen #FAF0E6 リネン
peachpuff #FFDAB9 ピーチパフ
sandybrown #F4A460 サンディブラウン
saddlebrown #8B4513 サドルブラウン
chocolate #D2691E チョコレート
seashell #FFF5EE シーシェル
sienna #A0522D シエナ
lightsalmon #FFA07A ライトサロモン
orangered #FF4500 オレンジレッド
coral #FF7F50 コーラル
darksalmon #E9967A ダークサロモン
tomato #FF6347 トマト
salmon #FA8072 サロモン
mistyrose #FFE4E1 ミスティローズ
red #FF0000 レッド
darkred #8B0000 ダークレッド
maroon #800000 マルーン
firebrick #B22222 ファイアブリック
brown #A52A2A ブラウン
indianred #CD5C5C インディアンレッド
lightcoral #F08080 ライトコーラル
rosybrown #BC8F8F ロージーブラウン
snow #FFFAFA スノウ
white #FFFFFF ホワイト
whitesmoke #F5F5F5 ホワイトスモーク
gainsboro #DCDCDC ゲインズボロ
lightgrey #D3D3D3 ライトグレイ
silver #C0C0C0 シルバー
darkgray #A9A9A9 ダークグレイ
gray #808080 グレイ
dimgray #696969 ディムグレイ
black #000000 ブラック

▲目次へ戻る