關閉導覽列 Close Menu
數位文創
English
吳統雄
數位美學
電子書
數位視覺
優化網站
微電影
數位文創管理
大學青年網誌
研究目錄
教學課程頁
討論區目錄
站務與協助
☰
│吳統雄
履歷 研究 教學 服務 榮譽
│社科
第1類知識 第2類知識 第3類知識 研究方法 統計分析 選舉預測 選民結構 人類取用行為 國際研究團隊
│資管
管理‧經濟 貨幣主義 數位貨幣 資訊系統開發 電子商務 網路教育 數位電視 產學合作 就業進修
│文創
數位美學導論 數位出版/電子書 視覺設計 優化網站 數位視訊/微電影 數位文創管理 大學青年雜誌
│電音
數位音樂作品選 被禁唱的民歌手 雄歌經典音樂廳 數位音樂教學 音樂知識美學 點歌與樂譜下載 我唱我歌專欄 歌曲評論專欄
│人文
公共評論 法律評論 社會評論 教育文化傳媒 科技科普評論 美語樂學 文學創作 萬象現代(NBA) 資訊社會 幽默人生
More
社群地圖 社群新聞
統雄樂水
數位色彩設計原理與分類

Digital Color Design Fundamentals
色彩原理‧原色分類 放射光原色‧反射光原色‧生心理原色

Digital Color Systems, Wheels and  Palette

數位調色制度‧數位色輪‧數位調色盤

Color Design is one of 4 Elements in Visual Design.

色彩設計是「視覺設計」4大建構元素之一。以下先介紹數位色彩原理,示範實作,包括色輪與數位調色盤的應用;再介紹數位配色方法一定成功的TX選色與四大配色定律。

人類接收色彩的途徑,傳統的分類有二:第一、放射光原色,包括自然光、電視、電腦螢幕等。第二、反射光原色,包括印刷品、塗料、染料等物質吸收自然光一部分色彩光源後,所餘反射回來的色彩。

而現代,又有了第三種以「生心理」分析,所定義的生心理原色。另外,還有非科學方法而得的經驗原色。

將原色調出各種色彩的數位調色有3種制度:RGB,  HSV, HSL。 而以上制度的應用,常以 Hex, 或 Html 的方式實現。  


放射光原色

R, G, B 光的三原色制

自然光有三原色(Primary Colors):紅、藍、綠,簡稱RGB。

三原色總加起來變成白色,因此,以三原色相加的配色法稱為「加色(additive)法」。

自然光的物理成因,是可見光的頻率與波長所形成以下的光譜:

spectrum

光譜是由牛頓所發現命名的,即大家熟悉的:紅橙黃綠藍靛紫。

但現代對光譜色彩的名稱則是:紅-橙-黃-綠-綠藍(cyan,或稱水藍(aqua))-藍-紫藍(violet),已取消「靛(indigo)」的名稱。

RGB RingRGB色彩空間,以立體的方式呈現調色盤。

同時,許多科學實驗發現,肉眼往往無法分辨藍和自然的紫藍,覺得紫藍只是比較深的藍,而合稱為「藍」。

在波長上,紅、綠、藍正好居於長、中、短的地位,就把它們三者,以鼎足而立的基礎,發展為一圈「色輪」(如左圖),橙黃可以由紅綠調出,而「綠藍」可由綠、與藍調出。

而在紅與藍之間的洋紅(magenta)與紫(purple),則是人為使用紅、藍2色所調出來的色彩,並不存在自然的光譜中。

許多軟體採用的數位調色盤,就是以16位元製表現三原色的深度,把RGB各分作256種層次,從而調出各種顏色。

其觀念即如左圖的 RGB色彩空間,以立體的方式呈現調色盤。

Hexadecimal Codes 16 位元 Hex 制

在電腦語言編碼上,以#加上16位元制的6位元組來表現,就是每位元的值由0至f,計16單位,而每2位元代表1原色,故每原色有16×16﹦256個層次。而以為順序,所以紅就是#ff0000,綠就是#00ff00,而藍就是#0000ff。

These are the codes that define colors. They are groups of three hexadecimal (base 16) numbers that are from 0 to 9 then a to f..

