背景や文字などに使う色のトーンは、Webサイトのイメージを作る重要な要素です。
HTMLでは、色をコードやカラーネームなどで指定します(指定の方法は、HTML 【 色指定 】 ~ colorの指定方法にまとめましたのでご参照下さい)。
ここでは、色見本を表示します。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
基本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 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 | ブラック |
INTERNOUS,inc. All rights reserved.