Design Plus

WEBデザインを中心としたテーマを扱うサイトです

タグ:

仮想サイトで配色を試しながら 調整することが出来るツール「ウェブ配色ツール Ver2.0」

色だけを抜き出して配色を決めるツールはありますが、今から紹介するツールは 仮想サイトでプレビューを見ながら配色テストを行う事が出来るジェネレータ「ウェブ配色ツール Ver2.0」です。

ウェブ配色ツール Ver2.0

ウェブ配色ツール Ver2.0

基本色

カラーピッカーから一色選ぶと、全ての色がそれに合わせて変わります。

ロゴの文字

タイトルが変わります。

ロゴの色

タイトルの文字色

配色の方向

1色決めると後は自動で変わるのですが、こちらで明るい、暗いを調整できるようです。

全体の背景

背景のありなし

ロゴの背景

「配色の方向」を「暗い」に設定した場合、ロゴが隠れて見えなくなる為、背景の白固定が出来る

色相差

自動調整の色相差を設定。あまり掛け離れすぎると おかしな配色になるので注意

あとは、以下のヘッダーの矢印をクリックするとヘッドバナーを変更できます。雰囲気が近いモノを設定しておくと良いかもしれません。

ウェブ配色ツール Ver2.0

ロゴ(初期設定はフォルトゥナ)をクリックすれば、コピー&ペースト用の色の一覧表が出ます。

ウェブ配色ツール Ver2.0

他の配色ツール(Color Scheme Designerなど)と組み合わせて使うのもアリかもしれませんね。

WordPressテーマを無料プレゼント

無料WordPressテーマプレゼント

コメント & トラックバック (2)


  1. 作者です。私の解説よりわかりやすい説明ありがとうございます!

    • 2

      こんにちは。

      >私の解説よりわかりやすい説明ありがとうございます!

      いえいえ、素晴らしいサービスを提供してくださってありがとうございます!
      これからは頻繁にお邪魔させて頂きますので よろしくお願いします。



コメントする