HTMLで色を指定する方法


コンピュータモニタ上では、色はRed、Green、Blueの3色の光をピクセル単位でディスプレイにあて、その強弱(各色1〜255階調)で色を表現します。 RGBの値が(0、0、0)はまったく光がない状態で黒、(255、255、255)は白を表しています。つまりコンピュータモニタは全部で256×256×256の1,677万通りの色を表現することが可能なのです。しかし実際には、ディスプレイの能力は機種によって差があり、OSやブラウザの差によって意図通りに色が再現されないことがあります。

01
技法・解説:
リンクの文字を変えるタグ 文字の大きさや色を指定するタグ<font>


HTMLで色を指定する方法

HTMLで色を指定するには、RGBそれぞれ2桁ずつ計6桁の16進数を用います。
16進法による色の指定は216色カラーパレットを参照してください。

16進数による指定:<font color="#(RGBの16進法表記)">


216色カラーパレット

OSやブラウザ、ディスプレイの能力の差によって意図通りに色が再現されないことがあるので、サイト全体の基調とする色を決める際には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