「連想キーワードから配色を決める」では色から連想するキーワードをヒントにホームページの配色を決めました。
ここでは実際の色を並べながら判断するツールを紹介します。
カラースキーマについて
ホームページの配色を決める時に便利なサイトのご紹介です。
http://createafreeWebsite.net/html-color-tool.html
このツールでは基本となる色を選ぶだけで同系色や相性のいい色反対色などを選んで同時に表示してくれます。
和訳されていないのでここから使い方を解説します。参考にしてくださいね。
基本色を選ぶ
基本色にしたい色をクリックします。
カラースキームを選ぶ
選択した色を基準に単色配色対象の補色3等分した配色4等分した配色類似色と対象の補色をそれぞれ選ぶことが出来ます。
☐初期は単色配色
mono/同一色相配色
同じ色相の色だけを使い「まとまり感」を表現しやすい配色。単調になりがちなのでトーンのコントラストを大きく取ることが多い。色相が絞られているので配色のテーマが明確化されます。
Contrast/補足色相配色
色相環で180度反対方向に位置する色同士の配色。色相の対照性についてどの程度どのように表現するかを常に意識しておかなければならない配色です。
Triad/対象色相配色
色覚的に均等関係にある色とされほぼ補色の関係になります。お互いを強調する色の組み合わせなので強烈な印象を与える配色です。彩度が高い色同士を組み合わせると強烈になりすぎる傾向にあります。
Tetrad/類似色色相・対象色相配色
色相差の近い色同士の配色で色相に適度な共通性と変化をつけることができる色の組み合わせ。バランスの取りやすい配色形式といえます。色相の幅が狭いので単調な印象になりやすい。
色覚的に均等関係にある色とされほぼ補色の関係になります。お互いを強調する色の組み合わせなので強烈な印象を与える配色です。彩度が高い色同士を組み合わせると強烈になりすぎる傾向にあります。
Analogic/隣接色相・補職色相配色
補色色相配色の1歩手前の色相との配色。対照色相配色と同じくほぼ補色の関係でお互いの色を強調する組み合わせなのでトーンや面積などでバランスを取るのが良い。
色相環で180度反対方向に位置する色同士の配色。色相の対照性についてどの程度どのように表現するかを常に意識しておかなければならない配色です。
色幅を選ぶ
カラースキームで3等分した配色4等分した配色類似色と対象の補色を選ぶと基本色をもとに配色を補正することができる。
対象の補色を追加する
カラースキームで類似色と対象の補色を選ぶと対象の補色を表示するチェックボックスが表示されチェックすることができる。
Webセーフカラーに限定
Webセーフカラーに限定することが出来ます。
カラーバリエーションを選ぶ
選択した色に対してパステル系ダークパステル系ライトパステル系コントラスト系淡い系に変更することが出来ます。
色の順番を入れ替える
四角いパレットに表示されている色の順番を入れ替えることが出来ます。
色の補正をする
四角いパレットに表示されている色をクリックして色の補正をすることが出来ます。
色盲のシミュレーション
プルダウンメニューから以下のモードを選択してシミュレーションを行うことができます。
☐Normal Vision（正常）
☐Protanopy（赤色色盲）
☐Deuteranopy（緑色色盲）
☐Tritanopy（青色色盲）
☐Protanomaly（赤色色弱）
☐Deuteranomaly（緑色色弱）
☐Tritanomaly（青色色弱）
☐Full colorblindness（全色盲）
☐Atypical monochromatism（単色色盲）
「デザイン講座」に進む
「連想キーワードから配色を決める」に戻る
