Webセーフカラーはそれほど気にしなくてもOK

  • このエントリーをはてなブックマークに追加
Webセーフカラーはそれほど気にしなくてもOK?!

どの環境でも同じように見えるとされるWebセーフカラー

Webセーフカラーとは、WindowsやMacintoshなどのOSなどの異なる環境でも正しく表示される216色のことをいいます。
このWebセーフカラーを使う事で、環境による色の変換を最低限に防ぐ事ができるとされています。

最近は8bit(256色)、16bit(65,536色)、24bit(16,777,216色)などのカラーモードを切り替えることが出来ますが、古いものでは256色しか表示できないものが多くありました。
無い色は再現が出来ないので、似た色に置き換えられてしまいます。
グラデーションで色の変化を表現したのに、表示するパソコンによっては再現ができず、階段状になってしまった・・・なんてこともありました。

こうした色の変化を防ぐ為に、Netscape社がWindowsとMacintoshといった異なったOSでも表示に変化の少ない216色を制定しました。これをWebセーフカラーと呼んでいます。
WebセーフカラーはRGBの色を16進数で表す時に「00,33,66,99,CC,FF」のみを使って色を指定します。
赤緑青がそれぞれ6段階ずつ、6(R)×6(G)×6(B)=216色です。

そして256色からセーフカラー216色を引いて残る40色は、OS自体がシステムとして使う色に割り当てられています。

本当に変化がないのか?

変化の無い色とされているWebセーフカラーですが、実は8bit(256色)と16bit(65,536色)では色の表示が異なって見える場合があることが確認されています。
ややこしいですが、再現できる色合いが増えるにつれて、微妙にズレができてしまうんですね。
Webセーフカラーとされていても、細かく見ていくと完全に一致する色ではなかったということです。

また個別にモニタの色合いを変更していた場合は、もちろん差ができてしまいます。

セーフカラーを気にせず着色しても問題ない

Webセーフカラーはかなり発色のキツイ色がほとんどです。
まぶしい色合いばかりなので、その中から使える色はかなり限られてしまいます。
こうした少ない色合いでデザインをしようとするのは無理があります。

Webセーフカラー一覧はこちらを参照:Webセーフカラー web216 – Web Safe Colors(https://www.colordic.org/s/)

色が変わるといっても、赤は赤系になる

色に差が出るといっても、赤が青になったりするわけではありません。
再現できる近似値に置き換わるので、赤系の色は赤系になります。
鮮やかさには明確な差が出ますが、まったく違う色にはならないので、表現したい事の意図は十分に伝わります。

それに最近では256色しか出せない環境で見ている人は、かなり少なくなっています。
せっかく多くの色を使える環境が出来上がってきているのに、少ない色で、しかも色合いがまぶしく、読みにくいページを作る意味もありません。

困るのは薄い色の表現

Webセーフカラーを使っていて一番困るのは薄い色です。

セーフカラーの中で一番薄い灰色はは #CCCCCC です。
でもこの色、なんだか濃くないですか?
使うなら #EEEEEE の方が丁度良く見えます。

この濃淡の差は他の色でも同じです。
216色という数字だけ見ると多くありそうに見えますが、実際に使ってみると使いづらい色合いがほとんどです。
パステルカラーをWebセーフカラーで再現しようと思っても、指定されていないので使えません・・・

一番適していると思う色を使えばいい

自身の表現したい事柄を最大限に表現できる色を使い、その後に8bitや16bitカラーでもきちんと見る事ができるか?文字は読めるか?と確認したほうがいいでしょう。
そもそもどんな環境でも完全に一致する色を表現する事は不可能です。
パソコンの性能やモニターの設定、個人の色の捉え方など、様々な要因が重なり、自分の見ている色が、他者も同じ色だと認識するのは無理があります。

最大の目的は、作った物の情報を相手に正しく伝える事です。
そこには色も含まれるかもしれませんが、およその色合いが合っていればそれほど問題にはならないでしょう。

赤に見えてほしい色が緑に見えたりしたらそれは大問題ですが、それほどの変化は起こらないので、Webセーフカラーに囚われることなく、一番表現に適していると思う色を使いましょう。
その後のチェックも忘れずにしましょうね。

まとめ

・Webセーフカラーはどの環境でも同じ色に見えるとされている216色の事
・実際にはモニタの設定や細かな仕様の違いから完全に一致することはない
・表現したい色合いを使うようにし、他の環境でも正しく見えるかを確認するようにする

  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください