ブログをリニューアル予定。過去記事は削除するかもです。

【Webセーフカラーとは】使い方の解説と216色のカラーコード見本

【Webセーフカラーとは】使い方の解説と216色のカラーコード見本

ブラウザによって、色の表示が異なるって本当ですか?

どんな人がどんな環境で見ても、同じ色に表示されるカラーはないの?

WEBデザインをするうえで知っておいたいい色のルールとかはありますか?

 

こんな疑問を解決する記事です。

本記事では、WEBセーフカラーについて、216色の色見本と共に解説します。

プログラミングにおいてカラー選びは、CSSで文字色や背景色を変更するときなどに役立ちます。

色見本を見つつ、どんな環境下でも同じように表示される色を選択しておけば、作業の負担も減るので一石二鳥だと思います。

 

スポンサードサーチ

WEBセーフカラーとは

WEBセーフカラーとは

WEBセーフカラーとは、WindowsやMacなどの異なるOSでも同じように表示される216色のカラーのことです。

WEB上で色を表示する際は、ユーザー側の環境、つまりOSやブラウザなどによって多少の違いが出てきてしまうのですが、この216色であれば、その誤差を最小限に抑えることができます。

ブランドイメージなどに関わる重要カラーが、見る人によって異なる色に表示されてしまっては、あとあと“イメージと違った”などの誤解につながりかねないので、WEBセーフカラーで統一された色を使うのが良いでしょう。

 

色の指定方法

WEBセーフカラーの色を指定する方法はいくつかありますが、WEB制作で主に使われるのは下記の3つです。

 

  1. 16進トリプレット表記
  2. カラーネーム
  3. RGB・RGBA

 

16進トリプレット表記

16進トリプレット表記とは、先頭に#(シャープ)を設置した後に、6桁の英数字を並べて色を指定する方法です。

 

16進トリプレット表記の例

黒(Black) #000000
グレー(Gray/Grey) #808080
白(White) #FFFFFF

 

こんな感じで色を指定します。

上記では英字(白のF)は大文字になっていますが、小文字でも構いません。

 

カラーネーム

カラーネームとは、その名の通り、色の名前で指定する方法です。

一番わかりやすいと言えば、わかりやすいですが、カラーネームで指定できる色は限られています。

そのため、細かく色を指定したい場合、その色にはカラーネームがついていないこともあるので注意しましょう。

 

カラーネーム表記の例

黒(Black) Black
グレー(Gray/Grey) Gray(またはGrey)
白(White) White

 

カラーネームが使える色は全部で147色です。

そのうち、16色が基本カラーとされています。

 

RGB・RGBA

RGBとは、Red・Green・Blueのそれぞれの明るさを指定することで、色を表現する手法です。

そこにA(アルファ)を加えると、全体の透明度まで再現できるRGBAになります。

 

RGB表記の例

黒(Black) 00 00 00
グレー(Gray/Grey) 128 128 128
白(White) 255 255 255

 

RGBAを使用する場合、RGBで指定した3つの数値の後ろに、0.0〜1.0で不透明度を指定します。

例えば、文字色を黒にして、透明度を50%にしたい場合、“00 00 00 0.5”となります。

 

WEBセーフカラー216色

実際にWEBセーフカラーである216色を見てみましょう。それぞれの16進トリプレット表記とRGB表記を紹介します。