The first number is red, the second green, and the third blue. Each hexadecimal number is an RGB triplet. 00 is the lowest hue, and FF is the highest. For example, red is ff0000, blue is 0000ff, green is 00ff00, and purple is 990099.

For the grey scale, White is written #ffffff while Black is written #000000. A light grey can be #dddddd.

Comparison of hexadecimal codes and RGB numbers.Comparison of hexadecimal codes and RGB numbers.

HSV/HSB 色相、彩度、亮度制

Hue, Saturation, Value/ Hue, Saturation, Brightness

HSV而在電子技術應用上,則又發展了以色相(或譯飽和度)、彩度、亮度制的色輪。

色相(H)是色彩的基本屬性,就是平常所說的顏色名稱,如紅色、黃色等。
彩度(S)是指色彩的純度,越高色彩越純,低則逐漸變灰,取0-100%的數值。
亮度(V)英文為 Value,也有文獻稱 Brightness(B),取0-100%。

這種數位調色盤的優點,是有漸層式的視覺輔助,提供色彩選擇。

當前軟體,通常兩種數位調色盤都會提供。

HSV stands for hue, saturation, and value, and is also often called HSB (B for brightness).
HSV color spaces are based on the RGB color space, in which the twelve primary, secondary, and tertiary colors are spaced at 30 degree hue angles, corresponding to where one or two RGB coordinates is at the maximum (255), one or two is at the minimum (0), and in the case of the tertiary colors, one may be at half-scale (127). The saturation of these colors is at the maximum (1) in both HSL and HSV, and in HSV space the value is at maximum (1).
The six primary and secondary colors of this color wheel are named in the web colors and X11 colors. The additive primaries, red, green (web color lime), and blue, are the primary colors of this color wheel. The subtractive primaries, yellow, cyan (aqua), and magenta (fuchsia), are its secondary colors.

HSL 色相、彩度、光度制

Hue, Saturation, Lightness

HSL制,即色相、彩度、光度(Hue, Saturation, Lightness)。

HSL和HSV 都把顏色描述在圓柱坐標系內的點,這個圓柱的中心軸取值為自底部的黑色、到頂部的白色、而在它們中間的是灰色,繞這個軸的角度對應於「色相」。

二者的差別,在於「彩度」定義的不同,兩者的色彩空間如下。

HSL和HSV到這個軸的距離對應於「飽和度」,而沿著這個軸的高度對應於「亮度」、「色調」或「明度」。
HSV 是顏色的倒圓錐體,黑點在下頂點,白色在上底面圓心。
HSL 則表示了一個圓錐體,白色在上圓切面,黑色在下圓切面。

所以,在HSL中,純白色的彩度為0;而在HSL中,純白色的彩度為100。

老牌的繪圖軟體多使用 HSV 制,但在 CSS3 以 HSL 為標準後,預料將有更多軟體採用。

HSL和HSV的差別,在於色彩空間的不同。

以HSV/HSB為基礎的HTML 色輪

在當前網路設計,HTML語言所使用的色輪標準如下。

使用這種色輪,在網頁編碼時可以直接寫色彩的名稱,如 red,而不必寫代碼。

以HSB為基礎的HTML 色輪

HTML 色彩命名與原色組合表HTML 色彩命名與原色組合表


反射光原色

R, Y, B 以反射光三原色為基礎的色輪

人類對反射光的感受不同,在早期色彩教育、與繪畫觀念上,經常使用的是「紅黃藍(RYB)」三原色,理論上,此三原色總加起來變成黑色,因此,其配色法稱為「減色(subtractive)法」。

RYB色輪,分別表現三原色、第二級調色、與第三級調色。 

Primary Secondary Tertiary Colors

C, M, Y, K 現代印刷四原色

現代印刷隨著科技的進步,發現以調色,效果並不十分完美,逐漸發現了更佳的印刷三原色:水藍、洋紅、黃。此三原色才較易調出各種顏色,同時總加起來會變成黑色。但在實務應用上,通常不夠黑,而會加入第四色:黑色,簡稱印刷四原色 CMYK 制。

