■このサンプルについて
このサンプルはホームページを制作する上で、背景色とテキスト色のバランスを検討するために作成したものです。
HEX(16進数)バージョンとColorName(色名)バージョンの2種類用意しました。HEXは色別(White,Black,etc.)、ColorNameは色相別(暖色,寒色)で区分しましたので、お好みのバージョンをご利用ください。
最初にこのページを開けるとHEXバージョンが表示されるよう設定していますので、ColorNameに変更したい時は左のフレームから「Color Name」のリンクをクリックしてください。
ColorNameからHEXに戻るときも同様です。
■サンプルの使い方
左メニューのうちいずれかをクリックすると、該当する色リストがこのエリアに表示されます。各色のバー(ポインタが指マークに変わる場所) をクリックすると、背景色がその色に変わります(JavascriptをON状態にしていないと、動作しません)。気に入った色が見つかるまで、色々試してみてください。
使用したい色が決まりましたら、16進数(または色名)で書かれた部分をコピーしてご自身のHTML文書にはりつける等、目的に合わせて活用ください。
また( )内の数字は、R/G/Bの数値です。カラーピッカーなどを使用される場合はこちらの方が便利かと思います。
■下フレームの活用法
リストの色バーで背景色を変更しますと、下フレームのフィールドボックスへ自動的にそのカラーコードが入力されます。ボックスに入力されたカラーコードは、このエリアと連動しています。コードが入力された状態で、左メニューの選択ができますので、これをうまく利用すれば異なる色相間での配色の検討ができます。
例えば背景がブルー系で、テキストをイエロー系に…という時などに便利です。
尚、テキストボックスの値は自由に変更できます。
また付録として、一般的なWebカラーをいくつか用意しました。■をクリックしても、このエリアの背景色が変更できますので、併せて活用ください。(カラーコードはブラウザのステータスバーに表示)
IEをご使用の方は、フォント色も変更できます。
■注意事項
・このページに直接リンクをしないでください。
・お使いの機種やブラウザの環境によっては色が異なる場合があります。
・このカラーサンプルのオフラインダウンロードは現在サポートしておりません。
・リンクはフリーですが無断転載/転用は禁止です。詳しくはこちら(別窓)。
■免責
・サービスは予告なく終了する場合があります。
・また、このカラーサンプルを使用したことにより、何らかの損害/トラブルが発生した場合、当方は一切の責を負わないものとします。
|