色彩基本認識 2006 年 10 月 Hsiu-fen Wang

大 綱 色彩基本認識 數位影像 & 色彩深度 色彩的感覺與配色 色 彩 計 畫

色彩基本認識

先玩一下

光與色彩 1666年，牛頓以三稜鏡分解太陽光，發現看似無色的光線，經過三稜鏡時，會依其波長和折射關係， 依序分為紅、橙、黃、綠、藍、靛、紫七色光

光與色彩 色光三原色 RGB 0 ~ 255 (256 階) 加色法 紅 Red 綠 Green 藍 Blue 0 最暗，255 最強(亮) 越加越亮﹙白﹚ 三種色光都加到最強時，白色

光與色彩 色料三原色 ( 印刷工業色 CMYK ) 0% ~ 100% 減色法 天青 Cyan 洋紅 Magenta 黃 Yellow 黑　 Black 0% ~ 100% 100% 最濃 減色法 越加越暗﹙黑﹚ 三種色料都加到最濃時，黑色

光與色彩 RGB CMYK 注意到沒？ 互為補色！

光與色彩 光 的物理性質： 波長： 產生色相的區別 波長短的偏藍，波長長的偏紅 振幅： 產生明暗的區別 振幅大的偏亮，振幅小的偏暗

【練習】光與色彩 【問】哪一個波的光較偏藍？哪一個較亮？ A B

光與色彩 人類的視覺機能： 眼睛的 桿狀細胞： 對光線的 明暗 有感應 眼睛的 錐狀細胞： 含有感受 紅、綠、藍 光三原色的細胞 ﹙色盲？﹚

光與色彩 http://www.vischeck.com 一般人眼中的草莓 紅綠色盲者眼中的草莓

色彩三屬性 色相 Hue 明度 Value 、Brightness 彩度 Chroma、Saturation 色彩的相貌，不同的相貌各有其名稱 明度 Value 、Brightness 即色彩的明暗程度，光線反射率多時明度較高 彩度 Chroma、Saturation 色彩的飽和程度或純粹度 (有時英文用字不太一樣)

色彩三屬性 色相、明度、彩度三種不同的稱呼 HVC：Hue、Value 、 Chroma HSV：Hue、Saturation 、Value HSL：Hue、Saturation 、 Lightness (有時英文用字不太一樣)

何謂 “數位影像處理”？ 處理結果：改變像素的色彩值 色彩三要素 ： H色相、S彩度、 B明度

B 明度 (Brightness)：很暗 ←→ 很亮 改變像素的色彩值：明度 色彩三要素： H色相、S彩度、 B明度 原圖 B 明度 (Brightness)：很暗 ←→ 很亮

改變像素的色彩值：彩度 色彩三要素： H色相、S彩度、 B明度 原圖 S 飽和度：灰階←→鮮豔

改變像素的色彩值：色相 色彩三要素： H色相、S彩度、 B明度 原圖 H 色相﹙Hue﹚ 好奇妙的色相變化喔！

色彩三屬性 -- 明度 在無彩度中，明度最高是白色，最低是黑色，其間為各種深淺的灰色 低明度 高明度

色彩三屬性 -- 彩度 純色彩度最高，混色（不論白、灰、黑或有彩色）越多越降低其彩度 低彩度 高彩度

練習：色彩三屬性 【問】 以下哪一色的 明度 較高？ 哪一色的 彩度 較高？ A. 40% 純紅＋ 60% 白 　　　B. 60% 純紅＋ 40% 黑

練習：色彩三屬性 【問】灰階的圖含有色彩資訊嗎？

色彩三屬性 -- 色相 色相環之一例

色彩模型 之一例 -- 色立體 將色彩的三屬性，予以系統的排列，組成一個三度空間的立體形狀色彩分類結構圖： 以明度為垂直軸，愈上方明度越高 以彩度為水平軸，愈接近明度軸彩度越低 色相環

色彩種類 無彩色 黑、灰、白 有彩色 即色相上所列之色彩， 如紅、黃、藍等 獨立色 即印刷上所謂的「特別色」 如金、銀、螢光色等

