配色操作の前提

当サイトはJavaScriptを使用致しております。
JavaScriptが使用可になっていない場合は配色操作が出来ませんので、ご利用になられる場合は使用可に設定してください。
あなた様の現在環境では JavaScript は
当サイト推奨ブラウザは InternetExplorer 6 / 7 又は、Firefox 2.0です。
上記ブラウザでの動作は確認致しております。それ以外のブラウザでは正しく表示されない可能性があります。
( Operaは右クリックで背景色を変更する操作以外は正常に動作します。)
( 注 ) Internet Explorer 6 の場合、インターネット一時ファイルを「ページを表示するごとに確認する」に設定してあると動きが悪くなります。

配色操作方法

配色画面 ■ 基本的には以下のマウスクリック操作のみです
　 ( 主な機能は後述する機能一覧を参照して下さい )
色が表示されている箇所を右クリックすることで、
画面全体の背景色を変更することができます。 ( [ Opera ] を除く )
色が表示されている箇所を左クリックすることで、
各項目に色をセットすることができます。
ラジオボタンを選択せずに、とりあえず4色選んでみてください。
( ラジオボタンは特定の色を変更する場合に使用できます。 )
Sample ボタンをクリックすることで、
選択した色の配色イメージ ( 子ウィンドウ ) を確認することができます。
( 子ウィンドウはいくつでも表示可能ですので、
ご自分で配色したイメージと比較しながら新しい配色を試すこともできます。)
※ 子ウィンドウはいくつでも表示可能ですが、多く表示しすぎると動きが悪くなることがあります。
※ 子ウィンドウは [ サイズ調整 ] [ ドラッグ操作 ] [ 最小化 ] [ 閉じる ] 操作が可能です。
※ カラーコードに「#」を付加する場合は、チェックボックスをＯＮにして下さい。
※ クリアボタンを押下すると、選択した色及び画面全体の背景色がクリアされます。
※ [ 背景 ] [ サブ ] [ メイン ] [ 文字 ] の左側にある任意のラジオボタンを選択後に色を選択すると、チェックされている項目の色をセットします。
※ Internet Explorer 6 / 7 のみ配色用のサンプル画像をご自分の任意の画像に変更することができます。
　 ( Internet Explorer 7 をご利用の方は設定変更が必要です、Internet Explorer ７ をご利用の方へ を参照してください )

配色ツールとしての主な機能

1
配色画面
背景色を右クリックで変更( Operaを除く ) 色が表示されている箇所を右クリックすると画面背景色を変更することができます。 色は大きさ(面積)によってもイメージが全然異なりますので、面積が大きい場合の色のイメージを確認するには、 各色を右クリックして確認してください。( Operaではこの機能をご利用になれません )
色見本の色相角度をマウスオーバーで見易く 配色を考える際、「なんとなく」という感覚で配色をするのも面白い方法ですが、 あらかじめ存在する配色理論に基づいて色の組合わせを考えるのも合理的な方法ではあります。 図1のような色見本(サンプル)では左の列に色相の角度を表示し、 マウスオーバー時に色相角度をハイライトで見易くしておりますので、 類似系・対照系など合理的な配色方法に基づいた様々な配色を試してみてください。
色を選択時にCMYK値を表示 色見本(サンプル)を左クリックすると図2の配色ツールボックス下部に選んだ色のCMYK値を表示しております。 当サイトでは配色ツールの基になる色見本(サンプル)の表示をHTMLやCSSで指定可能な16進数コードで記述しておりますが、 CMYK値を確認したい場合は各々の色をクリックすることでCMYK値を見ることができます。 ( CMYK値は一般的なグレー置き換えを使用しております。参考程度にご覧ください )
配色サンプル画面を複数表示 色の組合わせを確認する場合、実際の配色現場で行われているように、複数のサンプルを横に並べ、目で確認してみるのが一番だと思います。( 図4参照 ) 図2のツールボックスにあるSampleボタンを押す度に図3のような配色サンプル画面が表示されますので、 御自分で組合わせた配色サンプル画面を見比べながら、理想的な配色を見つけてみてください。
Original画像を使った配色 ( Internet Explorerのみ ) 色の組合わせだけでいけば満足いくのですが、そこに画像を入れてみたら「あれ？」となることがあります。 配色サンプル画面では、図3のように画像を含めて配色イメージを確認できるようになっております。 図2のツールボックスにある参照ボタンからOriginal ( ローカル ) 画像を選択することができますので、 ぜひ御自分のOriginal ( ローカル ) 画像を使用して配色を試してみて下さい。 ( この機能は Internet Explorer 限定の機能です。なお Internet Explorer 7 をご利用の方は Internet Explorer ７ をご利用の方へ を御覧ください )
タブによる配色サンプル画面の切替 前述しましたが、配色のイメージは各々の色が占める面積によって大きく異なります。 図3の配色サンプル画面では、色の面積や色の場所が異なるサンプルをいくつかのタブで提供していますので、 実際にイメージの違いを目で確認してみてください。
配色サンプル画面の印刷 ページを跨って配色操作を実行する場合や、配色サンプル画面を印刷したい場合に別ページで表示する機能を設けてあります。 例えば赤色系統だけで配色操作を実行していた際に、青色系統での配色イメージと比較させたい場合には、 一度赤色系統で作成した配色サンプル画面を別ページで表示し、その後に青色系統での配色操作を実行します。 ( 印刷時に色が印刷されない場合は、後述するブラウザ設定を確認してください )
2
配色画面
3
配色画面
4
配色画面

印刷時に色が印刷されない場合のブラウザ設定

配色画面
Internet Explorer [ ツール ] → [ インターネットオプション ] → [ 詳細設定 ] → 設定枠内の一番下 「背景の色とイメージを印刷する」にチェック
配色画面
Firefox [ ファイル ] → [ ページ設定 ] → 背景も印刷 ( 配色と画像 ) にチェック