在印刷界,「彩通配色系統 PANTONE MATCHING SYSTEM, PMS)是制定和控制油墨色彩方面的權威性國際參照標準,以「色票」方式呈現,又分作4色比例,以及「特別色」:如加入金屬粉等。


生心理原色

Psychological Primaries 心理原色

生心理六原色生心理六原色/視神經相對處理(Opponent process)的色彩系統論

生理心理學發展後,與以上「物理取向」的分析不同,而發現視神經在相對處理時,有3組彼此互斥的顏色,故稱為生心理六原色。

所謂互斥,是指人類不會有「像綠色的紅色」「像藍色的黃色」的感覺。同時,也只會有白、灰、黑的區別,不會有「像白色的黑色」的視覺反映。

鴿子互補色實驗

生心理/視神經對色彩的認知,可由以下鴿子互補色實驗證明。

請盯著鴿子身上的黑點看30秒,再將眼睛移到白色的背景,會發現原來的紅色背景,會變成綠色,而不是物理上的水藍色。

鴿子互補色實驗

生心理色彩辨識

人類的生心理會影響對色彩辨識,和大腦的「色彩恆常性(color constancy)」機制有關,就是大腦中「自動白平衡」機制的結果,與數位相機的「白平衡」、或數位影象「後製的調光功能」相同,就是當物體受到外在光線影響時,可以讓照片的顏色看起來自然一些;但也有可能使人眼中的色彩,和真實物理色彩並不相同。

藍黑?白金?洋裝事件實例:藍黑?白金?洋裝事件與延伸討論

2015年,知名網站Tumblr上出現一則訊息:「大家幫幫我!這件洋裝到底是白色跟金色,還是藍色跟黑色?我跟我朋友吵了半天都無法同意,我們已經快被搞瘋了!」成為全球瘋點,而其答案,就與生心理色彩辨有關。

手術服顏色通識應用:手術服顏色

外科醫師與護士的手術衣與刷手衣,多集中於淺藍、綠色等,原因也是「互補」。當醫生在手術時,他們會專注地盯著血紅色的組織或器官,久之會產生看起來像綠色的困擾,而容易引起視覺疲勞。因此,採用淺藍色或綠色手術衣,就可以在環境中作色彩預防中和。而且,手術室的牆壁顏色,也大多是淺淡的藍或綠色,同樣是以互補色,緩解醫生視覺疲勞的目的。


經驗原色:五行、五色

統雄老師在學習過程中,也發現人類的許多傳統智慧,也是一種經由經驗累積,而形成的準科學知識。

中華傳統的「五行、五色」說,包括了生心理六原色的五色:,其實也就是反射光三原色再加上黑白2色。也反映人類對因反射光具備真覺性而較易被查覺,相對的,放射光須以分析方法才能被理解。

中華民國北洋時代的國旗五色旗五行、五色代表的意義如下:

水、黑色(代表潤下)

火、赤/紅色(代表炎上)

木、青/藍色(代表伸展)

金、白色(代表收斂)

土、黃色(代表中和) 

五行、五色在中華傳統智慧中,發展到醫學、玄學、宇宙、方位、眾多自然現象…與道德論述上,而五行乘上「陰陽」,就是10進位的由來。

中華民國北洋時代的國旗是五色旗,理由就是源於傳統五行學說、有五德「仁義禮智信」的教義,更代表漢、滿、蒙、回、藏五個民族而採用。

有趣的小歷史是,五色旗原來是滿清末年的海軍司令(提督)旗、海軍軍旗,中華民國成立後,臨時參議院延用五色旗為國旗,孫中山先生推薦的青天白日滿地紅旗,反而被作為海軍軍旗。一直到北伐成功後,青天白日滿地紅旗才再成為國旗。 


Palette Practice 數位調色盤習作

以Windows色盤為例,示範調色習作。

以上第一節,只是用二進位法表示第二節RGB分別的256(0+255)個數字,合計3組,故為16進位。

如果直接用程式寫網頁,必須使用16進位表示,但如果經由編輯軟體,就可以使用RGB數字調色。

