HTML,CSS ホームページの背景色や文字色 （フォントカラー）
- 色を使うメリット
- イメージ・デザインの統一、デザイン性の向上、オリジナリティ。
赤字やマーカーと同様で目立たせる。 文字色が浮き出て立体感がでる。
目に優しい色が使える。 画像に合う色を適応。透明化も可能。 - 色を使うデメリット
- 背景と文章の同色部分が被ったり、使いすぎると読み難くなる。
目が疲れる場合もある。 青系色はリンクアンカーと間違える。
色名にオンマウス（onmouseover）、カーソルで背景色が変更（要ワイド画面）
W3C標準 基本16色 |
10進数 例： rgb(255,0,0) | ||||
|---|---|---|---|---|---|
| カラー名 | 16進数 | 短縮系 | R値 | G値 | B値 |
| black | #000000 | #000 | 0 | 0 | 0 |
| gray | #808080 | 128 | 128 | 128 | |
| silver | #C0C0C0 | 192 | 192 | 192 | |
| white | #FFFFFF | #FFF | 255 | 255 | 255 |
| blue | #0000FF | #00F | 0 | 0 | 255 |
| navy | #000080 | 0 | 0 | 128 | |
| teal | #008080 | 0 | 128 | 128 | |
| green | #008000 | 0 | 128 | 0 | |
| lime | #00FF00 | #0F0 | 0 | 255 | 0 |
| aqua | #00FFFF | #0FF | 0 | 255 | 255 |
| yellow | #FFFF00 | #FF0 | 255 | 255 | 0 |
| red | #FF0000 | #F00 | 255 | 0 | 0 |
| fuchsia | #FF00FF | #F0F | 255 | 0 | 255 |
| olive | #808000 | 128 | 128 | 0 | |
| purple | #800080 | 128 | 0 | 128 | |
| maroon | #800000 | 128 | 0 | 0 | |
216色のセーフカラー基準 （ CSSは、RRGGBBをRGBに短縮記述可能 ）
| R:FF基準 | R:CC基準 | R:99基準 | R:66基準 | R:33基準 | R:00基準 |
| #FFFFFF | #CCFFFF | #99FFFF | #66FFFF | #33FFFF | #00FFFF |
| #FFFFCC | #CCFFCC | #99FFCC | #66FFCC | #33FFCC | #00FFCC |
| #FFFF99 | #CCFF99 | #99FF99 | #66FF99 | #33FF99 | #00FF99 |
| #FFFF66 | #CCFF66 | #99FF66 | #66FF66 | #33FF66 | #00FF66 |
| #FFFF33 | #CCFF33 | #99FF33 | #66FF33 | #33FF33 | #00FF33 |
| #FFFF00 | #CCFF00 | #99FF00 | #66FF00 | #33FF00 | #00FF00 |
| #FFCCFF | #CCCCFF | #99CCFF | #66CCFF | #33CCFF | #00CCFF |
| #FFCCCC | #CCCCCC | #99CCCC | #66CCCC | #33CCCC | #00CCCC |
| #FFCC99 | #CCCC99 | #99CC99 | #66CC99 | #33CC99 | #00CC99 |
| #FFCC66 | #CCCC66 | #99CC66 | #66CC66 | #33CC66 | #00CC66 |
| #FFCC33 | #CCCC33 | #99CC33 | #66CC33 | #33CC33 | #00CC33 |
| #FFCC00 | #CCCC00 | #99CC00 | #66CC00 | #33CC00 | #00CC00 |
| #FF99FF | #CC99FF | #9999FF | #6699FF | #3399FF | #0099FF |
| #FF99CC | #CC99CC | #9999CC | #6699CC | #3399CC | #0099CC |
| #FF9999 | #CC9999 | #999999 | #669999 | #339999 | #009999 |
| #FF9966 | #CC9966 | #999966 | #669966 | #339966 | #009966 |
| #FF9933 | #CC9933 | #999933 | #669933 | #339933 | #009933 |
| #FF9900 | #CC9900 | #999900 | #669900 | #339900 | #009900 |
| #FF66FF | #CC66FF | #9966FF | #6666FF | #3366FF | #0066FF |
| #FF66CC | #CC66CC | #9966CC | #6666CC | #3366CC | #0066CC |
| #FF6699 | #CC6699 | #996699 | #666699 | #336699 | #006699 |
| #FF6666 | #CC6666 | #996666 | #666666 | #336666 | #006666 |
| #FF6633 | #CC6633 | #996633 | #666633 | #336633 | #006633 |
| #FF6600 | #CC6600 | #996600 | #666600 | #336600 | #006600 |
| #FF33FF | #CC33FF | #9933FF | #6633FF | #3333FF | #0033FF |
| #FF33CC | #CC33CC | #9933CC | #6633CC | #3333CC | #0033CC |
| #FF3399 | #CC3399 | #993399 | #663399 | #333399 | #003399 |
| #FF3366 | #CC3366 | #993366 | #663366 | #333366 | #003366 |
| #FF3333 | #CC3333 | #993333 | #663333 | #333333 | #003333 |
| #FF3300 | #CC3300 | #993300 | #663300 | #333300 | #003300 |
| #FF00FF | #CC00FF | #9900FF | #6600FF | #3300FF | #0000FF |
| #FF00CC | #CC00CC | #9900CC | #6600CC | #3300CC | #0000CC |
| #FF0099 | #CC0099 | #990099 | #660099 | #330099 | #000099 |
| #FF0066 | #CC0066 | #990066 | #660066 | #330066 | #000066 |
| #FF0033 | #CC0033 | #990033 | #660033 | #330033 | #000033 |
| #FF0000 | #CC0000 | #990000 | #660000 | #330000 | #000000 |
類似色比較
| #000000 | white | #FFFFEE | #EEFFFF | #FFEEFF | #FF0000 | #00FF00 | #0000FF |
| #000080 | #EEEEEE | #FFFFDD | #DDFFFF | #FFDDFF | #EE0000 | #00EE00 | #0000EE |
| #0000FF | #DDDDDD | #FFFFCC | #CCFFFF | #FFCCFF | #DD0000 | #00DD00 | #0000DD |
| #008000 | #CCCCCC | #FFFFBB | #BBFFFF | #FFBBFF | #CC0000 | #00CC00 | #0000CC |
| #008080 | #BBBBBB | #FFFFAA | #AAFFFF | #FFAAFF | #BB0000 | #00BB00 | #0000BB |
| #00FF00 | #AAAAAA | #FFFF99 | #99FFFF | #FF99FF | #AA0000 | #00AA00 | #0000AA |
| #00FFFF | #999999 | #FFFF88 | #88FFFF | #FF88FF | #990000 | #009900 | #000099 |
| #800000 | #888888 | #FFFF77 | #77FFFF | #FF77FF | #880000 | #008800 | #000088 |
| #800080 | #777777 | #FFFF66 | #66FFFF | #FF66FF | #770000 | #007700 | #000077 |
| #808000 | #666666 | #FFFF55 | #55FFFF | #FF55FF | #660000 | #006600 | #000066 |
| #808080 | #555555 | #FFFF44 | #44FFFF | #FF44FF | #550000 | #005500 | #000055 |
| #C0C0C0 | #444444 | #FFFF33 | #33FFFF | #FF33FF | #440000 | #004400 | #000044 |
| #FF0000 | #333333 | #FFFF22 | #22FFFF | #FF22FF | #330000 | #003300 | #000033 |
| #FF00FF | #222222 | #FFFF11 | #11FFFF | #FF11FF | #220000 | #002200 | #000022 |
| #FFFF00 | #111111 | #FFFF00 | #00FFFF | #FF00FF | #110000 | #001100 | #000011 |
| #E6FFE9 | #CEF9DC | #F3FFD8 | #D7EEFF | #D9E5FF | #EAD9FF | #FFD5EC | #FFDBC9 |
| #CBFFD3 | #B1F9D0 | #EDFFBE | #C2EEFF | #BAD3FF | #DCC2FF | #FFBEDA | #FFC7AF |
| #AEFFBD | #9BF9CC | #E9FFA5 | #A7F1FF | #A4C6FF | #D0B0FF | #FFABCE | #FFAD90 |
| #93FFAB | #86F9C5 | #E4FF8D | #8EF1FF | #8EB8FF | #C299FF | #FF97C2 | #FF9872 |
| #78FF94 | #77F9C3 | #DBFF71 | #77EEFF | #75A9FF | #B384FF | #FF82B2 | #FF8856 |
| #5BFF7F | #64F9C1 | #D6FF58 | #60EEFF | #5D99FF | #A16EFF | #FF69A3 | #FF773E |
| #43FF6B | #4DF9B9 | #D0FF43 | #46EEFF | #4689FF | #9057FF | #FF5192 | #FF6928 |
| #2DFF57 | #30F9B2 | #C9FF2F | #32EEFF | #2C7CFF | #7B3CFF | #FF367F | #FF5F17 |
| #1BFF4A | #17F9AD | #BEFF15 | #13EEFF | #136FFF | #6927FF | #FF1A6F | #FF570D |
| #00FF3B | #00F9A9 | #B6FF01 | #00ECFF | #005FFF | #5507FF | #FF0461 | #FF4F02 |
ブラウザ対応色
| #2F4F4F | #708090 | #778899 | #696969 | #A9A9A9 | #D3D3D3 | #DCDCDC | #B0C4DE |
| #00008B | #191970 | #483D8B | #4B0082 | #0000CD | #7B68EE | #4169E1 | #6495ED |
| #008BBB | #4682B4 | #1E90FF | #00BFFF | #87CEFA | #87CEEB | #ADD8E6 | #00FFFF |
| #5F9EA0 | #20B2AA | #66CDAA | #00CED1 | #48D1CC | #40E0D0 | #B0E0E6 | #AFEEEE |
| #6B8E23 | #556B2F | #006400 | #228B22 | #2E8B57 | #3CB371 | #32CD32 | #9ACD32 |
| #7FFFD4 | #00FA9A | #00FF7F | #7CFC00 | #7FFF00 | #ADFF2F | #90EE90 | #98FB98 |
| #8B008B | #6A5ACD | #8A2BE2 | #9400D3 | #9932CC | #BA55D3 | #9370DB | #8FBC8F |
| #8B0000 | #8B4513 | #A52A2A | #B22222 | #A0522D | #CD5C5C | #D2691E | #BDB76B |
| #DC143C | #FF1493 | #FF69B4 | #FF00FF | #DA70D6 | #EE82EE | #DDA0DD | #D8BfD8 |
| #BC8F8F | #C71585 | #DB7093 | #E9967A | #F08080 | #FFA07A | #FFB6C1 | #FFC0CB |
| #FF4500 | #FF6347 | #FF4F50 | #FA8072 | #FF8C00 | #FFA500 | #F4A460 | #E6E6FA |
| #B8860B | #CD853F | #DAA520 | #D2B48C | #DEB887 | #FFD700 | #FFE4E1 | #E0FFFF |
| #F0E68C | #EEE8AA | #FAFAD2 | #FFFACD | #F5F5DC | #FFF8DC | #FFFFE0 | |
| #FFDAB9 | #F5DEB3 | #FFDEAD | #FFE4B5 | #FFE4C4 | #FFEBCD | #FFEFD5 | #FAEBD7 |
| #FFF0F5 | #FAF0E6 | #FFF5EE | #FDF5E6 | #F0F8FF | #F0FFF0 | #F0FFFF | #F5FFFA |
| #F5F5F5 | #F8F8FF | #FFFAF0 | #FFFFF0 | #FFFAFA | 透明色： Transparent | ||
OSのシステムカラー （背景の色が該当色です）
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HTML,CSS 色の設定方法
青 <font color="#0000FF">青</font>
青 <span style="color: #0000FF;">青</span>赤 <span style="color: #F00;">赤</span>
赤 <span style="color: red;">赤</span>緑 <span style="color: rgb(0,128,0);">緑</span>
緑 <span style="color: rgb(0%,50%,0%);">緑</span>赤緑
<span style="color:#F00;">赤</span><span style="color:#008000;">緑</span>
赤青赤
<span style="color:#F00;">赤<span style="color:#00F;">青</span>赤</span>背景色＋文字色
<span style="background:yellow; color:#F0F;">背景色＋文字色</span>段落単位での、背景色＋文字色
<p style="color:navy; background:#CFF;">背景色＋文字色</p>
枠線の色
<p style="border: 4px solid #0F0;">枠線の色</p>
全体の背景色
<body style="background-color:#D9E5FF;">HTMLサンプル：応用編 色の利用例
（ソースにオンマウスで表示されるソース右上タブから各表示可能）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>背景：黒、枠：白 表示サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"><!-- h1,h2,p{ padding:1em;} --></style> </head> <body style="background: #000; text-align: center;"> <div style="background: #FFF; width:680px; margin:auto; padding: 20px;"> <h1 style="background:#FFD700;">背景色 ゴールド</h1> <h2>文字色：<span style="color:#00F;">青色</span></h2> <p style="border: 4px solid red; background:#CCFFCC; color:purple;"> 枠色 red、背景色 #CCFFCC、文字色 purple</p> </div> </body> </html>- リンク色 ← オンマウスで色等が a:hover で動作。
<a href="***" style="color: navy;">リンク色</a>
上記の様にリンクアンカー部分の色を固定指定する事も可能ですが、
クリック前（未訪問、青、a:link）とクリック後（訪問済、紫、a:visited）は、
ユーザビリティ的にも別々の色に区別した方が良いでしょう。以下の様にCSSでリンクをまとめて記述すると簡単です。
（動作に優先順位があるので上下の順番を間違えないように）a:link{ color: navy;} a:visited{ color: brown;} a:hover{ color:maroon; background:#FF0;} a:active{ background: aqua;}未訪問リンク色 訪問済みリンク色 オンマウス時のリンク色 クリック時のリンク色
コピーペーストで簡単利用。 色名を変更し応用しましょう。
Copyright © NetyaSun All rights reserved.
