坂本邦夫の「基礎からわかるホームページの配色」» 色の三属性

色の三属性の２つを動かす

坂本邦夫 — Wed, 27 Jan 2010 04:40:52 +0000

色の三属性のうち2つを動かし、少し動きを付けた配色を考えます。

２つの属性は慎重に動かす

色の三属性のうち２つを同時に動かすとなると、一つずつ動かした場合に比べて動きのある配色が可能になります。

ここまでの配色は類似性の原理に基づいてるので、似た色での配色が前提になっておりますが、両方とも大きく動かしてしまうと似た色でなくなる可能性もありますので、動かす量を計算して色の決定を行います。

特に色相を大きく動かしてしまうと動きは出ますが、統一感に欠ける配色になりかねません。黄色がベースカラーであるならば、その両隣の色相である橙、黄緑くらいまでの範囲で移動を抑え、明度もしくは彩度を大きめに動かすようにしましょう。

色相と明度を変えたサブカラー

まずは統一感を出すことが肝要ですので、配色に自信がなければ色相は大きく動かさないようにします。統一感を出すためには同系色でまとめる配色の基本に忠実に。

色相と彩度を変えたサブカラー

また軽い、重いなどのイメージは明度に依存します。軽いイメージが必要な場合はサブカラーを高明度にし、重いイメージが必要な場合では低明度で統一し、色相と彩度でイメージを調整します。

明度と彩度を変えたサブカラー

この例ではあまり数値を変えておりませんが、色相による統一感は崩れにくいので、もっと大きく数値を動かしても大丈夫です。

関連記事：

彩度とは

坂本邦夫 — Tue, 26 Jan 2010 03:25:08 +0000

色の鮮やかさを表します。派手・地味感を表現するのに使いやすい属性です。

彩度とは

彩度とは色の鮮やかさを表す属性です。彩度も明度と同じように「高い」「低い」でその度合いを表します。彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。

彩度が高い色は派手な印象を受け、彩度の低い色は地味に感じます。

関連記事：

明度とは

坂本邦夫 — Tue, 26 Jan 2010 03:07:17 +0000

色の明るさを表します。文字の読みやすさに直接関わる要素ですので、慎重に扱うことが必要です。

明度とは

明度とは明るさの違いのことで、最も明るい色は白、最も暗い色は黒となっております。

通常明度を表す場合は明るい色のことを「明るい」「明度が高い」というような表現をします。

明度と読みやすさ

明度は色相、彩度といった他の属性よりも文字の読みやすさに直接影響してきます。文字を読みやすくするためには明度の差を大きく取ることが基本となってきます。情報が読めないとホームページの価値は一気に下がってしまいますので、明度差の取り方には十分注意しながら配色を行うようにします。

関連記事：

色相とは

坂本邦夫 — Tue, 26 Jan 2010 02:59:13 +0000

赤、青、緑と言った色みの違いを表すものです。また類似色相と補色についても説明しています。イメージを決定するのに最も重要な属性です。

色相と色相環

色相とは赤、青、緑のような色味の違いのことを表します。色相はイメージの違いを最も表現することが出来る属性です。

また色相を円上に配置したものを色相環と言います。同じ赤の中でも赤紫に近い赤や橙に近い赤など色々な赤がありますが、ここでは代表的な赤、黄、緑、青、紫の5色にその中間の色を加えて赤、橙、黄、黄緑、緑、青緑、青、青紫、紫、赤紫の10色を作り、その中間にもう1色加えて全部で20色相の色相環を作っております。

類似色相

よく似た色相のことを表します。厳密にどこまでを似ているというかは大きな問題ではありませんが、色相環の上の5を基準にすると、3～4と6～7くらいまでを、類似色相として覚えておけばよいでしょう。

補色

この色相環の正反対に位置する色のことを補色と呼びます。補色同士を並べて配置するとお互いに引き立て合って鮮やかに見えます。しかし使いどころを間違えると、まぶしくかえって見えにくくなってしまいます。

関連記事：