由於自然光是「加色法」,亦即光愈多愈趨近白色,不同軟體的調色盤的原理一樣,但形式不同。以下以Windows色盤為例,示範調色習作。

選定一個顏色後,手動以比例調低其RGB值,其彩度(濃度)會提高,亮度會降低,而HSB值會自動變更。

印刷就是「減色法」註:相反的,印刷就是「減色法」,亦即顏色愈多愈趨近黑色。

如何調咖啡色如何調咖啡色?

咖啡色調色快訣:基本款:50% R + 25% G,或同比例。

加入 25% B 以下,可調整色調。

線上調色盤線上調色盤

這個線上調色盤可以同時練習RGB, HSV,與 HTML的調色效果,並可作2種顏色的漸層效果。


數位跨感官創作:聽見色彩‧看見聲音

色彩心理學 

TX選色與四大配色定律

數位繪圖/數位美工設計


Further Readings 延伸資訊

Primary and derived colors

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to next page

留言區因雲端系統重整,暫停開放。敬請以電子郵件留言。 同類別內相關主題

數位文創線上講義總目

數位文創目錄 數位美學‧數位文創導論目錄

Introduction to Digital Aesthetics and
Digital Contents/ Cultural Content Creation

數位文創目錄 數位文創製作管理目錄

Project Management in
Digital Contents/ Cultural Content Creation 

數位文創目錄 數位視覺設計‧影象處理目錄

Visual Design and Digital Imaging
Design and Production

數位文創目錄 數位出版(DTP)設計製作目錄

Digital Publishing/ Desktop Publishing
Design and Production

數位文創目錄 網路文創設計製作目錄

Web-based and Interactive Cultural Creation
Design and Production 

數位文創目錄 數位視訊設計製作目錄

Storyboard and Digital Video
Design and Production 

數位音樂特區 數位音樂特區目錄 TX Midi Zone

Listening Design and Digital Music
Design and Production 

數位文創目錄 數位文創設計製作習題

Exercises and Hand-on Works in
Digital Contents/ Cultural Content Creation 

數位文創目錄 數位文創庫存講義目錄

Achieved Readings and Deprecated Techniques

創用 CC 授權條款 此作品衍生自「統雄網路社群 TX Web Community」,由 吳統雄 Sean TX Wu 製作,以 創用CC 姓名標示-非商業性-相同方式分享 3.0 Unported 授權條款 釋出。此條款之授權同時適用於 https://seantxwu.pages.dev/ 下,與 http://tx.shu.edu.tw 下,除特別標明外之所有媒體形式著作物。
本網群為公益服務,瀏覽者須接受以下聲明方可瀏覽: 著作權聲明-Copyright © 吳統雄: 申請引用資訊- 免責聲明- 鳴謝:本網路社群之開發曾受國內外機構、包括臺灣大學補助。

Copyrights of TX Web Community This is a public service web community under a "Creative Commons" license. You must accept the following statements before entering: Copyright © Sean TX Wu, All Rights Reserved. Request for Citation, Disclaimer, and Acknowledgement.
內容網站:提供與分享各種知識、資訊、作品。互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。

吳統雄的音樂-Sean TX Wu's Music  笑話中學美語-Humor and American English Learning   私人來信-Write a private mail to Sean TX Wu  留言與討論 Leave Comments/ Forum 吳統雄的相簿-Sean TX Wu's Album

只在「統雄社群」內查詢以下主題 Search in TXCommunity

統雄網群的Google排行本站Google排行榜‧全球冠軍
取用模式研究國際團隊 Adoption Modeling International Research Team 合作群組取用模式
國際研究群
吳統雄的研究、教學、與作品 Sean TX Wu's Research, Teaching and Art Works 內容網站第3類知識
互動群組研究方法
內容網站數學樂學
內容網站美語樂學
內容網站人文社會
互動群組產學合作
資訊管理/資訊科技/資訊系統 Information Management/ Information technology/ Information Systems 合作群組資管教育
互動群組資訊管理
內容網站電子商務
內容網站網路教育
數位文創 Digital Cultural Content Creation 內容網站數位文創
合作群組大學青年
合作群組數位電視
互動群組美學實驗
數位音樂 Digital Music 內容網站數位音樂
內容網站社會參與
內容網站文學創作
投票行為、選舉預測與其他行為研究 Election Prediction and Other Behavioral Research 內容網站選舉行為
互動群組其他專題
第3類知識 The 3rd Knowledge 合作群組接龍實驗
互動群組招親實驗
互動群組公投實驗
互動群組量尺實驗
互動群組舞者實驗
年度20大點播音樂

