無料ホームページ作成情報 トップ > ホームページ作成入門 > 1-4)ホームページ上の色
ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。
ホームページ上の色について
ホームページはカラーで作成することがほとんどかと思います。
また、ホームページはパソコンや携帯電話などのディスプレイで表示されます。そのディスプレイの性能によって表示できる色の数が変わってきます。
最近のパソコン用のディスプレイの場合、フルカラー(32bit:1677万色)表示できるものがほとんどですが、携帯電話はPDAなどの情報端末の場合は、ハイカラー(16bit:65,536色)表示できることが多いようです。しかし、インターネット創成期では白黒のディスプレイや、256色しか表示できないディスプレイが主流でした。
16進数表示
私たちが日常使用している数値は「10進数」といいます。「0」から順に数え上げると、
「0→1→2→3→4→5→6→7→8→9」と10個の数値まで数え上げて、十の位「10」へと数え上げられます。
「16進数」とは、インターネットやコンピュータの分野でよく使用される数値で、「0」から順に数え上げると、「0→1→2→3→4→5→6→7→8→9→a→b→c→d→e→f」と16個の数値まで数え上げて、十の位「10」へと数え上げられます。
ホームページを作成するときの色は、この16進数で表します。
例)
#000000=■黒(R:00、G:00、B00)
#FFFFFF=■白(R:FF、G:FF、BFF)
#FF0000=■赤(R:FF、G:00、B00)
#00FF00=■緑(R:00、G:FF、B00)
#0000FF=■青(R:00、G:00、BFF)
#FFFF00=■黄(R:FF、G:FF、B00)
#FF00FF=■マゼンダ(R:FF、G:00、BFF)
#00FFFF=■シアン(R:00、G:FF、BFF)
16進数表示は、RGB形式であらわします。
RGB形式とは、「RED」「GREEN」「BLUE」の頭文字で、それぞれの色を混ぜ合わせて色を作るという意味です。6桁の値のうち、左から2桁ずつ「RED」「GREEN」「BLUE」になります。
例えば、赤「FF0000」は「RED」 が最高値の「FF」で残りの「GREEN」「BLUE」が「00」になります。
緑「00FF00」と青「0000FF」はそれぞれが最高値で残りが「00」になっています。
黒「000000」は「RED」「GREEN」「BLUE」はすべて「00」になり、白「FFFFFF」はすべての値が「FF」になっています。
Webセーフカラー
256色ディスプレイで表示できる256色のうち、WindowsとMacintoshで異なる40色を除いた216色をWEBセーフカラーといいます。最近は、256色ディスプレイを使用している人は少ないですが、できるだけこの216色で表示すると良いでしょう。
#000000 | #003300 | #006600 | #009900 | #00CC00 | #00FF00 | ||||||
#000033 | #003333 | #006633 | #009933 | #00CC33 | #00FF33 | ||||||
#000066 | #003366 | #006666 | #009966 | #00CC66 | #00FF66 | ||||||
#000099 | #003399 | #006699 | #009999 | #00CC99 | #00FF99 | ||||||
#0000CC | #0033CC | #0066CC | #0099CC | #00CCCC | #00FFCC | ||||||
#0000FF | #0033FF | #0066FF | #0099FF | #00CCFF | #00FFFF |
#330000 | #333300 | #336600 | #339900 | #33CC00 | #33FF00 | ||||||
#330033 | #333333 | #336633 | #339933 | #33CC33 | #33FF33 | ||||||
#330066 | #333366 | #336666 | #339966 | #33CC66 | #33FF66 | ||||||
#330099 | #333399 | #336699 | #339999 | #33CC99 | #33FF99 | ||||||
#3300CC | #3333CC | #3366CC | #3399CC | #33CCCC | #33FFCC | ||||||
#3300FF | #3333FF | #3366FF | #3399FF | #33CCFF | #33FFFF |
#660000 | #663300 | #666600 | #669900 | #66CC00 | #66FF00 | ||||||
#660033 | #663333 | #666633 | #669933 | #66CC33 | #66FF33 | ||||||
#660066 | #663366 | #666666 | #669966 | #66CC66 | #66FF66 | ||||||
#660099 | #663399 | #666699 | #669999 | #66CC99 | #66FF99 | ||||||
#6600CC | #6633CC | #6666CC | #6699CC | #66CCCC | #66FFCC | ||||||
#6600FF | #6633FF | #6666FF | #6699FF | #66CCFF | #66FFFF |
#990000 | #993300 | #996600 | #999900 | #99CC00 | #99FF00 | ||||||
#990033 | #993333 | #996633 | #999933 | #99CC33 | #99FF33 | ||||||
#990066 | #993366 | #996666 | #999966 | #99CC66 | #99FF66 | ||||||
#990099 | #993399 | #996699 | #999999 | #99CC99 | #99FF99 | ||||||
#9900CC | #9933CC | #9966CC | #9999CC | #99CCCC | #99FFCC | ||||||
#9900FF | #9933FF | #9966FF | #9999FF | #99CCFF | #99FFFF |
#CC0000 | #CC3300 | #CC6600 | #CC9900 | #CCCC00 | #CCFF00 | ||||||
#CC0033 | #CC3333 | #CC6633 | #CC9933 | #CCCC33 | #CCFF33 | ||||||
#CC0066 | #CC3366 | #CC6666 | #CC9966 | #CCCC66 | #CCFF66 | ||||||
#CC0099 | #CC3399 | #CC6699 | #CC9999 | #CCCC99 | #CCFF99 | ||||||
#CC00CC | #CC33CC | #CC66CC | #CC99CC | #CCCCCC | #CCFFCC | ||||||
#CC00FF | #CC33FF | #CC66FF | #CC99FF | #CCCCFF | #CCFFFF |
#FF0000 | #FF3300 | #FF6600 | #FF9900 | #FFCC00 | #FFFF00 | ||||||
#FF0033 | #FF3333 | #FF6633 | #FF9933 | #FFCC33 | #FFFF33 | ||||||
#FF0066 | #FF3366 | #FF6666 | #FF9966 | #FFCC66 | #FFFF66 | ||||||
#FF0099 | #FF3399 | #FF6699 | #FF9999 | #FFCC99 | #FFFF99 | ||||||
#FF00CC | #FF33CC | #FF66CC | #FF99CC | #FFCCCC | #FFFFCC | ||||||
#FF00FF | #FF33FF | #FF66FF | #FF99FF | #FFCCFF | #FFFFFF |
カラーネーム
色は16進数で設定するほかに、色の名前を指定することもできます。
red | #FF0000 | |
crimson | #DC143C | |
firebrick | #B22222 | |
maroon | #800000 | |
darkred | #8B0000 | |
brown | #A52A2A | |
sienna | #A0522D | |
saddlebrown | #8B4513 | |
indianred | #CD5C5C | |
rosybrown | #BC8F8F | |
lightcoral | #F08080 | |
salmon | #FA8072 | |
darksalmon | #E9967A | |
coral | #FF7F50 | |
tomato | #FF6347 | |
sandybrown | #F4A460 | |
lightsalmon | #FFA07A | |
peru | #CD853F | |
chocolate | #D2691E | |
orangered | #FF4500 | |
orange | #FFA500 | |
darkorange | #FF8C00 | |
tan | #D2B48C | |
peachpuff | #FFDAB9 | |
bisque | #FFE4C4 | |
moccasin | #FFE4B5 | |
navajowhite | #FFDEAD | |
wheat | #F5DEB3 | |
burlywood | #DEB887 | |
darkgoldenrod | #B8860B | |
goldenrod | #DAA520 | |
gold | #FFD700 | |
yellow | #FFFF00 | |
lightgoldenrodyellow | #FAFAD2 | |
palegoldenrod | #EEE8AA | |
khaki | #F0E68C | |
darkkhaki | #BDB76B | |
lawngreen | #7CFC00 | |
greenyellow | #ADFF2F | |
chartreuse | #7FFF00 | |
lime | #00FF00 | |
limegreen | #32CD32 | |
yellowgreen | #9ACD32 | |
olive | #808000 | |
olivedrab | #6B8E23 | |
darkolivegreen | #556B2F | |
forestgreen | #228B22 | |
darkgreen | #006400 | |
green | #008000 | |
seagreen | #2E8B57 | |
mediumseagreen | #3CB371 | |
darkseagreen | #8FBC8F | |
lightgreen | #90EE90 | |
palegreen | #98FB98 | |
springgreen | #00FF7F | |
mediumspringgreen | #00FA9A | |
teal | #008080 | |
darkcyan | #008B8B | |
lightseagreen | #20B2AA | |
mediumaquamarine | #66CDAA | |
cadetblue | #5F9EA0 | |
steelblue | #4682B4 | |
aquamarine | #7FFFD4 | |
powderblue | #B0E0E6 | |
paleturquoise | #AFEEEE | |
lightblue | #ADD8E6 | |
lightsteelblue | #B0C4DE | |
skyblue | #87CEEB | |
lightskyblue | #87CEFA | |
mediumturquoise | #48D1CC |
turquoise | #40E0D0 | |
darkturquoise | #00CED1 | |
aqua | #00FFFF | |
cyan | #00FFFF | |
deepskyblue | #00BFFF | |
dodgerblue | #1E90FF | |
cornflowerblue | #6495ED | |
royalblue | #4169E1 | |
blue | #0000FF | |
mediumblue | #0000CD | |
navy | #000080 | |
darkblue | #00008B | |
midnightblue | #191970 | |
darkslateblue | #483D8B | |
slateblue | #6A5ACD | |
mediumslateblue | #7B68EE | |
mediumpurple | #9370DB | |
darkorchid | #9932CC | |
darkviolet | #9400D3 | |
blueviolet | #8A2BE2 | |
mediumorchid | #BA55D3 | |
plum | #DDA0DD | |
lavender | #E6E6FA | |
thistle | #D8BFD8 | |
orchid | #DA70D6 | |
violet | #EE82EE | |
indigo | #4B0082 | |
darkmagenta | #8B008B | |
purple | #800080 | |
mediumvioletred | #C71585 | |
deeppink | #FF1493 | |
fuchsia | #FF00FF | |
magenta | #FF00FF | |
hotpink | #FF69B4 | |
palevioletred | #DB7093 | |
lightpink | #FFB6C1 | |
pink | #FFC0CB | |
mistyrose | #FFE4E1 | |
blanchedalmond | #FFEBCD | |
lightyellow | #FFFFE0 | |
cornsilk | #FFF8DC | |
antiquewhite | #FAEBD7 | |
papayawhip | #FFEFD5 | |
lemonchiffon | #FFFACD | |
beige | #F5F5DC | |
linen | #FAF0E6 | |
oldlace | #FDF5E6 | |
lightcyan | #E0FFFF | |
aliceblue | #F0F8FF | |
whitesmoke | #F5F5F5 | |
lavenderblush | #FFF0F5 | |
floralwhite | #FFFAF0 | |
mintcream | #F5FFFA | |
ghostwhite | #F8F8FF | |
honeydew | #F0FFF0 | |
seashell | #FFF5EE | |
ivory | #FFFFF0 | |
azure | #F0FFFF | |
snow | #FFFAFA | |
white | #FFFFFF | |
gainsboro | #DCDCDC | |
lightgrey | #D3D3D3 | |
silver | #C0C0C0 | |
darkgray | #A9A9A9 | |
lightslategray | #778899 | |
slategray | #708090 | |
gray | #808080 | |
dimgray | #696969 | |
darkslategray | #2F4F4F | |
black | #000000 |
格安です!ホームページ制作をご依頼ください!!
ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ(SEO対策)などわかりにくいことがあればお気軽にお問い合わせください。