ロゴ  Web技術実習
戻る〔18.eコマース〕 次へ〔21.色彩(色のイメージと配色)〕 目次  

20. 色彩(三原色と三属性) □□□□□□□□□□□□□□□□□□□□■□■□□

20-1 三原色

 2つ以上の色を混ぜて別の色を作ることを混色(コンショク)という。できるだけ少ない色の混色でより多くの色を作れると効率がよい。
 色は3つの基本となる色(原色)があれば、それらを混ぜ合わせるだけで、そのほかの色を作ることができる。この3つの基本となる色を三原色(サンゲンショク)という。

20-2 光の三原色

 コンピュータのディスプレイやカラーテレビでは、光の三原色である赤(Red)、緑(Green)、青(Blue)の3色でほぼすべての色を作ることができる。RGBと呼ばれる。
 右図は、光の三原色を最大の明るさで混色したものである。各色の明るさを何段階に分けることができるかによって表示能力が決まる。
・8段階の場合 … 8×8×8=512色
・256段階の場合 … 256×256×256=16,777,216色
 光のように、色を混ぜるごとに明るくなる混色のことを「加法混色」という。

20-3 色料の三原色

 カラーの写真や印刷では色料(シキリョウ)の三原色であるシアン(Cyan)、マゼンタ(Magenta)、イエロー(Yellow)の3色でほぼすべての色を作ることができる。CMYと呼ばれる。
 右図は、色料の三原色を同量ずつ混色したものである。インクジェットのカラープリンタでは、3色を混色して黒を作らずに黒(blacK)を追加している。CMYKと呼ばれる。黒はRGBのBと混同しないようにKを使っている。
 色料のように、色を混ぜるごとに黒くなる混色のことを「減法混色」という。

20-4 RGB

 コンピュータで扱うカラーはR(赤)、G(緑)、B(青)の各色を0〜255の256段階で指定する。例えば、マゼンタは赤と青の混色なので、R=255、G=0、B=255と指定することで最も明るいマゼンタになる。
 HTML(Webページ)でも同じようにRGBを256段階で指定する。

例  マゼンタ #FF00FF ・・・ RGB各色を2けたの16進数で指定

20-5 Webセーフカラー

 RGBを256段階で指定すると、およそ1677万色(256×256×256)の色が表現できる。しかし、インターネットを使用しているすべてのコンピュータで同じように1677万色が使える保証はない。また、WindowsやMacなどの機種の違いによって表示される色が微妙に変わることもある。
 このような環境の違いにかかわらず、安定した色の再現性が保証された色のことを「Webセーフカラー(web safe colors)」という。各色256段階を51ごとの6段階に分けて、次の数値で指定する。

