『ウェブサイトを作る上で一回も使わないで終わることはない！』
と言えるほどWebには必須の“カラーコード”
背景色や文字色の指定など、色を使う場面では必ず使用しますので基本色やよく使う色のカラーコードは覚えてしまっている人も多いくらい。
今回は、Webで使用する際によく使うであろう色、使いやすい色を抜粋してご紹介します。
Contents
カラーコードとは？
Webページで色を表現する際に使用されるコードのことです。
ウェブでの色の指定方法は３パターンあり、
- カラーネームでの指定
- 16進数での指定
- RGBでの指定
例えば以下のボックスがあります。
このボックス以下のように”黒”で塗り潰したい場合
カラーネームで指定する場合
background:black;16進数で指定する場合
background:#000000;RGBで指定する場合
background:rgb(0,0,0);というように記述が変わります。
一番Webでよく見るのは『#』で始まる16進数ではないでしょうか。
今回は各色に上記3パターンの記述方法も追加で紹介するのでサイトの作成時などに役立ててもらえればと思います。
標準16色
この16色はHTMLで定義されている基本色で、古いブラウザでもカラーネームで指定したものが正常に表示されます。
|
black |
white |
silver |
gray |
|
maroon |
red |
purple |
fuchsia |
|
green |
lime |
olive |
yellow |
|
navy |
blue |
teal |
aqua |
WEBセーフカラー216色
8ビットカラーと呼ばれている256色のうち、MacとWindowsで異なる40色を除いたものがWEBセーフカラーと呼ばれています。
無数な色があるものの、見ている人のOSやブラウザなどの環境で希望とは違う色が表示されることがあります。
そのようなリスクを低くする為にあるのがWEBセーフカラー。
多くの人が見るようなWebサイトを制作する場合はこのWEBセーフカラーの使用をおすすめします。
ざっくり色味で分類してみましたので参考にしてみてください！
無彩色カラー
#000000
0 0 0
#333333
51 51 51
#666666
102 102 102
#999999
153 153 153
#cccccc
204 204 204
#ffffff
255 255 255
茶色味系カラー
#cccc99
204 204 153
#cccc66
204 204 102
#cccc33
204 204 51
#cccc00
204 204 00
#ffcc33
255 204 51
#ffcc00
255 204 00
#999966
153 153 102
#999933
153 153 51
#999900
153 153 00
#666600
102 102 00
#666633
102 102 51
#333300
51 51 00
#ffcc99
255 204 153
#cc9966
204 153 102
#ff9933
255 153 51
#ff9900
255 153 00
#ff6600
255 102 00
#cc6600
204 102 00
#ff9966
255 153 102
#cc6633
204 102 51
#ff6633
255 102 51
#ff3300
255 51 00
#cc3300
204 51 00
#993300
153 51 00
#ffcc66
255 204 102
#cc9900
204 153 00
#cc9933
204 153 51
#996633
153 102 51
#996600
153 102 00
#663300
102 51 00
黄色味系カラー
#ffffcc
255 255 204
#ffff99
255 255 153
#ffff66
255 255 102
#ffff33
255 255 51
#ffff00
255 255 00
#ccff00
204 255 00
#ccff66
204 255 102
#ccff33
204 255 51
#99ff00
153 255 00
#99cc33
153 204 51
#99cc00
153 204 00
#669900
102 153 00
#ccff99
204 255 153
#99ff33
153 255 51
#99cc66
153 204 102
#66cc00
102 204 00
#669933
102 153 51
#336600
51 102 00
#99ff66
153 255 102
#66ff33
102 255 51
#33ff00
51 255 00
#66ff00
102 255 00
#66cc33
102 204 51
#33cc00
51 204 00
#ccffcc
204 255 204
#99cc99
153 204 153
#66cc66
102 204 102
#33cc33>
51 204 51
#00cc00
00 204 00
#339900
51 153 00
#669966
102 153 102
#339933
51 153 51
#009900
00 153 00
#336633
51 102 51
#006600
00 102 00
#003300
00 51 00
#99ff99
153 255 153
#66ff66
102 255 102
#33ff33
51 255 51
#00ff00
00 255 00
#00ff33
00 255 51
#00cc33
00 204 51
#66ff99
102 255 153
#33ff66
51 255 102
#00ff66
00 255 102
#33cc66
51 204 102
#009933
00 153 51
#006633
00 102 51
青味系カラー
#99ffcc
153 255 204
#33ff99
51 255 153
#00ff99
00 255 153
#66cc99
102 204 153
#00cc66
00 204 102
#339966
51 153 102
#00ffcc
00 255 204
#33ffcc
51 255 204
#66ffcc
102 255 204
#33cc99
51 204 153
#00cc99
00 204 153
#009966
00 153 102
#ccffff
204 255 255
#99cccc
153 204 204
#99ffff
153 255 255
#66cccc
102 204 204
#33cccc
51 204 204
#00cccc
00 204 204
#669999
102 153 153
#339999
51 153 153
#009999
00 153 153
#336666
51 102 102
#006666
00 102 102
#003333
00 51 51
#66ffff
102 255 255
#33ffff
51 255 255
#00ffff
00 255 255
#33ccff
51 204 255
#00ccff
00 204 255
#0099cc
00 153 204
#66ccff
102 204 255
#3399cc
51 153 204
#0099ff
00 153 255
#006699
00 102 153
#336699
51 102 153
#003366
00 51 102
#99ccff
153 204 255
#6699cc
102 153 204
#3399ff
51 153 255
#0066ff
00 102 255
#0066cc
00 102 204
#003399
00 51 153
#6699ff
102 153 255
#3366cc
51 102 204
#3366ff
51 102 255
#0033ff
00 51 255
#0033cc
00 51 204
#000033
00 00 51
#9999cc
153 153 204
#666699
102 102 153
#333366
51 51 102
#333399
51 51 153
#000099
00 00 153
#000066
00 00 102
#ccccff
204 204 255
#9999ff
153 153 255
#6666ff
102 102 255
#6666cc
102 102 204
#3333cc
51 51 204
#0000cc
00 00 204
#3333ff
51 51 255
#0000ff
00 00 255
#3300ff
51 00 255
#6633ff
102 51 255
#3300cc
51 00 204
#330099
51 00 153
赤味系カラー
#9966ff
153 102 255
#9966cc
153 102 204
#6600ff
102 00 255
#6633cc
102 51 204
#663399
102 51 153
#330066
51 00 102
#cc99ff
204 153 255
#9933ff
153 51 255
#9900ff
153 00 255
#cc00cc
204 00 204
#6600cc
102 00 204
#660099
102 00 153
#cc66ff
204 102 255
#cc33ff
204 51 255
#cc00ff
204 00 255
#9933cc
153 51 204
#9900cc
153 00 204
#330033
51 00 51
#cc99cc
204 153 204
#996699
153 102 153
#663366
102 51 102
#993399
153 51 153
#990099
153 00 153
#660066
102 00 102
#ffccff
255 204 255
#ff99ff
255 153 255
#ff66ff
255 102 255
#ff33ff
255 51 255
#cc66cc
204 102 204
#cc33cc
204 51 204
#ff66cc
255 102 204
#ff00ff
255 00 255
#ff33cc
255 51 204
#ff00cc
255 00 204
#cc0099
204 00 153
#990066
153 00 102
#ff0099
255 00 153
#cc6699
204 102 153
#cc3399
204 51 153
#993366
153 51 102
#660033
102 00 51
#660000
102 00 00
#ff99cc
255 153 204
#ff3399
255 51 153
#ff0066
255 00 102
#cc3366
204 51 102
#cc0066
204 00 102
#990033
153 00 51
#ff6699
255 102 153
#ff3366
255 51 102
#ff0033
255 00 51
#cc0033
204 00 51
#663333
102 51 51
#330000
51 00 00
#cc9999
204 153 153
#cc6666
204 102 102
#660000
102 00 00
#cc3333
204 51 51
#993333
153 51 51
#990000
153 00 00
#ffcccc
255 204 204
#ff9999
255 153 153
#ff6666
255 102 102
#ff3333
255 51 51
#ff0000
255 00 00
#cc0000
204 00 00
