Wed >画像 >色彩の基本

同化現象

二色の隣接する色が、お互いの影響で近づいて見えることを「同化現象」と言います。同化現象には、色相・彩度・明度でそれぞれ起こる色相同化・彩度同化・明度同化があります。

色相同化

左の線は黄色(v8)、右の線は青色(v20)、背景は左右同じ赤色(v2)です。
左背景の赤は黄色に近づいて黄赤に、右背景の赤は青に近づいて赤紫に見えます。

彩度同化

左の線はHSB 0度 30% 90%、右の線はHSB 0度 90% 90%、背景は左右同じHSB 0度 60% 90%です。
左背景の赤は、彩度30%と60%の差が近づき、彩度が60%より小さく見えます。
右背景の赤は、彩度90%と60%の差が近づき、彩度が60%より大きく(鮮やかに)見えます。

明度同化

左の線は明度90%、右の線は明度30%、背景は左右同じ明度60%です。
左背景のグレーは、明度90%と60%の差が近づき、明度が60%より大きく見えます。(明るい)
右背景のグレーは、明度30%と60%の差が近づき、明度が60%より小さく見えます。(暗い)

▲ページの先頭へ

対比現象

二色の隣接する色が、お互いの影響で色の差が強調されて(差が大きく)見えることを「対比現象」と言います。対比現象には、色相・彩度・明度でそれぞれ起こる色相対比・彩度対比・明度対比があります。一般的には、同化現象の時より図が大きい場合に生じます。

色相対比

左外枠は黄色(v8)、右外枠は青色(v18)、中の四角形は左右同じ緑色(v12)です。
左の緑は黄色から遠ざかり、青色に近づいて青緑に見えます。
右の緑は青色から遠ざかり、黄色に近づいて黄緑に見えます。

彩度対比

左外枠はHSB 30度 90% 90%、右外枠はHSB 30度 30% 90%、中の四角形は左右同じHSB 30度 60% 90%です。
左の中にある四角形は彩度90%と60%の差が開き、彩度が60%より小さく見えます。
右の中にある四角形は彩度30%と60%の差が開き、彩度が60%より大きく(鮮やかに)見えます。

明度対比

左外枠は明度30%、右の外枠は明度90%、中の四角形は左右同じ明度60%です。
左の中にある四角形は明度30%と60%の差が開き、明度が60%より大きく見えます。(明るい)
右の中にある四角形は明度90%と60%の差が開き、明度が60%より小さく見えます。(暗い)

▲ページの先頭へ

暖色と寒色

視覚から暖かい印象を受ける色を「暖色」と言い、赤、オレンジ色、黄色をさします。一方視覚から寒い印象を受ける色を「寒色」と言い、青や青に近い青紫や青緑をさします。そのどちらでもない色を「中性色」と呼びます。

色相環

色相を順序立てて円環にして並べたものが「色相環」です。上図は、PCCSの色相環(12色)です。
v2の赤、v4の赤みの橙、v6の黄みの橙、v8の黄、v10の黄緑、v12の緑
v14の青緑、v16の緑みの青、v18の青、v20の青紫、v22の紫、v24の赤紫

PCCSでは、v2の赤、v8の黄色、v12の緑、v18の青を「心理四原色」としています。

PCCS

PCCSは、Practical Color Co-ordinate Systemの略で、日本色彩研究所が1964年発表したカラーシステムです。
PCCSは、色相とトーンによる二元的カラーシステムです。トーンは彩度と明度をまとめた概念で、12のイメージに分かれています。

ブライトトーン

上図二段の下は、PCCSのブライトトーン12色です。
数字の上段は、ブライトトーンのRGB(10進数)
数字の中段は、ブライトトーンのRGB(16進数)
数字の下段は、ブライトトーンのHSB(色相、彩度、明度)です。
上図二段の上は、ブライトトーンと同じ色相で、彩度と明度を100%にした色です。

pccs_v2

pccs_v8

pccs_v12

pccs_v18

最も高彩度である「v ビビッドトーン」
高彩度に属する「b ブライトトーン」「s ストロングトーン」「dp ディープトーン」
中彩度に属する「lt ライトトーン」「sf ソフトトーン」「d ダルトーン」「dk ダークトーン」
低彩色に属する「p ペールトーン」「ltg ライトグレイッシュトーン」「g グレイッシュトーン」「dkg ダークグレイッシュトーン」

▲ページの先頭へ

補色

色相環で正反対に位置する色の組合せを「補色」と言います。補色には、2色を混色すると無彩色になる「物理補色」と、残像現象を起こす「心理補色」があります。

補色同士を並べると、実際の色より鮮やかに見える「補色対比」が見られます。
例えば、グリーンサラダ上のトマトや、笹の葉上のマグロなど( 青緑と赤 )

また心理補色を利用すれば、「補色残像」を打ち消すことができます。
例えば、赤い血と青緑の手術着や、赤いテールランプと緑の道路標識など( 青緑と赤 )

補色残像を体験しよう!

  1. 下図の白黒写真にマウスポインターを合わせます。
  2. 色が反転したような写真の黒丸をじっと見つめます。( まばたきを我慢する必要はありませんよ )
  3. 10秒間見続けたあと、マウスポインターを写真から外します。
  4. 白黒写真に色がついたいるように見えましたか。

補色残像

▲ページの先頭へ

配色デザイン

サイトを作成するとき、色彩は重要です。どんな色を使用するのか、何色を使用するのか、どの大きさで使用するのかなどを検討します。

色の検討手順

  1. テーマカラーを決める。
  2. テーマカラー( メインカラー )から、サブカラーとアクセントカラーを決める。
  3. サイト全体における三色の配分( 面積比 )を決める。

サブカラーやアクセントカラーは、配色デザインを考慮して決めます。配色デザインには、全体のテーマカラーを色相でとらえる「ドミナントカラー配色」と、トーンでとらえる「ドミナントトーン配色」の2つがあります。ドミナントとは「支配的な」「優勢な」という意味があります。

▲ページの先頭へ