column

ITコラム

mv1414

プログラミングノウハウ

2016.12.01

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。


 

■基本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 ブラック

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