SafeColorPattern

Safe Colorってご存知ですか？

表示できる色が少ない端末では意図した色と違う色で表示されてしまうことが多々あります。そのような環境でも意図した色が表示できる。それがSafe Colorです。
（今頃そんな貧弱な環境あるかよ！ってな感じですが、普及が進むと一段性能が落ちる時もあるので…と言い訳。）

そこで表示能力が256色しかない端末でも表示できるとされる216色を表にまとめて表示するページを作成しました。

色を指定するときに#xxxxxxなどと6桁の16進数で表現したりしますが、このSafe Colorの場合は半分の3桁(RGB各1桁)の16進数で表現できます。

下の画像をクリックするとSafe Colorを画面の大きさに合わせて表示します。

（クリックすると別ウィンドウに拡大表示します。）

6つの表に分けていて、1つの表の中では赤色成分は同一です。表の左上に#0xxなどと表示しています。一番左の桁が赤色成分です。

表の列には真ん中の桁となる緑色成分を#x0xのように表示しています。表の行では一番右の桁となる青色成分を#xx0のように表示しています。

表のなかで行と列の交差するところの色が各表・列・行に示したRGB色成分を混合した色となります。

このページは画面が縦長の場合は表を2×3に、横長の画面では3×2で表示します。なるべく、画面いっぱいに表示するようにしています。

ブラウザや画面の大きさによっては正しく表示されないケースがあるかもしれません。その場合は画面の大きさを変えてみてください。

お約束ですが、御使用の関してこちらでは一切の責任を負いませんのでご了承下さい。

たいしたことないソースですが、簡単なHTML,CSS,JavaScriptの例として参考になるかもしれません。改造もご自由にどうぞ。

IE5,IE6,Firefox3,Safari3.1,Opera9.5ではそれなりに表示されるようです。

あ～、IE7だと高さが反映されない。IE8だと表示そのものが崩れる。うが～!!これだからIEは全バージョン大っ嫌いじゃい!!もう寝る!対応しない!