#FFFFFF
255 255 255
#FFFFCC
255 255 204
#FFFF99
255 255 153
#FFFF66
255 255 102
#FFFF33
255 255 51
#FFFF00
255 255 00
#FFCCFF
255 204 255
#FFCCCC
255 204 204
#FFCC99
255 204 153
#FFCC66
255 204 102
#FFCC33
255 204 51
#FFCC00
255 204 00
#FF99FF
255 153 255
#FF99CC
255 153 204
#FF9999
255 153 153
#FF9966
255 153 102
#FF9933
255 153 51
#FF9900
255 153 00
#FF66FF
255 102 255
#FF66CC
255 102 204
#FF6699
255 102 153
#FF6666
255 102 102
#FF6633
255 102 51
#FF6600
255 102 00
#FF33FF
255 51 255
#FF33CC
255 51 204
#FF3399
255 51 153
#FF3366
255 51 102
#FF3333
255 51 51
#FF3300
255 51 00
#FF00FF
255 00 255
#FF00CC
255 00 204
#FF0099
255 00 153
#FF0066
255 00 102
#FF0033
255 00 51
#FF0000
255 00 00
#CCFFFF
204 255 255
#CCFFCC
204 255 204
#CCFF99
204 255 153
#CCFF66
204 255 102
#CCFF33
204 255 51
#CCFF00
204 255 00
#CCCCFF
204 204 255
#CCCCCC
204 204 204
#CCCC99
204 204 153
#CCCC66
204 204 102
#CCCC33
204 204 51
#CCCC00
204 204 00
#CC99FF
204 153 255
#CC99CC
204 153 204
#CC9999
204 153 153
#CC9966
204 153 102
#CC9933
204 153 51
#CC9900
204 153 00
#CC66FF
204 102 255
#CC66CC
204 102 204
#CC6699
204 102 153
#CC6666
204 102 102
#CC6633
204 102 51
#CC6600
204 102 00
#CC33FF
204 51 255
#CC33CC
204 51 204
#CC3399
204 51 153
#CC3366
204 51 102
#CC3333
204 51 51
#CC3300
204 51 00
#CC00FF
204 00 255
#CC00CC
204 00 204
#CC0099
204 00 153
#CC0066
204 00 102
#CC0033
204 00 51
#CC0000
204 00 00
#99FFFF
153 255 255
#99FFCC
153 255 204
#99FF99
153 255 153
#99FF66
153 255 102
#99FF33
153 255 51
#99FF00
153 255 00
#99CCFF
153 204 255
#99CCCC
153 204 204
#99CC99
153 204 153
#99CC66
153 204 102
#99CC33
153 204 51
#99CC00
153 204 00
#9999FF
153 153 255
#9999CC
153 153 204
#999999
153 153 153
#999966
153 153 102
#999933
153 153 51
#999900
153 153 00
#9966FF
153 102 255
#9966CC
153 102 204
#996699
153 102 153
#996666
153 102 102
#996633
153 102 51
#996600
153 102 00
#9933FF
153 51 255
#9933CC
153 51 204
#993399
153 51 153
#993366
153 51 102
#993333
153 51 51
#993300
153 51 00
#9900FF
153 00 255
#9900CC
153 00 204
#990099
153 00 153
#990066
153 00 102
#990033
153 00 51
#990000
153 00 00
#66FFFF
102 255 255
#66FFCC
102 255 204
#66FF99
102 255 153
#66FF66
102 255 102
#66FF33
102 255 51
#66FF00
102 255 00
#66CCFF
102 204 255
#66CCCC
102 204 204
#66CC99
102 204 153
#66CC66
102 204 102
#66CC33
102 204 51
#66CC00
102 204 00
#6699FF
102 153 255
#6699CC
102 153 204
#669999
102 153 153
#669966
102 153 102
#669933
102 153 51
#669900
102 153 00
#6666FF
102 102 255
#6666CC
102 102 204
#666699
102 102 153
#666666
102 102 102
#666633
102 102 51
#666600
102 102 00
#6633FF
102 51 255
#6633CC
102 51 204
#663399
102 51 153
#663366
102 51 102
#663333
102 51 51
#663300
102 51 00
#6600FF
102 00 255
#6600CC
102 00 204
#660099
102 00 153
#660066
102 00 102
#660033
102 00 51
#660000
102 00 00
#33FFFF
51 255 255
#33FFCC
51 255 204
#33FF99
51 255 153
#33FF66
51 255 102
#33FF33
51 255 51
#33FF00
51 255 00
#33CCFF
51 204 255
#33CCCC
51 204 204
#33CC99
51 204 153
#33CC66
51 204 102
#33CC33
51 204 51
#33CC00
51 204 00
#3399FF
51 153 255
#3399CC
51 153 204
#339999
51 153 153
#339966
51 153 102
#339933
51 153 51
#339900
51 153 00
#3366FF
51 102 255
#3366CC
51 102 204
#336699
51 102 153
#336666
51 102 102
#336633
51 102 51
#336600
51 102 00
#3333FF
51 51 255
#3333CC
51 51 204
#333399
51 51 153
#333366
51 51 102
#333333
51 51 51
#333300
51 51 00
#3300FF
51 00 255
#3300CC
51 00 204
#330099
51 00 153
#330066
51 00 102
#330033
51 00 51
#330000
51 00 00
#00FFFF
00 255 255
#00FFCC
00 255 204
#00FF99
00 255 153
#00FF66
00 255 102
#00FF33
00 255 51
#00FF00
00 255 00
#00CCFF
00 204 255
#00CCCC
00 204 204
#00CC99
00 204 153
#00CC66
00 204 102
#00CC33
00 204 51
#00CC00
00 204 00
#0099FF
00 153 255
#0099CC
00 153 204
#009999
00 153 153
#009966
00 153 102
#009933
00 153 51
#009900
00 153 00
#0066FF
00 102 255
#0066CC
00 102 204
#006699
00 102 153
#006666
00 102 102
#006633
00 102 51
#006600
00 102 00
#0033FF
00 51 255
#0033CC
00 51 204
#003399
00 51 153
#003366
00 51 102
#003333
00 51 51
#003300
00 51 00
#0000FF
00 00 255
#0000CC
00 00 204
#000099
00 00 153
#000066
00 00 102
#000033
00 00 51
#000000
00 00 00

 

