網頁色彩學　　　　　　網頁色彩設計的準備

授課教師：吳有龍　教授

　主講人：資管碩二　　　　　　馮建堯　　　　　 9622021M

※ 　本投影片之資料僅為學術用途，請勿轉載，請尊重智財權　※

2/24

講解大綱 色彩整體概論

顏色如何構成 光源色與物體色 原色 色彩三屬性

色相模型與色彩混和原理 RGB 模型與加法原理 CMYK 模型與減法原理 常用色域空間

數位環境與色彩表現 數位色彩與解析度 數位色彩表現 數位色彩表現不同的因素

網頁 216 安全色的重要 何謂網頁安全色 Dithering 模擬 各種調色盤簡介

3/24

色彩整體概論　　　　顏色如何構成 1/2

構成顏色的三要素：光源、物體、人如

4/24

色彩整體概論　　　　顏色如何構成 2/2

人類肉眼可分辨出有色光的頻率如下圖

太陽光( 無色光 )

三稜鏡

牛頓在 1666 年以三稜鏡發現光線折射現象

5/24

色彩整體概論　　　　光源色與物體色

光源色：

　　自身可發出光線的光源，所產出的顏色即為光源色。

物體色：

　　自身不產生光源，但可反射某色波長，使肉眼所接收到的顏色。

6/24

色彩整體概論　　　　原色

原色：不能從其他基本顏色混和而得之色 光源三原色為：紅 、藍 、綠 物體三原色為：紅 ( 洋紅 ) 、藍 ( 青 ) 、黃

7/24

色彩整體概論　　　　色彩三屬性

構成色彩的三種屬性為 色相

　以散發出、反射出的光譜波長的主波長決定，　直接決定了顏色類型。

明度 ( 亮度 )　光源的明暗程度。

彩度 ( 飽和度 )　色彩的鮮豔度，越高越近純色。

8/24

色相模型與色彩混和原理 RGB 模型與加法原理

以 RGB 三種顏色混合而產生其他顏色

加法原理：將光源色光混合，重疊之處能量越高，顏色越亮白。

RGB 等量混合能量極高就會出現白色

紅 Red

藍 Blue 綠 Green

9/24

色相模型與色彩混和原理 CMYK 模型與減法原理

以 CMY 三色進行混合，調和物體色 出版成印刷品時需加入純黑色墨水 (K) 輔助 減法原理：將物體色混合，重疊之處會使光線

吸收量增加，明度降低。 洋紅(Magenta)紫紅

青(Cyan)

黃(Yellow)

將許多色料混合後，重疊之處將趨近於黑色( 但非純黑 )

10/24

色相模型與色彩混和原理 常用色域空間

1998 年 10 月，由 IEC( 國際電氣標準會議 )所策定之標準色域空間定義， sRGB 規格(standard RGB) 。

幾乎所有的數位影像輸出入都支援 sRGB 規格。

11/24

數位環境與色彩表現　　　數位色彩與解析度

數位色彩：將色彩以電子訊號記錄，然後利用　　周邊裝置使色彩重現，光源色、物體色特　　徵能共存。

數位影像：將影像座標化 ( 以像素為單位 ) ，在　　座標上還原數位色彩。

解析度：DPI ： Dots Per Inch ，一英吋長度內有多少像素。LPI ： Line Per Inch ，一英吋寬度內有多少像素。

12/24

數位環境與色彩表現　　　數位色彩表現

色彩深度 使用位元數 色彩表現

黑白 1 位元 黑白兩色

16 索引色 4 位元 最高 16 種變化 (24)

256 索引色 8 位元 最高 256 種變化

灰階 8 位元 256 種灰階頻色變化

高彩 16 位元 65,536 色

全彩 24 位元 16,777,216 色 (28X28X28)

(RGB 各用 8 個位元表示顏色 )

13/24

數位環境與色彩表現　　　數位色彩表現不同的因素

網頁上相同的顏色，可能隨著 顯示器 作業系統 電腦的等級 瀏覽器種類

　而有所顏色區別 ( 如右圖 ) 。

解決方法：使用網頁安全色。

14/24

網頁 216 安全色的重要　　　　　　何謂網頁安全色

網頁 216 安全色：在任何環境下所顯示的色彩　　必相同。

安全色的構成：由紅、藍、綠的數位訊號所構　　成，共有 210 種有彩色與 6 種無彩。

HEXA Code (16 位碼 )00 33 66 99 CC FF

DAC Count (RGB 訊碼 )0 51 102 153 204 255

　 R Ｘ G Ｘ B＝ 6 Ｘ 6 Ｘ 6 ＝ 216

15/24

網頁 216 安全色的重要　　　　　　 DITHERING 模擬

如果電腦無法產生所要求的顏色，電腦程式將自動混合不同的顏色，利用重複密集排列的方式，以產生相似的顏色。

使用網頁安全色的例子 以 dithering 方式模擬色彩的例子

16/24

網頁 216 安全色的重要　　　　各種調色盤簡介 1/6

為了幫助設計者容易選取適合的顏色，因此出現了不同樣式的調色盤

Lynda Weinmandr Browser-Safe Palette

17/24

網頁 216 安全色的重要　　　　各種調色盤簡介 2/6

18/24

網頁 216 安全色的重要　　　　各種調色盤簡介 3/6

19/24

網頁 216 安全色的重要　　　　各種調色盤簡介 4/6

20/24

網頁 216 安全色的重要　　　　各種調色盤簡介 5/6

21/24

網頁 216 安全色的重要　　　　各種調色盤簡介 6/6

22/24

補充資料

『國際色彩聯盟 - International Color Consortium 』 ( 簡稱 ICC) ，西元 1993 年創立的組織。其針對目前所使用的所有數位影像格式進行整合。以下為聯盟成員：Adobe Systems IncorporationAgfa-Gevaert N.V.Apple ComputerEastman Kodak CompanyMicrosoft CorporationSilicon Graphics Inc.Sun Microsystems, Inc.

ICC 的網址 http://www.color.org/index.xalter

23/24

參考書籍、文件與網頁網址

“WEB好色—網頁色彩學”， Image Research Institure Inc ，博碩。

“色彩理論與數位影像”，鄭柏左，新文京開發。 “新銳網頁色彩與版式搭配案例指南”，張楠溪，文魁資訊。 “顏色手冊及術語”，由 X-Rite編製的 PDF文件。 “色彩原理”，編者不明， PPT文件。 “影像的基本原理”，蔡政宗， PPT文件。 網頁資料：

http://www.ebaomonthly.com/window/photo/lesson/color_01.htm http://www.ctk.com.tw/JackWeb/graphic/Knowledge/

element_color.htm http://www.wretch.cc/blog/ayu6628/22281715

圖片來源： Google 圖片搜尋，以及以上資料部分擷取。

24/24

The EndThanks for your attendance