テキストベース・カラーチャート

目次

本ページの主旨は、画像ファイルを用いないマトリクス式カラーチャートです。
 文字色や背景色などをBODYタグやFONTタグで指定するための#FF3366などの16進表記文字列を調べるための色見本ページを、読み込みの早いテキストで実現するページです。印刷の色指定に使うカラーチャートをイメージして作成したものです。

 Netscapeが出たばかりの頃、背景色の選択のための色見本ページがいくつかありましたが、画像ファイルを使ったものだったためロードに時間がかかったりしました。これがただのhtmlファイルであれば読み込みはかなり早いため、Netscape2.0のフォントカラータグを使い、印刷の色指定に使うようなチャート形式の色見本を作ってみたのが最初のバージョンです。その後JavaScriptの登場によって色々な可能性が出てきました。すでに色々とJavaを活用されている方も多いため、私と同じようなチャートを生成するスクリプトを作った方がいればそれを使わせていただこうと思っていたのですが、どうもおられないので自作いたしました。

なお、JavaScriptへの対応はまだブラウザによりかなりの開きがあります。また、ブラウザ側のバグにより正常に動作しない場合などもあることが知られています。以下のスクリプト使用ページについては、Macintosh環境でNetscapeでの確認で作成しておりますが、場合によりスクリプトエラーやシステムエラーの可能性は否定できませんので、ご理解とご了承の上でお使いください。なお、エラーレポートは歓迎いたします。


汎用JavaScriptフレーム対応WebColor216色版[96/1/27新規]

Windowsの256色環境ではWeb上でディザリングなしに表示できる色は216色のみです。GIF画像を制作する際に減色を行う場合、自分の環境がもっと多くの色に対応していても、256色環境のユーザーが存在する以上この216色のパレットを使用し色化けの危険を回避すべきといえます。ページ制作の入門書でもこの色の問題に触れていないばかりか、使用色にあわせて減色することを推奨しているものすらあります。このチャートで生成する216色を使用していれば基本的に正しく表示されるはずです。Photoshopは4.0以降WebColorとしてこのカラーテーブルをサポートしています。Mac版Photoshop用パレットはここでダウンロードできます。

Netscape3.0用JavaScriptフレーム対応版[96/12/29更新]


Netscape3.0用JavaScript版


Netscape2.0用JavaScript版


Netscape2.0用HTML版

使い方

色指定は、次のように行います。

(1)まず、カラーチャートから選びたい色を探します。
チャートは赤(R)の割合ごとに1ページになっていますので、 気に入った色がそのページにない場合は下の方にある 「Rによるインデックス」から16進数の文字をクリックして 別のページを選んでください。

(2)チャートから数字を読みます。
まず各ページの左上にある「R=**」から「**」の文字を読みます。 この「**」がそのページのすべての色における赤(R)の明るさ を示す16進数(00〜FF)です。次にその色から上をたどって 横軸の目盛りからG(Green)の値「++」を読み、左にたどって 縦軸の目盛りからB(Blue)の値「--」を読みます

(3)タグで色指定をします


下の一覧からR(Red)の割合ごとに別れたチャートにリンクしています。
Rによるインデックス
00112233445566778899AABBCCDDEEFF

ローカル用に(Netscape2.0用HTML版のみ)

ダウンロードしてローカルで使用するために、圧縮したファイルを用意しました。


リンク集[96/12/29作成]

ほかのカラーチャートのページのリストです。最近ではYahooにも「色彩の情報」というコーナーまでできているのを発見。私もさきほど登録してきました。(1月12日、Yahooに登録されました)
 Return to PAW HOME.