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 #000770 #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のシステムカラー  (背景の色が該当色です)

ActiveBorder
アクティブウィンドウの枠線色
InactiveCaptionText
非アクティブウィンドウのタイトルバーの文字色
ActiveCaption
アクティブウィンドウのタイトルバーの色
InfoBackground
ツールチップの背景色
AppWorkspace
アプリケーション作業領域の色
InfoText
ツールチップの文字色
Background
デスクトップの背景色 ※ Safariでも要確認
Menu
メニューの背景色
ButtonFace
ボタンの表面色
MenuText
メニューの文字色
ButtonHighlight
ボタンの明るい面の色
Scrollbar
スクロールバーの色
ButtonShadow
ボタンの影の色
ThreeDDarkshadow
立体的な部分の暗い影の色
ButtonText
ボタンのテキストカラー
ThreeDShadow
立体的な部分の影の色
CaptionText
タイトルバーの文字色
ThreeDLightShadow
立体的な部分の明るい影の色
GrayText
選択できない無効の部分の色
ThreeDFace
立体的な部分の表面の色
Highlight
選択(反転)部分の色 ※ Safariでも要確認
ThreeDHighlight
立体的な部分の明るい色
HighlightText
選択部分の文字色 ※ 上記 Highlight 参照
Window
ウィンドウの背景色
InactiveBorder
非アクティブウィンドウの枠線の色
WindowFrame
ウィンドウの枠の色
InactiveCaption
非アクティブウィンドウのタイトルバーの色
WindowText
ウィンドウの文字色

HTML,CSS 色の設定方法

  1.  <font color="#0000FF">青</font>
     <span style="color: #0000FF;">青</span>

  2.  <span style="color: #F00;">赤</span>
     <span style="color: red;">赤</span>

  3.  <span style="color: rgb(0,128,0);">緑</span>
     <span style="color: rgb(0%,50%,0%);">緑</span>


  4. <span style="color:#F00;">赤</span><span style="color:#008000;">緑</span>

    <span style="color:#F00;">赤<span style="color:#00F;">青</span>赤</span>

  5. 背景色+文字色
    <span style="background:yellow; color:#F0F;">背景色+文字色</span>

  6. 段落単位での、背景色+文字色

    <p style="color:navy; background:#CFF;">背景色+文字色</p>

  7. 枠線の色

    <p style="border: 4px solid #0F0;">枠線の色</p>

  8. 全体の背景色
    <body style="background-color:#D9E5FF;">

  9. 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>
  10. リンク色 ← オンマウスで色等が 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;}
    未訪問リンク色
    訪問済みリンク色
    オンマウス時のリンク色
    クリック時のリンク色

コピーペーストで簡単利用。 色名を変更し応用しましょう。