就好像一白遮三醜，明暗對比適當了，影像品質也就差不多了！ 色彩三屬性 調來調去，都是在調這三屬性… 尤其是明暗對比 (色階)！ 就好像一白遮三醜，明暗對比適當了，影像品質也就差不多了！

日常照片的常見處理：調整明暗對比 雖然拍得不好 但萬一還是要用， 也可以處理看看喔！

練習：色彩三屬性 Photoshop → 影像→ 調整→ 色相／飽和度

數位影像的色彩深度 也就是說, 有展現多少色的能耐！ 我有 36 色的 雄獅蠟筆！ 嗚~~ 我只有 12 色的… 我有水彩 隨便我要調什麼顏色！

色彩深度 (位元) 1 位元 黑 白 黑白 2 色變化 8 位元 灰 階 256 色灰階變化 16 位元 高 彩 65,536 種色彩變化 同樣長寬時, 在不壓縮情況下 檔案大小的比較, 就看位元的倍數… 1 位元 黑　白 黑白 2 色變化 8 位元 灰　階 256 色灰階變化 16 位元 高　彩 65,536 種色彩變化 24 位元 全　彩 16,777,216 種色彩變化 ----------------------------------------------------------- 8 位元 索引色 最多 256 種變化

雖然只有 2 色，竟然沒有想像中單調 也能有典雅的感覺… 色彩深度 -- 1 位元 (bit) 21=2 黑白 2 色變化 雖然只有 2 色，竟然沒有想像中單調 也能有典雅的感覺…

色彩深度 -- 2 位元 (bits) 22=4 黑灰白 4 階變化 色階還很明顯地不連續

色彩深度 -- 8 位元 (bits) 28=256 如為灰階, 有256 階變化 連續色調 當您的眼睛 已分辨不出一階階時 ﹙和觀看距離之遠近有關﹚

【問】灰階與黑白ㄧ樣嗎？

色彩深度 -- 24 位元 (bits) 28 x 28 x 28 =16,777,216 (1千6百多萬) R G B 色光三原色 各用 256 階 表示其強度 大自然色彩遠超過這個， 不過在螢幕上，諒你的眼睛也沒厲害到都分辨的出來…

216 x 216 x 216 = … (快算不出了…) 【問】色彩深度 -- 16位元(bits)色版 28=256 216=65,536 R　　G　　B 216 x 216 x 216 = … = (224 x 224 ) (快算不出了…) 如果每個色版不只256階，而是更細緻的65,536 階呢？

【問】不壓縮的點陣圖有多大？ 長 x 寬 x 色彩深度 請另參考【檔案大小的計算】 例： 1024 x 768 x 3 Bytes = 2.25 MB 那~ 　一張海報呢？ 請另參考【檔案大小的計算】 還真大…

看了古時候這些色名，你能想像那到底是什麼色嗎? 【問】這麼多色彩，該如何精確表達？ 色名／色彩的表達 茶花紅 海棠紅 枸杞紅 滿江紅 潤紅 緋紅 雞血石紅 猩猩紅 曙色 芙蓉紅 落霞紅 朱紅 看了古時候這些色名，你能想像那到底是什麼色嗎?

【問】這麼多色彩，該如何精確表達？ 幾種主要的色彩值標示方式 10 進位式： 0~255 百分比式 16 進位式：00~FF H: 360度式 10 進位式： 0~255 百分比式 16 進位式：00~FF

中場練習 顏色的設定 Photoshop

色彩深度 -- 索引色 index color 最多 256 色 從 2 色到最多 256 色 網頁上常用的 GIF 檔 就是屬於這種。 因為顏色少，所以 檔案可以壓縮到很小。

色彩深度 -- 索引色 8 色 (14 K) 4 色 (10 K) 顏色雖然少，但也許會有特別的風格喔… 可以從1千6百多萬色中，任意挑選出所要顏色 8 色 (14 K) 4 色 (10 K) 顏色雖然少，但也許會有特別的風格喔…

