This is HTML color variation simulator.
Make good use of this simulator for check color balance.

感覚で選ぶ色見本ページです(HTMLで使える配色コード付き)
このページでは背景とテキストに加えて、タイトルとタイトルパネルも同時に表示して色合いを確認することが出来ます。
タイトルパネルに関しては、タイトルテキストの白抜き(テキストを背景色と同化させる)
パネルを背景色と同化させる(タイトルパネルを消す)などの操作も手軽にできるようになっています。
サイト・ホームページ・ブログなどをデザインするお供としてご利用いただければ幸いです。
余談ですが、このサイトのトップページにあるコンテンツメニューはツールを使って配色したものです。

@Select parts

Operation manual change display mode(view - haidden)
下記リストボックスより配色を変更したい部分を選んでください
Result display areaに表示される全体背景(Text field)、本分の文字色(Text)、タイトル背景(Title field)、タイトル文字色(Title txet)の4種類について設定できます
この説明文は、上記の”Operation manual change display mode(view - haidden)”をクリックすることで表示・非表示を切り替えられます


ASelect color

Operation manual change display mode(view - haidden)
下記の色選択ボタンにて好きな色を設定できます
クリックまたはタップしたらBSet up HTML color codeのカラーコード(末尾の色文字)が変更されていることを確認してください
他のパーツを設定したい場合@Select partsより目的の部分を選択して、下記の色選択ボタンを押してください(全て設定し終わるまで繰り返す)
この説明文は、上記の”Operation manual change display mode(view - haidden)”をクリックすることで表示・非表示を切り替えられます

BSet up HTML color code

COperation buttons

Operation manual change display mode(view - haidden)
タイトル文字の特殊な設定と結果表示のボタンです
"Outline title text(白抜き)"をクリックすると、タイトル文字の色が現在設定されている全体背景(Text field)の色に置き換わります
"Delete title field(タイトルパネルを消す)"をクリックすると、タイトル背景の色が現在設定されている全体背景(Text field)の色に置き換わります
一時的な設定ではなく、設定を書き換えてしまうので元に戻したい場合は@からの手順に従ってもう一度設定してください
"result output"をクリックすると、EResult display areaに現在設定されている配色で結果が出力されます
この説明文は、上記の”Operation manual change display mode(view - haidden)”をクリックすることで表示・非表示を切り替えられます
 Optional buttons



EResult display area

top page