0(#00)、 51(#33)、 102(#66)、 153(#99)、 204(#CC)、 255(#FF)
・6段階 … 6×6×6 = 216色

 

実習14 次のようなWebセーフカラーのサンプルページを作成する。
 HPBは「Web」のサイトを開いておくこと。
 ファイル名は「iro1.htm」とする。ページのタイトルは「Webセーフカラーのサンプル」とする。

 操作1 WebセーフカラーのWebページを作成する。<サンプル:iro1.htm>


Webセーフカラーのサンプル

FF0000
FF0033 FF3333 FF3300
FF0066 FF3366 FF6666 FF6633 FF6600
FF0099 FF3399 FF6699 FF9999 FF9966 FF9933 FF9900
FF00CC FF33CC FF66CC FF99CC FFCC99 FFCC66 FFCC33 FFCC00
FF00FF FF33FF FF66FF FF99FF FFCCCC FFFF99 FFFF66 FFFF33 FFFF00
CC00FF CC33FF CC66FF FFCCFF FFFFCC CCFF66 CCFF33 CCFF00
9900FF 9933FF CC99FF FFFFFF CCFF99 99FF33 99FF00
6600FF 9966FF CCCCFF CCFFCC 99FF66 66FF00
3300FF 6633FF 9999FF CCFFFF 99FF99 66FF33 33FF00
0000FF 3333FF 6666FF 99CCFF 99FFCC 66FF66 33FF33 00FF00
0033FF 3366FF 6699FF 99FFFF 66FF99 33FF66 00FF33
0066FF 3399FF 66CCFF 66FFCC 33FF99 00FF66
0099FF 33CCFF 66FFFF 33FFCC 00FF99
00CCFF 33FFFF 00FFCC
00FFFF


CC0000
CC0033 CC3333 CC3300
CC0066 CC3366 CC6666 CC6633 CC6600
CC0099 CC3399 CC6699 CC9966 CC9933 CC9900
CC00CC CC33CC CC66CC CC9999 CCCC66 CCCC33 CCCC00
9900CC 9933CC CC99CC CCCC99 99CC33 99CC00
6600CC 9966CC CCCCCC 99CC66 66CC00
3300CC 6633CC 9999CC 99CC99 66CC33 33CC00
0000CC 3333CC 6666CC 99CCCC 66CC66 33CC33 00CC00
0033CC 3366CC 6699CC 66CC99 33CC66 00CC33
0066CC 3399CC 66CCCC 33CC99 00CC66
0099CC 33CCCC 00CC99
00CCCC


990000
990033 993333 993300
990066 993366 996666 996633 996600
990099 993399 996699 999966 999933 999900
660099 663399 999999 669933 669900
330099 666699 669966 339900
000099 333399 669999 339933 009900
003399 336699 339966 009933
006699 339999 009966
009999


660000 330000
660033 663333 663300 330033 333333 333300
660066 663366 666666 666633 666600 000033 003300
330066 336600 003333
000066 333366 336666 336633 006600
003366 006633
006666 000000

・文字色の設定方法(<FONT>タグ)

(1) 色を変更したい文字をドラッグして選択する。メニューバーから次のように選択する。
[書式(O)] → [フォント(F)...]
(2) フォントのダイアログで色を選択、または、色の値を16進数(#xxxxxx)で入力して、[OK]ボタンをクリックする。

・セルの色の設定方法(スタイルシート)

(1) 色を変更したい文字のセル内で右クリックして、メニューから[属性の変更(A)...]を選択する。
(2)属性のダイアログの[セル]タブの右下にある[スタイル(S)...]ボタンをクリックする。
(3) スタイルの編集 ダイアログの右下にある[編集(4)]ボタンをクリックする。
(4) スタイルの設定 ダイアログの[カラーと背景]タブの上部にある前景色を設定する。
※ 表全体の文字色を変更する場合は、(2)で[表]タブを選択する。

 操作2 ファイル名を入力して保存する。Webブラウザで、ファイルiro1.htmを閲覧して確認する。

 操作3 サイト「Web」のWebページとして、リンクを設定する。
 これまでのサンプルページと同じように、トップページと相互のリンクを設定する。
 リンクポイントの文字は次の通りとする。

index.htm (トップページ)
@ 「表のサンプル1」の次の行に「Webセーフカラーのサンプル」と文字を入力する。
A 文字「Webセーフカラーのサンプル」をドラッグして選択して「iro1.htm」にリンクを設定し、上書き保存する。
iro1.htm
@ 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
A 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。

 操作4 Webブラウザの更新ボタンをクリックしてリンクを確認する。

 

20-6 有彩色と無彩色

 色には大きく分けて有彩色(ユウサイショク)と無彩色(ムサイショク)がある。
 有彩色は、三属性(色相、明度、彩度)のすべてをあわせ持つ色である。
 無彩色は、三属性のうち明度だけを持つ、白、グレー、黒色である。

20-7 色の三属性

 色の三属性とは、色相、明度、彩度の三つである。

色相
 赤、黄、緑、青の各色の系列の「色合い」のことである。虹は「赤 橙 黄 緑 青 紫」の6色が順に並んでおり、波長の長い順(屈折率の小さい順)になっている。この色を60度ずつに分割した円形で表したものを色相環(シキソウカン)という。
 日本で虹は、青と紫の間に藍が入り、「赤橙黄緑青藍紫」の7色とされている。
明度
 明度は色の「明るさ」のことである。明度が高い、低いという言い方をする。明度が最も高くなると白色、最も低くなると黒色に近づく。白黒写真はこの明度だけで表されたものである。
彩度
 彩度は色の「鮮やかさ」のことである。彩度が高い、低いという言い方をする。彩度が最も高い色を純色(ジュンショク)という。

 

実習15 色相、明度、彩度とWebセーフカラーの関係を調べる。

 操作1 ペイント(Windows付属)を起動した後、メニューバーから次のように選択し、色の編集のダイアログを開く。

[色(C)] → [色の編集(E)...]

 操作2 ダイアログの[色の作成(D)>>]ボタンをクリックする。
 ダイアログが大きくなり、右下に赤(R)、緑(G)、青(B)と色合い(E)、鮮やかさ(S)、明るさ(L)の入力欄が表示される(次図)。

色合い ⇒ 色相
鮮やかさ ⇒ 彩度
明るさ ⇒ 明度

 操作3 赤(R)に数値255(FF)を入力する。緑(G)と青(B)には0を入力する。[Enter]キーは押さないこと。
 赤色をベースカラーとして、明度とWebセーフカラーの関係を調べる。
 明度(明るさ)の数値だけを変更して、その時の赤、緑、青の値を記録する。

  ←明度が高い                       明度が低い→  
色合い 0 0 0 0 0 0 0 0 0 0 0 0 0  
鮮やかさ 240 240 240 240 240 240 240 240 240 240 240 240 240  
明るさ 240 220 200 180 160 140 120 100 80 60 40 20 0  
255 255 255 255 255 255 255 213 170 128 85 43 0
255 213 170 128 85 43 0 0 0 0 0 0 0
255 213 170 128 85 43 0 0 0 0 0 0 0
safe赤 255 255 255   255 255 255 204 153   102 51 0

safe緑 255 204 153   102 51 0 0 0   0 0 0
safe青 255 204 153   102 51 0 0 0   0 0 0
 Webセーフカラー : 0(#00)、51(#33)、102(#66)、153(#99)、204(#CC)、255(#FF)
 (表をドラッグすると値が見える。)

 操作4 赤(R)に数値255(FF)を入力する。[Enter]キーは押さないこと。
 赤色をベースカラーとして、彩度とWebセーフカラーの関係を調べる。
 彩度(鮮やかさ)の数値だけを変更して、その時の赤、緑、青の値を記録する。

  ←彩度が高い            彩度が低い→  
色合い 0 0 0 0 0 0 0  
鮮やかさ 240 200 160 120 80 40 0  
明るさ 120 120 120 120 120 120 120  
255 234 213 191 170 149 127
0 21 43 64 85 106 127
0 21 43 64 85 106 127
safe赤 255 255 204 204 153   153

safe緑 0 51 51 102 102   153
safe青 0 51 51 102 102   153
 Webセーフカラー : 0(#00)、51(#33)、102(#66)、153(#99)、204(#CC)、255(#FF)
 (表をドラッグすると値が見える。)

 

実習16 次のような色相・明度・彩度のサンプルページを作成する。
 HPBは「Web」のサイトを開いておくこと。
 ファイル名は「iro2.htm」とする。ページのタイトルは「色相・明度・彩度のサンプル」とする。

 操作1 色相・明度・彩度のWebページを作成する。


Webセーフカラーによる
色相環(本来は円で表す)

FF0000
FF0033 FF3300
FF0066 FF6600
FF0099 FF0000 FF9900
FF00CC FF0099 FF6600 FFCC00
FF00FF FF00FF FFCC00 FFFF00
CC00FF 9900FF FFFF00 CCFF00
9900FF 0000FF CCFF00 99FF00
6600FF 0066FF 66FF00 66FF00
3300FF 0099FF 00FF00 33FF00
0000FF 00FFFF 00FF99 00FF00
0033FF 00FF33
0066FF 00FF66
0099FF 00FF99
00CCFF 00FFCC
00FFFF

明度

FFFFFF FFCCCC FF9999 FF6666 FF3333 FF0000 CC0000 990000 660000 330000 000000
FFFFFF CCFFCC 99FF99 66FF66 33FF33 00FF00 00CC00 009900 006600 003300 000000
FFFFFF CCCCFF 9999FF 6666FF 3333FF 0000FF 0000CC 000099 000066 000033 000000
FFFFFF CCCCCC 999999 666666 333333 000000
←明度が高い 明度が低い→

彩度

FF0000 FF3333 CC3333 CC6666 996666 999999
00FF00 33FF33 33CC33 66CC66 669966 999999
0000FF 3333FF 3333CC 6666CC 666699 999999
→彩度が高い 彩度が低い→

 操作2 ファイル名を入力して保存する。Webブラウザで、ファイルiro2.htmを閲覧して確認する。

 操作3 サイト「Web」のWebページとして、リンクを設定する

index.htm (トップページ)
@ 「Webセーフカラーのサンプル」の次の行に「色相・明度・彩度のサンプル」と文字を入力する。
A 文字「色相・明度・彩度のサンプル」をドラッグして選択して「iro2.htm」にリンクを設定し、上書き保存する。
iro2.htm
@ 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
A 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。

 操作4 Webブラウザの更新ボタンをクリックしてリンクを確認する。

  戻る〔19.eコマース〕 次へ〔21.色彩(色のイメージと配色)〕 目次 ロゴ
 Web技術実習 Copyright © 2006,2007 Hiroshi Masuda  
inserted by FC2 system