色彩深度 -- 索引色 我的 4 色 你的 4 色 但，同樣挑四個顏色，我挑的和你挑的未必相同… (Windows 和 Mac 的色盤也未必相同) 我的 4 色 你的 4 色

網頁安全色彩（216色） 全彩 網頁安全色彩 既然每個人挑的顏色都不見得相同 顏色少多了，而且色階明顯地不連續… 大家都一樣從這216種顏色裡挑吧… 網頁安全色彩 既然每個人挑的顏色都不見得相同 顏色少多了，而且色階明顯地不連續…

網頁安全色彩（216色） 網頁的色彩標示採 “RRGGBB” 16進位制，每色由 “00” （最暗）至 “FF” （最亮） 網頁的安全色彩為 R、G、B 值各為以下6 種值之一： “00”、 “33”、 “66”、 “99”、 “CC”、 “FF” 共 6 × 6 × 6 ＝216 《參考》color.htm

【練習】以16進位標示以下色彩 000000 FF0000 666666 00FF00 cccccc FFFFFF 0000FF 網頁的色彩標示採 “RRGGBB” 16進位制表示法 (0~F) 000000 FF0000 666666 00FF00 cccccc FFFFFF 0000FF

色域 (gamut) 不同種類的設備，有不同的 “色域” ！ 你掃描後的圖片， 螢幕上的色彩，和原來的圖片ㄧ樣嗎？ 你掃描後的圖片， 螢幕上的色彩，和原來的圖片ㄧ樣嗎？ 你螢幕上的檔案， 列印出來後，色彩和螢幕上的ㄧ樣嗎？ 同樣這個圖檔，你從這台CRT螢幕上看， 和拿到另ㄧ台液晶螢幕上看，色彩ㄧ樣嗎？ …. ，色彩ㄧ樣嗎？ 為什麼不ㄧ樣？ 不同種類的設備，有不同的 “色域” ！

色域 (gamut) 不同種類的設備， 有不同的 [色域] ！ RGB CMY Lab 重要觀念 色光類的設備，為 RGB 色域

色域 (gamut) 螢幕 掃描器 數位相機 印表機 印刷機 … 不同種類的設備，有不同的 “色域” ！ 各種裝置和文件的色域範圍 A. Lab 色域 (整個可見光譜) B. 文件 (使用中色域) C. 裝置

別奢望你那便宜的印表機印出來的顏色，會和螢幕上看的一樣了 色彩管理 別奢望你那便宜的印表機印出來的顏色，會和螢幕上看的一樣了 色彩管理的緣起 儘量維持從輸入到輸出色彩之一致性 色彩不一致的原因 色域／色彩空間不一 設備呈色性質不一 設備元件良窳不一 見 Photoshop 說明檔： 製作一致的顏色

注意：影像模式影響重大 影像模式 色彩調整 RGB 、CMYK 、Lab 、… 灰階、 雙色調、點陣 色相、 明度、彩度 、色階、 …. 牽涉到你有多少色可使用，以及能用哪些色彩…

注意：逝者難追 捨棄的資訊、細節再也回不來 例：彩色 → 灰階or黑白 → 彩色 RGB → 索引色 → RGB 　RGB → CMYK → RGB

檔案格式大車拼 存成什麼 格式好呢 … 我! 我! 我啦! 選我!

三大網頁圖檔格式的火拼 JPG GIF PNG 既然不壓縮的檔很大，那就壓縮吧 …

你的圖檔性質是… 照片 美工(卡通)圖案 通常是 JPG 檔 通常是 GIF 檔 全彩 (色調連續, 膚色自然) 最多256 色 (色塊明顯)

三大網頁圖檔格式 GIF 圖形交替格式(Graphics Interchange Format) 是全球資訊網和其他線上服務上，在超文字標記語言 (HTML) 文件中顯示索引色圖像和影像常用的檔案格式。 GIF 是一種 LZW 壓縮的格式，可以最小化檔案大小和電子傳輸的時間。 GIF 格式可以保留索引色影像中的透明，但卻不能支援 Alpha 色版。 本段直接摘自 Photoshop 7 說明

