どんな人がどんな環境で見ても、同じ色に表示されるカラーはないの？
WEBデザインをするうえで知っておいたいい色のルールとかはありますか？
こんな疑問を解決する記事です。
本記事では、WEBセーフカラーについて、216色の色見本と共に解説します。
プログラミングにおいてカラー選びは、CSSで文字色や背景色を変更するときなどに役立ちます。
色見本を見つつ、どんな環境下でも同じように表示される色を選択しておけば、作業の負担も減るので一石二鳥だと思います。
スポンサードサーチ
本記事のもくじ
WEBセーフカラーとは
WEBセーフカラーとは、WindowsやMacなどの異なるOSでも同じように表示される216色のカラーのことです。
WEB上で色を表示する際は、ユーザー側の環境、つまりOSやブラウザなどによって多少の違いが出てきてしまうのですが、この216色であれば、その誤差を最小限に抑えることができます。
ブランドイメージなどに関わる重要カラーが、見る人によって異なる色に表示されてしまっては、あとあと“イメージと違った”などの誤解につながりかねないので、WEBセーフカラーで統一された色を使うのが良いでしょう。
色の指定方法
WEBセーフカラーの色を指定する方法はいくつかありますが、WEB制作で主に使われるのは下記の3つです。
- 16進トリプレット表記
- カラーネーム
- 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を使えば、気になった色をクリックするだけで、16進トリプレットとRGBでの表記を教えてくれます。
僕も常に使用している拡張ツールなので、これからプログラミングを学んでウェブ制作をしていきたい人は、ぜひインストールしておくといいと思います。
ちなみに、Chromeの拡張ツールですが、Firefoxなどを使用している人も同様ツールはあると思うので各自お探しください。
カラー選びに便利なサイトもあります
カラー選びには下記のサイトも便利です。カラーコードが一目でわかるので、こういったサイトも使いこなしつつ、カラーコードはコピペで時短しましょう。
スポンサードサーチ
まとめ：WEBセーフカラーは216色
本記事は以上です。
WEBセーフカラーに指定されている色は全部で216色あります。
どんな環境下でも、ほぼ誤差がなく同じ色で表示されるので、どうしても色のイメージを正確に伝えたい場所にはWEBセーフカラーを使うのをおすすめします。
とはいえ、ユーザー環境はブラウザ、OS以外にもPCモニターなどによって異なるため、完全なる統一は不可能です。
WEBセーフカラーを気にしすぎて表現したい色を使えなくなっては本末転倒なので、基本的には自由なカラーリングでデザインしつつ、複数の環境で見え方を確認しておくくらいで良いかと思います。
おわり。
