小学美术色彩基本知识

網頁安全色彩（216色）
網頁的色彩標示採 “RRGGBB” 16進位 制，每色由 “00” （最暗）至 “FF” （最亮）
網頁的安全色彩為 R、G、B 值各為以下 6 種值之一：
– “00”、 “33”、 “66”、 “99”、 “CC”、 “FF”
– 共 6 × 6 × 6 ＝216
《參考》color.htm
57
C. 裝置
hfwang
色彩管理
色彩管理的緣起
別奢望你那便宜 的印表機印出來 的顏色，會和螢 幕上看的一樣了
– 儘量維持從輸入到輸出色彩之一致性
色彩不一致的原因
– 色域／色彩空間不一
– 設備呈色性質不一
– 設備元件良窳不一
hfwang
• 見 Photoshop 說明檔： 製作一致的顏色
58
注意：影像模式影響重大
。 可以在 ImageReady 中，以 Alpha 色版形式儲存、載入及刪除選取範圍
您可以建立特別色色版，用來指定以特別色油墨列印時的其他
印版。
看三次就看得懂的 真是天才…
Photoshop CS 說 明
11
hfwang
第一段 再看一次
色彩模式 (Mode)
色版是儲存不同類型資訊 的灰階影像： 灰階
(有時英文用字不太一樣) 19
hfwang
何謂 “數位影像處理”？
處理結果：改變像素的色彩值
– 色彩三要素 ： H色相、S彩度、 B明度
20
hfwang
改變像素的色彩值：明度
– 色彩三要素： H色相、S彩度、 B明度
原圖
B 明度 (Brightness)：很暗 ←→ 很亮
2008 年9月
21
改變像素的色彩值：彩度
練習：色彩三屬性
【問】灰階的圖含有色彩資訊嗎？
CS3
27
hfwang
色彩三屬性 -- 色相
色相環之一例
28
hfwang
色彩模型 之一例 -- 色立體
將色彩的三屬性，予以系統的排列，組成 一個三度空間的立體形狀色彩分類結構圖：
– 以明度為垂直軸，愈上方明度越高 – 以彩度為水平軸，愈接近明度軸彩度越低 – 色相環
– 同樣這個圖檔，你從這台CRT螢幕上看， 和拿到另ㄧ台液晶螢幕上看，色彩ㄧ樣嗎？
– …. ，色彩ㄧ樣嗎？
ㄧ樣嗎？
hfwang
為什麼不ㄧ樣？
不同種類的設備，有不同的 “色域” ！
55
色域 (gamut)
RGB
重要觀念
[]
hfwang
CMY Lab
有不
不同
同種
的類
色 域
的 設 備
！，
色光類的設備，為 RGB 色域
如為灰階, 有256 階變化
當您的眼睛 已分辨不出一階階時
連續色調
﹙和觀看距離之遠近有關﹚
39
hfwang
28=256
請複誦 三次！
40
hfwang
Photoshop CS 版 16 位元 (Bits/Channel)
28=256 216=65,536
CS3
232=65,536 x 65,536 =?
四色印刷
0% ~ 100%
– 100% 最濃 量化
減色法
– 越加越暗﹙黑﹚
三種色料都加到最濃時，黑色
9
hfwang
光與色彩
RGB
CMYK
hfwang
注意到沒？ 互為補色！ 10
色版 (Channel)
色版是儲存不同類型資訊的灰階影像：
當您開啟新的影像時，會自動建立色彩資訊色版 。影像的色 彩模式 (Mode)決定了建立的彩色色版數目。
36
hfwang
色彩深度 -- 1 位元 (bit) 21=2
黑白 2 色變化
雖然只有 2 色，竟然沒有想像中單調 也能有典雅的感覺…
37
hfwang
色彩深度 -- 2 位元 (bits)
22=4
黑灰白 4 階變化
色階還很明顯地不連續
38
hfwang
色彩深度 -- 8 位元 (bits)
28=256
– 眼睛的 桿狀細胞： 對光線的 明暗 有感應
– 眼睛的 錐狀細胞： 含有感受 紅、綠、藍 光三 原色的細胞 ﹙色盲？﹚
16
hfwang
光與色彩
一般人眼中的草莓 紅綠色盲者眼中的草莓
hfwang
你能拍出一部從色盲者眼中看世界的電影嗎？
17
色彩三屬性
hfwang
給我 3 MB 空間
那給我 4 MB…
13
光與色彩
光 的物理性質：
波長：
– 產生色相的區別 – 波長短的偏藍，波長長的偏紅
振幅：
– 產生明暗的區別 – 振幅大的偏亮，振幅小的偏暗
14
hfwang
【練習】光與色彩
【問】哪一個波的光較偏藍？哪一個較亮？
A B
15
hfwang
光與色彩
人類的視覺機能：
例： 1024 x 768 x 3 Bytes = 2.25 MB
那~ 一張 300 dpi 全開的研討會或電影海報呢？
請另參考【檔案大小的計算】
還真大…
45
hfwang
【問】這麼多色彩，該如何精確表達？
色名／色彩的表達
茶花紅
雞血石紅
海棠紅
猩猩紅
枸杞紅
曙色
滿江紅
芙蓉紅
潤紅
落霞紅
緋紅
朱紅
看了古時候這些色 名，你能想像那到
RGB
216 x 216 x 216 =…
= (224 x 224 ) = 16,777,216 x 16,777,216
(快算不出了…)
28=256 216=65,536 232=????
如果每個色版不只256 階，而是更細緻的 65,536 階呢？
44
hfwang
【問】不壓縮的點陣圖有多大？
長 x 寬 x 色彩深度
hfwang
低明度
高明度
24
色彩三屬性 -- 彩度
純色彩度最高，混色（不論白、灰、黑或 有彩色）越多越降低其彩度
hfwang
低彩度
高彩度
25
練習：色彩三屬性
【問】 以下哪一色的 明度 較高？ 哪一色的 彩度 較高？ A. 40% 純紅＋ 60% 白 B. 60% 純紅＋ 40% 黑
26
hfwang
53
hfwang
【練習】以16進位標示以下色彩
網頁的色彩標示採 “RRGGBB” 16進位制表示法 (0~F)
000000 666666 cccccc
FF0000 00FF00
FFFFFF
0000FF
54
hfwang
色域 (gamut)
– 你掃描後的圖片， 螢幕上的色彩，和原來的圖片ㄧ樣嗎？
– 你螢幕上的檔案， 列印出來後，色彩和螢幕上的ㄧ樣嗎？
29
hfwang
色彩種類
無彩色
– 黑、灰、白
有彩色
– 即色相上所列之色彩， 如紅、黃、藍等
獨立色
– 即印刷上所謂的「特別色」 如金、銀、螢光色等
30
hfwang
色彩三屬性
調來調去，都是在調這三屬性…
hfwang
尤其是明暗對比 (色階)！
就好像一白遮三醜， 明暗對比適當了， 影像品質也就差不
多了！
我有水彩 隨便我要調什
麼顏色！
34
一種色彩，各自表述？
數位影像中，如何量化色彩值？ (共識、通用語言)
35
《雲門舞集舞作》數位典藏計畫 .tw/
hfwang
色彩深度 (位元)
同樣長寬時, 在不壓縮情況下 檔案大小的比較, 就看位元的倍數…
hfwang
5
練習檔 (2)
0_cmy.psd
– 移動工具、選取圖層
0_rgb.psd
hfwang
6
光與色彩
1666年，牛頓以三稜鏡分解 太陽光，發現看似無色的光 線，經過三稜鏡時，會依其
波長和折射關係， 依序分
為紅、橙、黃、綠、藍、靛、 紫七色光
7
hfwang
光與色彩
色光三原色 RGB
– 紅 Red
色彩基本認識
大綱
色彩基本認識 數位影像 & 色彩深度
色彩的感覺與配色 色彩計畫
2
2008 年9月
色彩基本認識
3
先玩一下 4
hfwang
練習檔 (1)
1_cmy.psd
– 圖層面板 > 打開眼睛 – 色彩增值 multiply
1_RGB.psd
– 圖層面板 > 打開眼睛 – 濾色 screen
41
hfwang
【問】灰階與黑白ㄧ樣嗎？
42
hfwang
色彩深度 -- 24 位元 (bits)
RGB
28 x 28 x 28
=16,777,216
(1千6百多萬)
色光三原色 各用 256 階 表示其強度
大自然色彩遠超過這個，
不過在螢幕上，諒你的眼睛也沒厲害到都分辨的出來…
43
hfwang
【問】色彩深度 -- 16位元(bits)色版
– 綠 Green
– 藍 Blue
量化
0 ~ 255 (256 階)
– 0 最暗，255 最強(亮)
加色法
– 越加越亮﹙白﹚
三種色光都加到最強時，白色
8
hfwang
光與色彩
色料三原色 ( 印刷工業色 CMYK )
– 天青 Cyan
– 洋紅 Magenta
– 黃 Yellow
– 黑 Black
黑？？
– 例如， RGB 影像有四個預設色版：其中三個分別用於紅色、綠色和
藍色，再加上一個編輯影像的複合色版。
您可以建立 Alpha 色版，將選取範圍儲存為灰階影像。您可以使用
Alpha 色版建立和儲存遮色片，遮色片可以讓您處理、隔離和保護影像的特定部份。除了支援 Photoshop 中的 Alpha 色版外，您還
色料類 (要印出來的) 的設備，為 CMY 色域
Lab 被視為一種與裝置無關的色彩模型，包含所有
56
的可見色彩
色域 (gamut)
不同種類的設備，有不同的 “色域” ！
螢幕 掃描器 數位相機 印表機 印刷機 …
各種裝置和文件的色域範圍 A. Lab 色域 (整個可見光譜) B. 文件 (使用中色域)
我的 4 色
你的 4 色
但
，
同
(Windows Mac
樣
挑
四
個
顏和 色
，
我 挑 的 和 你 挑 的 未 必
的 色 盤 也 未 必 相 同
相
同
) …
51
hfwang
網頁安全色彩（216色）
全彩
大家都一樣從 這216種顏色
裡挑吧…
網頁安全色彩
既然每個人 挑的顏色都 不見得相同
hfwang
顏色少多了，而且色階明顯地不連續… 52
色相 Hue
– 色彩的相貌，不同的相貌各有其名稱
明度 Value 、Brightness
– 即色彩的明暗程度，光線反射率多時明度較 高
彩度 Chroma、Saturation
– 色彩的飽和程度或純粹度
(有時英文用字不太一樣) 18
hfwang
色彩三屬性
色相、明度、彩度三種不同的稱呼
– HVC：Hue、Value 、 Chroma – HSV：Hue、Saturation 、Value – HSL：Hue、Saturation 、 Lightness
底是什麼色嗎?
hfwang
46
【問】這麼多色彩，該如何精確表達？
幾種要的色彩值標示方式
H: 360度式
10 進位式： 0~255
百分比式
16 進位式：00~FF
47
hfwang
中場練習
顏色的設定
– Photoshop
48
hfwang
色彩深度 -- 索引色 index color
最多 256 色
31
日常照片的常見處理：調整明暗對比
雖然拍得不好 但萬一還是要用， 也可以處理看看喔！
明暗階調 真的很重要…
32
2008 年9月
練習：色彩三屬性
Photoshop → 影像→ 調整→ 色相／飽和度
33
hfwang
也就是說, 有展現多少色的能耐！
數位影像的色彩深度
我有 36 色的 雄獅蠟筆！
嗚~~ 我只有 12 色的…
影像模式
– RGB 、CMYK 、Lab 、… – 灰階、 雙色調、點陣
色彩調整
– 色相、 明度、彩度 、色階、 ….
牽涉到你有多少色
= 程度！
當您開啟新的影像時，會自
動建立色彩資訊色版 。影
像的色彩模式決定了建立的 彩色色版數目。
– 例如， RGB 影像有四個預設 色版：其中三個分別用於紅色、 綠色和藍色，再加上一個編輯 影像的複合色版。
hfwang
12
視窗 > 色版 (Channel)
RGB 模式時：3 色版
CMYK 模式時：4 色版
1 位元 黑 白 黑白 2 色變化 8 位元 灰 階 256 色灰階變化 16 位元 高 彩 65,536 種色彩變化 24 位元 全 彩 16,777,216 種色彩變化 ----------------------------------------------------------8 位元 索引色 最多 256 種變化
– 色彩三要素： H色相、S彩度、 B明度
原圖
S 飽和度：灰階←→鮮豔
2008 年9月
22
改變像素的色彩值：色相
– 色彩三要素： H色相、S彩度、 B明度
原圖
H 色相﹙Hue﹚
2008 年9月
好奇妙的色
相變化喔！
23
色彩三屬性 -- 明度
在無彩度中，明度最高是白色，最低是黑 色，其間為各種深淺的灰色
從 2 色到最多 256 色
網頁上常用的 GIF 檔 就是屬於這種。 因為顏色少，所以
檔案可以壓縮到很小。
49
hfwang
色彩深度 -- 索引色
16
hfwang
8 色 (14 K)
可
4 色 (10 K)
以
從
千
百
多
萬
色
中
，
任
意
挑
選
出
所
要
顏
顏色雖然少，但也許會有特別的風格喔…
色50
色彩深度 -- 索引色