三大網頁圖檔格式 JPEG 靜態影像壓縮標準 (Joint Photographic Experts Group) 是全球資訊網和其他線上服務上，在超文字標記語言 (HTML) 文件中顯示照片和其他連續色調影像常用的格式。BMP 格式支援「CMYK」、「RGB」和「灰階」色彩模式，且不支援 Alpha 色版。 與 GIF 格式不同的是，JPEG 會保留 RGB 影像中所有的顏色資訊，但會選擇性地放棄資料以壓縮檔案大小。 JPEG 影像會在開啟時自動地解除壓縮。較高的壓縮層級會導致影像的品質較低，而較低的壓縮層級會導致影像品質較佳。 在多數的情況下，「最大」的品質選項製造的結果，與原始影像幾乎沒有差別。 本段直接摘自 Photoshop 7 說明

三大網頁圖檔格式 PNG 可攜式網路圖案 (Portable Network Graphics) 是研發出來的另一種無專利的格式 (除 GIF 外的另一種格式)，可以用來進行無減色壓縮和在全球資訊網上顯示影像。 與 GIF 不同的是：PNG 支援 24 位元影像，並且可以製造沒有鋸齒邊緣的背景透明。 但是，有些網頁瀏覽器不支援 PNG 影像。 PNG 格式支援沒有 Alpha 色版的「RGB」、「索引色」、「灰階」和「點陣圖」模式影像。PNG 可以保留灰階和 RGB 影像中的透明。 本段直接摘自 Photoshop 7 說明

色彩的感覺與配色

民俗的色彩 中國 宮廟：紅牆綠瓦 民間：白牆黑瓦 埃及 阿拉伯 ….

畫家的色盤 左拉 馬諦思 畢卡索 印象派、點描派 透過加法混色來達成視覺混合的效果 野獸派 強烈的色彩【例】紅色的臉，綠色的暗部 藍色時期、粉紅色時期、 …

http://webexhibits.org/ colorart/picasso.html 滑過去看看，不同色彩各是什麼感覺？ 畫家的色盤 -- 畢卡索 http://webexhibits.org/ colorart/picasso.html

色彩調和 對比色系　　　　　　補色系

色彩調和 單一色相　　同色系　　 類似色系                        

色彩調和 多色相 　　　三色調和　　　　　　四色調和

色彩調和 -- 對比 vs 類似 圖片來源：照相館的故事

色彩調和-- 對比 vs 類似 By 游閔州

色彩感覺 暖／寒 興奮／沉靜 前進／後退 輕／重 強／弱 Dior

【練習】色彩搭配 -- 填色遊戲 練習：color_task

色彩計畫

何謂色彩計畫？ 將對色彩的知識與配色技巧，應用到實際的設計工作上 目的：美化生活、產品行銷 色彩密碼 --專業設計的色彩美學 Color Combination 作者：I.R.I http://www.iridesign.co.kr 碁峰

偏好色調查 【問】一般人什麼用品喜歡買什麼顏色？ 手錶? 手機? 汽車? 彩妝品? 馬桶? …

產品的色系                 

產品的色系

產品的色系

？ 練習：產品的色彩名稱 【練習】 以下哪個敘述，最吸引你？ 你可以根據這些名稱，想像出它的顏色嗎？ 巧克力蛋白杏仁色 咖啡蜂蜜色 霜白咖啡色 龍舌蘭日出色 東方色 泡泡糖色 西瓜色 天使粉紅色 黃金寶貝色 ？ 資料來源：化妝品型錄

練習：為產品的色彩命名 【練習】找到目前市面上同一款產品系列， 　　　重新想出ㄧ組誘人的色彩名稱

練習：產品的色系 【練習】請為一組 T 恤產品配色…

【進階參考】 http://webexhibits.org http://www.vischeck.com The Color Mac Miller & Zaucha ﹝Hayden Books，1995 ~﹞ 設計的色彩心理 賴瓊琦 ﹝視傳文化，2001﹞ 數位影像色彩管理 徐法坤 著﹝龍溪圖書，1999年7月﹞ 色彩 王荔 譯﹝三民，89年2月﹞