カラーネームありの色

カラーネームが付いた色は、全部で147色ありますが、すべて覚える必要はありません。

というもの、基本的には16進トリプレット表記で、どんな色も再現できるからです。

一応、標準カラーと呼ばれる16色のサンプルを下記にまとめたのでご参照あれ。

 

標準カラーの16色

#FF0000
Red
#FFFF00
Yellow
#00FF00
Lime
#00FFFF
Cyan
#0000FF
Blue
#FF00FF
Magenta
#800000
Maroon
#808000
Olive
#008000
Green
#008080
Teal
#000080
Navy
#800080
Purple
#000000
Black
#808080
Gray(Grey)
#C0C0C0
Silver
#FFFFFF
White

*)CyanはAqua、MagentaはFuchsiaと呼ばれることもあります

 

よくある質問や疑問

WEBセーフカラーについて、よくある質問がこちらです。

 

ウェブデザインをするときは、必ずウェブセーフカラーを使用しないといけないですか?

 

結論から言えば、答えは「NO」です。

というのも、WEBセーフカラーに含まれていない色を使ったとしても、ほとんどのケースでは、その色を再現して表示できるからです。

繰り返しになりますが、WEBセーフカラーというのは、どんな環境であっても誤差が少ないカラーのことで、必ず使わなければいけないという決まりはありません。

なので、ブラウザやOSによって色の見た目が多少違ったとしても、自分が表現したい色を使用すべきというのが僕の意見になります。

そもそも、当ブログで使用している色もWEBセーフカラーは無視していますしね…笑

 

色決めに便利なツール

最後に、WEBデザインをするときに、参考サイトなどから気に入った色をピックアップできる拡張ツールを紹介しておきます。

» ColorPick Eyedropper

 

こちらのColorPick Eyedropperを使えば、気になった色をクリックするだけで、16進トリプレットとRGBでの表記を教えてくれます。

僕も常に使用している拡張ツールなので、これからプログラミングを学んでウェブ制作をしていきたい人は、ぜひインストールしておくといいと思います。

ちなみに、Chromeの拡張ツールですが、Firefoxなどを使用している人も同様ツールはあると思うので各自お探しください。

 

カラー選びに便利なサイトもあります

カラー選びには下記のサイトも便利です。カラーコードが一目でわかるので、こういったサイトも使いこなしつつ、カラーコードはコピペで時短しましょう。

» htmlcolorcodes.com

スポンサードサーチ

まとめ:WEBセーフカラーは216色

まとめ

本記事は以上です。

WEBセーフカラーに指定されている色は全部で216色あります。

どんな環境下でも、ほぼ誤差がなく同じ色で表示されるので、どうしても色のイメージを正確に伝えたい場所にはWEBセーフカラーを使うのをおすすめします。

とはいえ、ユーザー環境はブラウザ、OS以外にもPCモニターなどによって異なるため、完全なる統一は不可能です。

WEBセーフカラーを気にしすぎて表現したい色を使えなくなっては本末転倒なので、基本的には自由なカラーリングでデザインしつつ、複数の環境で見え方を確認しておくくらいで良いかと思います。

おわり。