色の組み合わせるツールは多数ありますが、当サイトでも読みにくかったりまぶしかったりしないWebサイトの配色を決めるツールを提供しています。

読みやすくて使いやすい配色を行います

このツールは自分の思い通りのイメージの配色を作るものではありません。思い通りの配色を行うには、それなりの色彩に対する知識なども必要ですが、思い通りにならない方のために、最低限、読みやすい配色を提供するツールです。

このページをご覧になるにはFlash Playerが必要です。

「Web配色ツール」の使い方

右下の色相・明度・彩度をスライドバーで調整し、右上の一色を決めると、それに応じて自動計算で各部の色を決定してくれます。

ツールの都合上というよりもイメージに差を出しにくいので、明度・彩度とも40以下は設定できないようになっております。

予告なしに機能や仕様が変更する可能性がありますので、ご注意ください。

「Web配色ツール」で決められる色

配色できる各部分はこのようになっております。

メインカラー

ヘッダー部分の2本の横線がこれに当たります。ベタ塗りにすると重ねた文字が読みにくく、印象を損ねる可能性がありますので、控えめにしております。

ロゴ

ロゴマークの色です。マークや文字の色が決まっていない場合のために同系色を入れておりますが、実際に使う場合にはご自由に入れ替えてください。

ボタン

メニュー部分のボタンの色です。コントラストをつけて読みやすくするために黒文字を入れてあります。

ボタン背景

メニューの背景色です。メインカラーの印象を損ねないために同系色で配色されるようにしてあります。チェックボックスにより表示・非表示の切り替えが出来ます。

見出し1

そのページで一番上にある大きな見出しのことです。HTMLの<h1>要素にあたります。文字の読みやすさを優先するため、ワンポイントで視線の誘導に使っております。

見出し背景

見出し1の背景のことです。チェックボックスにより表示・非表示の切り替えが出来ます。見出し1に合わせて同系色で配色されます。

見出し2

いわゆる中見出しで、HTMLでは<h2>要素にあたります。見出し1からのスムーズな視線の移動を促すため、見出し1よりも控えめな同系色を配色しています。

背景色

コンテンツ（中身）部分の背景色を表します。本文の文字色は黒であることを前提として、十分に読むことが可能なコントラストを維持するために、明るく控えめな色を配色いたします。こちらもチェックボックスにより表示・非表示の切り替えが出来ます。

関連記事：

• ウェブ配色ツール Ver2.0
• リンク、トラックバック、コメントについて
• 背景色と文字色
• レイアウトをしてから配色
• 関連サイトの紹介

サブカラーと同じ方法で分割する

アクセントカラーもサブカラーと同じように分割することが出来ます。最初に決めていたアクセントカラーと似た色を選ぶようにしましょう。大きく動かしてしまうと、サブカラーやベースカラーに似てきてしまうので、アクセントカラーとしての機能を損なうことになります。

元々使われる面積が小さいアクセントカラーをさらに細かくするということで、使い方によっては逆に目立たなくなってしまう場合もあります。アクセントカラーを分割するのは2色くらいまでにしておくのがよいでしょう。

アクセントカラーの分割サンプル

サンプルはサブカラーの分割のページで使った物を使います。左右ともアクセントカラーを2分割して、明度が低い方の色を見出しに使ってみました。アクセントは目立たせるための色ですので、小面積でワンポイントで使用することを考えた方が、全体のイメージを損ないません。

関連記事：

• アクセントカラーを決定
• サブカラーの分割
• 彩度だけを変えてサブカラーを作る
• 色彩は面積比で扱う
• 悩んだら色を減らす

サブカラーの分割でカラフルに

ここまでの色彩設計の考え方だと、カラフルな配色にはなり得ないのではないかということにすでにお気づきになられている方もいらっしゃることでしょう。そして3色だけでは配色しきれないとも感じられておられると思います。

色を増やしていく方法はいろいろあるのですが、ここではサブカラーを分割する方法を使います。ここまでの段階でサブカラーはベースカラーよりも地味に作られているはずですし、調和もしているはずです。上手くサブカラーが出来ていれば違和感なく分けられるはずです。

サブカラーの分割例1

両方とも同じ色を使ったサンプルです。ベースカラーの明度と彩度を少し動かしたHSB[30:40:60]のサブカラーを最初に作り、それを分割して色相を動かしたHSB[90:40:60]の緑を作り、それに明度と彩度を動かしたHSB［90:20:70]を加えております。アクセントカラーはベースカラーの色相だけを大きく動かしたHSB[220:60:80]の紺色を用いております。

ベースカラーであるHSB[30:60:80]に明度と彩度を動かしたHSB[30:40:60]のサブカラーを加えました。アクセントは色相と明度を動かして作ったHSB[0:35:60]を使っております。これらは左右のサンプルで共通している色です。左のサンプルでは出来上がった3色をそのまま配置しております。

次に右のサンプルですが、配色にやや動きを付けるためにサブカラーを4分割しております。サブカラーの色相は左の青から30、47、90、144となっております。この数値は目で確認しながら適当に動かしておりますが、明度と彩度があまり変化していないので、同じような印象の５色が出来上がっていると思います。

サブカラーのうちの3色をボタンの色として配置いたしました。残った緑を見出しとして用いております。

これによって使用している色は増えておりますが、ベースカラーの面積は変えておりませんので、その印象は損なわれていません。

サブカラーの分割例2

こちらは左右で違う配色サンプルをご用意しました。

まず左のサンプルですが、ベースカラーであるHSB[200:15:100]に明度と彩度を動かしたHSB[205:10:98]のサブカラーを加えました。アクセントは色相と明度を動かして作ったHSB[0:35:60]を使っております。

サブカラーを分割し、少し動きを付けるために色相だけを大きめに動かしたHSB[70:15:98]を作り、そのままメニューの部分に使っております。ここではテキストでのリンクを想定しておりますが、このリンクの背景の色をそのままボタンの色に使うことも可能です。

次に右のサンプルですが、少し落ちついた和の雰囲気を出すためにHSB[50:20:100]の明るいベージュをベースカラーに持ってきました。サブカラーにはHSB[90:20:80]を最初に決定いたしました。サブカラーを分割して2色追加しております。これは看板部分にそのままの面積と形で用いております。アクセントはベースカラーの明度と彩度だけを動かしたHSB[50:80:90]を選びました。他の色が全て明るい色なので、十分にアクセントとして目を引くと思います。

カラフルになった印象を受けると思いますが、ベースカラーのベージュの印象は損なわれていないはずです。これは面積比を維持したことによります。

関連記事：

• アクセントカラーの分割
• 彩度だけを変えてサブカラーを作る
• 色相だけを変えてサブカラーを作る
• 色の三属性の２つを動かす
• アクセントカラーを決定