偶然
金蟠桃
水調歌頭
請你,天明再離開我
點燭
別離
挖呀挖
稚情(嫦娥)
天亮歌
願意
墟
思念
華靈廟
Panda
團團和圓圓

相逢
媽媽的愛心
從此
笑笑歌
幕落(必然)
上山打野狼

研究與講義目錄

研究方法講義目錄
統計多變項分析講義
資訊管理講義目錄
數位文創/數位內容講義目錄
數位音樂講義目錄
產學合作-就業進修講義目錄
人文素養-人與社會講義目錄
人類行為+資訊管理研究目錄
網路使用/電子商務研究目錄
網路教育研究目錄
數位音樂作品目錄

在「瀏覽時間」前50%以內,剔除工具頁(如SharePoint應用)、簡介頁(如統雄曲目)、互動頁(如討論區)。粉底文章亦同屬年度20大瀏覽時間。

統雄-統計神掌 因素分析篇
性幻想行為簡說:格雷的五十道陰影
作業流程圖範例
UML
:統一塑模語言與流程圖

信度與效度分析
統雄-統計神掌 共變數分析篇
統雄-統計神掌 調節模型篇
統雄-統計神掌 多元迴歸篇
投考-甄試研究所之自傳秘笈
統雄-統計神掌簡單迴歸/相關分析
統雄-統計神掌 變異數分析篇
MIS:管理資訊系統
多氯聯苯大追兇
和聲與和弦進行設計
統雄-統計神掌SPSS篇
統雄-統計神掌中介模型分析篇
學術論文寫作法
統雄-統計神掌因素效度分析篇
研究所甄試之研究計畫秘笈
統雄-統計神掌多變項精華篇
問卷設計流程圖-範例
電子郵件亂碼的解決
統雄-統計神掌易筋經
定量方法對定性方法
統雄-統計神掌因徑/結構方程模型1
六藝:多元學習的詮釋與實踐
個案研究法/參與觀察法
文獻研究法
和聲與和弦分析
實驗法、準實驗法
歷史記錄

在「點閱數」前50%以內,剔除工具頁(如SharePoint應用)、簡介頁(如統雄曲目)、互動頁(如討論區)、與已經出現在同屬「年度20大點閱數」之頁。

網路使用行為研究方法
視訊後製作程序
爸爸
大學青年‧網路雜誌
網頁3大基本語言與編輯軟體
科學知識產生的程序
打二房別亂了套 
1篇30年後引起迴響的文章
向老大哥WGA說不! 
知識美學與數位美學 
我,被禁唱的民歌手
金蟠桃 第一幕 樂園
偶然、或然、必然 音樂劇4
接龍實驗-結果討論
MIS專案進度管理甘梯圖
知律,破律,又合於律
真實美語/生活英語選
當代流行歌 又吵又欠缺變化
職業化快閃影片創作品析
驗證式SEM解析篇-計畫行為論
歷史記錄

這裡有我在30餘年教學經驗中的學習與分享。

教改‧我先走了三十年教改‧我先走了三十年
教學的理念、實踐與感受教學的理念、實踐與感受
其實,每個人都可以唸臺大其實,每個人都可以唸臺大
2012總統選舉預測 2012總統選舉預測
大任務‧小使者大任務‧小使者
Fulbright Project Fulbright Project
統雄老師領導的美國喬治亞理工
Adoption Model國際研究群
Westgate FraudWestgate Fraud
e世代公共服務新聞宣言e世代公共服務新聞宣言
虛擬整合校園虛擬整合校園
請將連結不到網頁的網址,寄給統雄老師,謝謝!連結不到網頁

請按此,至友站列表。並歡迎同好加入友站。
回頁首 Up to page head