Web設計所需顏色的概念可大致分為三種。一是根據Johannes Itten(1888 ~ 1968)提出的色彩學來理解色彩的性質。色彩學談的是相異顏色間調和的情形，以及顏色面積會影響看起來的感覺等現象。不管是影像處理、編修或從事繪畫等和顏色相關的人，至今都很重視其中的理論，可說是設計的基本概念。不過，色彩學的內容只針對印刷顏色、油墨、畫具顏色。像Web這樣顯示在顯示器上的作品，還需要了解顏色在顯示器或電腦上會如何呈現相同顏色這樣的媒體特性才行。
不可不知的色彩顯示媒體特性
媒體特色與顏色，是第二個必備的概念。顯示器是以讓紅、綠、藍三種光線的點出現不同強弱的光來呈現顏色的媒體。這和雜誌或海報這種經由油墨或塗料反射光的機制完全不同。因此，了解「光的顏色」到了人的眼睛會變成什麼就變得很重要了。此外，除了顯示器、電腦、瀏覽器、與影像編輯軟體等對顏色的解釋方式，也會影響顏色呈現出來的效果。再補充一點，網頁安全色(Web Safe Color)也算是顯示媒體特性的一種。
顏色也會影響操作性
第三個要了解的概念是，將Web網站做為提供資訊或服務的介面時，所需了解之「操作與顏色之間的關係」。我們以車站等公共場所中，讓人群移動更順暢的標誌系統為例，一個空間當中，標示為廁所或出口等的標誌都使用相同顏色。走到一半顏色突然改變的話，看的人很快就會找不到目標。
顏色也是一種符號，可用來突顯畫面上最重要的資訊。此外，還可讓使用者了解操作順序、優先順序或操作後的處理狀況等。也就是說，顏色的使用會大大改變Web使用的便利性。
了解色彩表現的限制和特性，適當使用顏色。
網頁安全色(Web Safe Color)是指相異瀏覽器均可呈現的216個顏色。這是考量到要讓使用者在不同的操作環境下得到一樣的資訊，所以在顏色上也訂好標準以防問題發生。網頁安全色是為了顏色重現性低的操作環境而設計的，但由於現在使用者的配備環境都明顯提升了，所以無需考慮那麼多，但大部份的製作工具還是備有類似的配色功能。
Flash與顏色
Flash和JPEG同樣可呈現24位元的色彩效果。而透明或漸層效果必需要在24位元色彩中才得以呈現。由於Flash的色彩引擎使用了獨家技術，所以不論使用哪種瀏覽器，都能保證一定的品質。因此，如果我們希望網頁有好的功能或效果，或希望要有好的色彩表現，都可以選擇使用Flash。
Design Samples
http://www.dexigner.com/
DEXIGNER Design Portal
關鍵顏色使用7色色環。可閱讀的部分採用較低的彩度，對眼睛較無負擔。
http://www.cmykmag.com/site.cfm?CFID=540993&CFTOKEN=34835363
CMYK Magazine
呈現印刷的CMYK基本顏色。在顯示器上看的話，CMYK是相當醒目的顏色。
色票提供更多配色方法
色票是由油墨製作公司或顏色研究單位製作用來展現顏色效果的道具。主要用途是讓使用者看看在電腦上設定的顏色到印刷時會呈現出什麼感覺。粉彩的high tone、固體、金屬等顏色、以及各國傳統的顏色也都包含在其中。顏色可以有無限的組合，對經驗不足的人來說，要從零開始找到適合使用的顏色很困難。現在有了可以確認Web用色的色票做參考，讓佩色、用色更方便。
關於設定顏色的幾個方法
在製作影像或網頁的工具中，一般主要都是使用RGB(color slider)來設定顏色。只要用光的三原色紅、藍、綠的色域各自調和即可。對於了解RGB特性的使用者可能很好用，但是只要各設定值一變，顏色就會大不相同，不易尋找搭配的顏色。要搭配顏色，最好使用可在同一色相調整亮度與彩度的HSB(HSL)。依據不同使用目的，使用不同的選色方法，設計出來的效果也會有所不同。
Design Samples
http://www.also-online.com/
ALSO Online
使用色票中冷色系設計而成的網站。
了解顏色就會知道如何恰當用色
顯示器看到的Web網站基本上是光的三原色(RGB)。這個三原色可以呈現出光的波長所含的12個主要的顏色。由紅到紫的12色所組成的圓就稱為「色相環」。R(紅)和G(綠)混合就會成為中間色黃色(二次色)，黃色再和紅色相混，就會形成中間的橘色(三次色)，色相環有著這樣的三色關係。而兩個相鄰的顏色有著類似自然界顏色那樣調和關係的，則稱為類似色。補色則是指位於色相環斜對角上，對比最強的顏色。「三角形配色」意指色相環上，構成三角形的顏色關係，是種很有色彩張力效果的顏色搭配。這個色相環產生的三相就是配色的基礎。
Johannes Itten
Johannes Itten是瑞士的造型專家，德國包浩斯(Bauhaus)藝術造型學院早期的院長，他因將顏色置換成12環的圖，讓色彩學自成一家而聲名大噪。他提出顏色有互補關係，且配色會因不同亮度或彩度，而給人不同印象之顏色性質理論，讓原本以繪畫為主的色彩探求領域也延伸到家具或建築等所有的商品上。至今對於利用顏色提高商品價值的現代產品設計仍有很大的影響。
Design Samples
http://www.r-sumai.jp/
R-System株式會社
將相同色相、不同色調的顏色一起搭配使用的例子。
http://www.ebis.ne.jp/
廣告效果測試系統「AD EBIS」
明度低的幾個不同色相的顏色，以灰色來做整合。
不同配色方式，呈現出不同的顏色印象與效果
顏色給人的印象，會隨使用者操作環境或使用方法等條件而異。就像我們可能認為同個顏色、不同色調應該很好搭配才是，但也會因使用方法不對，而出現跌破眼鏡的效果。沒有實際用用看，是很難掌握會呈現什麼顏色效果的。配色之所以比想像中還難掌握，就是因為不了解顏色的特性與本質所致。本章介紹的顏色對比性質，是根據印刷品或圖畫等情況提出的見解，但以光來顯示顏色的Web媒體上同樣也適用。
Point1：一樣是橘色，背景為紅色時，橘色就會看起來比較黃；以黃色為背景時，橘色看起來就會比較紅。這是因為中心顏色受背景顏色影響之心理補色之故。所謂心理補色是指一直看著相同顏色時，眼睛就會自然看到互補色。紅色的互補色是綠色而言，綠色就會加在橘色上而看起來比較黃。就算是相同顏色，也會因為背景色之不同，給人的印象也會有所不同。
Point2：受到背景色等周圍附近鮮豔顏色的影響，顏色會看起來比實際顏色還暗；被較暗的顏色包圍時，顏色就會看起來很鮮豔。
Point3：本例為顏色的對比。被暗的顏色包圍時，顏色看起來比較亮；被亮的顏色包圍時，顏色看起來比較暗。背景為黑色的網頁上，淡灰色的文字看起來不容易閱覽，背景為白色時，由於看起來比實際還暗，因此看起來很清楚，也很輕鬆。當顏色為彩色時也是一樣的情況。
面積對比：面積不同，看起來感覺也不同
即使是相同顏色，面積大看起來就比較亮，面積小看起來就比較暗(明度變低)。在處理Web網頁中背景色這樣大範圍的用色時，如不降低彩度，就會看起來比想像中還亮。另外，文字等小範圍內使用的顏色即使很鮮豔，也會因為面積小而看起來沒那麼亮。
膨脹：讓面積看起來會變大的顏色搭配
明亮的暖色系，尤其是對比色強的配色會讓面積看起來比較大。中間為橘色的圖對比較強，看起來會比藍色的圖還要大。有時設計還會因配色效果的關係，而需要再稍微調整大小。尤其是文字大小也會因標題和背景色的關係，而看起來不一樣。
冷色系和暖色系
暖色的圖形看起來比冷色的圖形還要近。從這個特性我們可以想到，只用暖色系的配色架構會對使用者造成壓迫感。因此在想要呈現畫面深度時，也可以使用暖色系的顏色。
彩度和明度的不同
彩度和明度都被視為是「顏色的亮度」，所以兩者很容易搞混。明度高的顏色對光的反射率也高。明亮的顏色反射率大，暗的顏色反射率小。明度高的顏色在畫面上只是看起來比較突出而已。另一方面，彩度高的顏色會吸引收掉所有其他成分，只反射自己的顏色，彩度低的顏色則會讓周圍的顏色進行反射(襯托其他顏色)。也就是說，彩度高的顏色彼此之間不容易取得平衡，彩度低的顏色則會影響配色時的銳利度。
Design Samples
http://adam1.szinhaz.org/
Adam1
明度和彩度都低，配色很容易。攝影作品集等就很適合使用此種方式。
http://www.jrobertscott.com/
J. Robert Schott
背景、文字、網站LOGO都統一為無色彩。無色彩當中黑色是最強烈的顏色。
聰明用色，讓影像和文字資訊更清晰
藍色或綠色等冷色系可以用來呈現畫面深度，而紅色或橘色等暖色系則適合用於平面的表現。尤其是藍色和紅色的對比，可以強調出深淺遠近的感覺。在藍色背景上加上紅色的影像就會產生心理補色，而讓紅色的周圍看起來好像灰色，這種圖形配色的架構相當有名。此外，如果一張照片想要讓人感覺到深淺遠近的效果時，可以加上藍色漸層的模式來強調立體感，這也是一種方法。
色彩給人的印象
藍色代表信賴感、綠色代表安全感、紫色代表很有靈性…，顏色給人的印象各不相同。現在坊間有很多教人以想要的印象為關鍵字，進行配色的書籍，您不妨將這些書當成決定設計方向的指導手冊。然而「水能載舟，亦能覆舟」，這樣既有的色彩印像有可能成為瞬間縮小配色可能性的兩面刃。執色彩理論牛耳的Johannes Itten就警告說，用色過度制式化，可能會抹煞顏色的本質。
Design Samples
http://www.infusion.com/
infusion
背景為冷色系，內容部分看起來好像往前突出。
將關鍵字轉換為顏色的秘訣
在流行時尚業界，像「清爽」這類抽象關鍵字可搭配的具體顏色其實都是規範好了的。尤其是一年春、夏、秋、冬的流行顏色，都是由1963年成立的國際流行色委員會，每兩年召開一次的會議中由各國協調決定的。日本流行色協會亦為該會議之一員，會配合國內民情或過去發生的情況等提出日本自己的流行色。各單位所訂的流行色，會左右該年關鍵字所引導出的顏色印象。不過一般而言，顏色會分為三群，冷色系代表冷酷、冷靜，暖色系代表溫暖、充滿活力，中性色系代表中性、少有主張的，這些都是既定的、自然感受到的印象。
Point1：彩度低的冷色系是一般商務網站慣用的配色。因為主動提供參考的內容很多，因此適合讓人沉靜下來，或感覺有深度的冷色系。另外，低彩度也有助於烘扥其他顏色，每天都更新照片或影像的新聞網站等亦適用。
Point2：用色以清爽、彩度高的配色為主，搭配上以白色為基調的底色，這樣的設計很適合國家行政單位、各縣市政府網站之用。彩度高又鮮豔的顏色可以給人容易親近、產品容易使用的感覺，而這個概念一樣也適用於公家機構。要注意的重點是，顏色不要用太多種，選出要用的幾種就好了。
Point3：Outdoor & fishing Nature(自然、運動類) http://www.naturum.co.jp/
本例是以天空、海、山等自然界的顏色來展現自然或運動等主題。另外也可加上充滿活力的暖色系，以呈現戶外的感覺。大地的綠色在螢幕上看起來會太刺眼，因此要記得，如果用色面積大時，要儘量壓低彩度。
花蕊、嫩芽、可愛
時尚的領域流行表示花蕊、嫩芽概念的顏色。以明度不同的粉紅色為主的顏色，和淡灰色或綠色等重點顏色很搭。商品設計業界的表現主要是以呈現膚色為主，但由於Web上較難呈現這樣的效果，因此改用能穩定顯示的粉紅色，就比較沒有問題。
高齡者、生活
以綠色或象牙色等明度不同的顏色來呈現高齡者、生活概念。尤其是高齡者常患的「白內障」症狀會讓看到的東西偏黃色，顏色的感受方式和一般人不太相同。因此在設計時希望不要過度依賴顏色，而是改用對比方式讓使用者接收資訊。
設計、創造
無色彩和中性色為主的設計很適合公家單位的配色。無色彩不管對任何顏色親和力都高，又能襯托其他顏色，因此很適合使用在介紹設計、或本身就充滿色彩的網站。此外，中性色的紫色則有獨立性、創造性的感覺。
Web網頁上顏色的角色
代表某抽象概念的關鍵字的流行色會反映在流行服裝業界上，而汽車等工業設計也會在商品上呈現這樣的顏色流行趨勢。看得到、摸得到的實體商品，其顏色會受到形狀或環境之影響而有微妙差異。然而在Web上由於看起來觸感和質感都一樣，我們並無法期待顏色本身還能帶出什麼附加效果。在Web上，有的顏色所扮演的角色應該先重視像道路交通號誌似的功能性，才來追求新的附加價值。當然，我們可以透過顏色、移動性、功能等網站整體的架構來提高網站附加價值。但在此之前，網頁用色的基本原則，就是要讓畫面更易讀、更好用才是。
Design Samples
http://www.vodafone.com/index.VF.html
Vodafone
展現出企業形象色彩，是網頁必備的重要功能。
用數種顏色營造出一種質感
漸層可說是讓Web呈現質感的唯一方法。3D動畫就是利用模擬環境的光或打光等，讓物體看起來很立體以呈現質感。Web用圖也常以漸層來製作光或影效果，讓設計產生遠近深淺感，使網頁呈現更佳的效果。由於Web是以光來呈現色彩，和印刷品不同，因此在做漸層效果時，如能掌握RGB的特性，就能達到很好的顏色設定效果。好好控制光的混色，重現光影效果吧！
配色關鍵為HSB，調色則要用RGB
電腦上調整顏色的方法有RGB、CMYK、HSB等種類。要對色相設定不同明度或彩度，以呈現微妙顏色的這種配色作業，最適合用HSB。如果想要調色，就要用RGB。顯示器上的光就相當於紙上的顏料。您可以用RGB調整，看光怎麼樣最能清晰結合。建議您可以先將三原色彼此相混，做出12色的色相環。這個動作可以訓練您對光的敏感度。
Design Samples
http://thesims2.ea.com/
The Sims2.com
這個配色方式讓網站呈現3D電玩的感覺。
http://www.apple.com/quicktime/
Apple Quick Time
這個漸層效果呈現一種電影院黑漆漆的感覺。
以藍色為基調的配色實例
灰色可以讓鮮豔華麗的色彩趨於沉靜，讓畫面整體呈現統一感，可說是相當方便使用的顏色。使用灰色的重點在於，只能搭配一、兩個有色彩的顏色，因為灰色會受到附近色彩的影響而看起來有點糊糊的。因此，為了有效呈現整體感，只好搭配單色。選擇一個色相之後，接下來再選類似色，並調整不同的色調來用即可。不刺眼、沒有太強烈特色主張的灰色，在Web上也扮演著重要的角色。
關於原色
三原色相混會變成白色，這就稱為「加法混色」；三原色相混會變成黑色，就稱為「減法混色」。將白色視為加、將黑色視為減，這樣哪個顏色要用哪個方法就會很好記。但是「原色」的英文為Primary Color。一般人看到「原」就以為應該是「original」，但代表「原始」、「根本」含意的英文應該是「Primal」才是。另外，很多的鳥類、有袋目的動物，及人類女性都覺得光除了三原色外，還有一個黃色，也就是四原色。
Design Samples
http://www.vancouverplayhouse.com/
PLAYHOUSE
深灰與白色的高度對比中，再加上黃色的重點文字，讓畫面保持著一種平衡感。
http://www.apple.com/
Apple.com
導覽設計用灰色來統一，避免視覺上顏色的衝突。
http://www.muthesius-kunsthochschule.de/de/
Muthesius Kunsthochschule
深灰色的內文比黑色看起來沉靜、易讀。
Web網站的配色最好只用三色
使用三種顏色的3-color-design網站已經快要另成流派了，這種配色方法從Web的角色來思考非常合情合理。Web主要的用途就是要將資訊傳達給非特定的使用者。有的使用者的閱覽方式不依靠視覺，有的人則是要黑白列印出來閱讀才行。事實上，對於Web而言，用不同顏色來做資訊整理沒有什麼意義。當然配色華麗以求各個部分明顯區別，或是觀照使用者閱覽上的感覺也很重要，所以要讓網站適合所有人都來瀏覽，才需要採用這項建議。
顏色的名稱
橘色或黃色這樣主要色相，與萊姆綠色、米色等中間色都有顏色名稱。各國顏色名稱數都不同，日本工業規格則是規定了168色的顏色名稱。日本人平均能分辨的既有顏色數，據說有400色左右。在嚴格要求顯示器顏色顯示效果的現代，人類能接受的範圍卻意外地小。
Design Samples
http://www.albertocerriteno.com/
Alberto Cerrite
以略為帶黃色的灰色為基調，讓整體不至於看起來太暗。
http://www.adaptivepath.com/
Adaptive Path
這裡用的是在顯示器上，最不會造成眼睛負擔的綠色三色樣式。
利用對比關係，讓導覽更一目暸然
要讓畫面上可以點選的地方看得很清楚，可以使用ROLLOVER的效果。一般都採用讓滑鼠滑過和遠離時採用不同色相的顏色，但是運用色彩的明度差呈現對比，也是頗具效果的方法。使用者的視力情況各不相同，有的人可能會將設定的顏色看成別的顏色也不一定。如果碰上這種情況，想光靠顏色來清楚顯示操作情況是很難達到效果的。用RGB來顯示顏色時，明度的調整會比色相的選擇，更能讓人看清楚各個個體的顏色。按鈕動作(Button action)、與畫面閱覽後的顏色變化，可以用調整明度等配色技巧，來讓網站更易操作與閱覽。
高齡者與配色
公共建築物中標誌的設計，往往都會考量到高齡者視覺上的感受。最明顯的例子就是白內障會導致老人眼前所見都有點黃黃的。這種情況下，以黑色為背景之藍色字體，或是黃色的設計等，就會不容易看清楚，因此，在設計時都要考量到如果在網站現在的設計蒙上一層黃色時，會產生什麼變化。
Design Samples
http://www.adobe.com/
Adobe
連結文字與一般文字的明度不同。
http://www.leapfrog.com/en/shop.html
LEAP FROG
採用色相相同、明度不同的配色，讓畫面兼具美觀與使用簡易性。
使用日本傳統的配色
採用的直向標題，以和風為主題的照片素材等，都可以表現日本味道。但是最能明確讓人感覺到「日本」的，就要靠顏色了。日本傳統色很多，市面上也有賣介紹顏色名稱和顏色設定的色樣。取材自自然界的花草、石頭、作物等的日本傳統顏色，其色彩變化也很多，非常適合用以表現日本的文化或四季。再加上條紋或格子等日本特有小圖案，即時是時尚的畫面架構也能呈現出日本的印象。
其他國家的傳統顏色
除了日本傳統色外，其他如法國、中國的傳統顏色也很值得參考。尤其是法國的顏色和日本一樣，很多都是來自自然界花朵或石頭等的要素。亞洲圈中有些傳統色是可以轉而代表宗教或思想的，光是根據色樣來使用顏色，就能呈現各國給人的既有印象，這點真是不可思議。
Design Samples
http://www.edo-tokyo-museum.or.jp/
江戶東京博物館
造型和配色都呈現出高格調的日本氛圍。
http://www.nakaya.co.jp/
淺草中屋
如果不是對祭典氣氛顏色印象十分深刻，很難表現出這樣的主題。
design note
製作Web網頁也會出現「顏色統一的問題」
色彩管理是指在運用數位技術的過程中追求顏色表現的統一性，這在進行印刷工作時更是一件大事。數位創作會用到掃描器、顯示器、印表機等各種顯示顏色的數位工具，可是顯示出來的顏色卻會因為印表機用不同的墨水、顯示器的光不同、以及呈現顯示器或掃描器機種構造不同，造成無法呈現相同的顏色。因此印刷作業上都會以軟體做為中間媒體，透過色彩管理系統來解決問題。
在Web上也是一樣，瀏覽用的顯示器或影像編輯工具不同，呈現出的顏色也會有所差異。最常出問題的就是畫面在Windows和在Mac上出現的顏色不一樣。這是因為支援兩種作業系統的顯示器，出廠時預設的模式不同所致。就瀏覽Web而言，Windows的使用者較多，所以如果是用Mac來製作網頁時，可以將顯示器的設定調整為和Windows的標準設定一樣，盡量讓製作和操作瀏覽的環境一樣，再來進行作業。
另外影像製作工具間顏色不同，也是一個問題。用Photoshop製作的資料用Fireworks打開來看，顏色變得不一樣。這是因為這兩者之間使用的顏色表現方法不同之故。Photoshop標準使用的是Adobe RGB，而Fireworks等一般工具則是以合於Web用的影像標準sRGB為主流。可是，sRGB在綠色或黃色的表現上卻比Adobe RGB略遜一籌，因此用Photoshop製作的檔案(尤其是植物影像)使用其他軟體開啟時，色彩就顯得沒有強弱變化。這就是工具間會產生的色差問題。因此建議，在製作網頁的過程中，使用的工具品牌最好能全程統一，以便讓想要的效果如預期中呈現。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
不可不知的色彩顯示媒體特性
媒體特色與顏色，是第二個必備的概念。顯示器是以讓紅、綠、藍三種光線的點出現不同強弱的光來呈現顏色的媒體。這和雜誌或海報這種經由油墨或塗料反射光的機制完全不同。因此，了解「光的顏色」到了人的眼睛會變成什麼就變得很重要了。此外，除了顯示器、電腦、瀏覽器、與影像編輯軟體等對顏色的解釋方式，也會影響顏色呈現出來的效果。再補充一點，網頁安全色(Web Safe Color)也算是顯示媒體特性的一種。
顏色也會影響操作性
第三個要了解的概念是，將Web網站做為提供資訊或服務的介面時，所需了解之「操作與顏色之間的關係」。我們以車站等公共場所中，讓人群移動更順暢的標誌系統為例，一個空間當中，標示為廁所或出口等的標誌都使用相同顏色。走到一半顏色突然改變的話，看的人很快就會找不到目標。
顏色也是一種符號，可用來突顯畫面上最重要的資訊。此外，還可讓使用者了解操作順序、優先順序或操作後的處理狀況等。也就是說，顏色的使用會大大改變Web使用的便利性。
關於色彩的兩三事
了解色彩表現的限制和特性，適當使用顏色。
網頁安全色(Web Safe Color)是指相異瀏覽器均可呈現的216個顏色。這是考量到要讓使用者在不同的操作環境下得到一樣的資訊，所以在顏色上也訂好標準以防問題發生。網頁安全色是為了顏色重現性低的操作環境而設計的，但由於現在使用者的配備環境都明顯提升了，所以無需考慮那麼多，但大部份的製作工具還是備有類似的配色功能。
Flash與顏色
Flash和JPEG同樣可呈現24位元的色彩效果。而透明或漸層效果必需要在24位元色彩中才得以呈現。由於Flash的色彩引擎使用了獨家技術，所以不論使用哪種瀏覽器，都能保證一定的品質。因此，如果我們希望網頁有好的功能或效果，或希望要有好的色彩表現，都可以選擇使用Flash。
Design Samples
http://www.dexigner.com/
DEXIGNER Design Portal
關鍵顏色使用7色色環。可閱讀的部分採用較低的彩度，對眼睛較無負擔。
http://www.cmykmag.com/site.cfm?CFID=540993&CFTOKEN=34835363
CMYK Magazine
呈現印刷的CMYK基本顏色。在顯示器上看的話，CMYK是相當醒目的顏色。
善用色票
色票提供更多配色方法
色票是由油墨製作公司或顏色研究單位製作用來展現顏色效果的道具。主要用途是讓使用者看看在電腦上設定的顏色到印刷時會呈現出什麼感覺。粉彩的high tone、固體、金屬等顏色、以及各國傳統的顏色也都包含在其中。顏色可以有無限的組合，對經驗不足的人來說，要從零開始找到適合使用的顏色很困難。現在有了可以確認Web用色的色票做參考，讓佩色、用色更方便。
關於設定顏色的幾個方法
在製作影像或網頁的工具中，一般主要都是使用RGB(color slider)來設定顏色。只要用光的三原色紅、藍、綠的色域各自調和即可。對於了解RGB特性的使用者可能很好用，但是只要各設定值一變，顏色就會大不相同，不易尋找搭配的顏色。要搭配顏色，最好使用可在同一色相調整亮度與彩度的HSB(HSL)。依據不同使用目的，使用不同的選色方法，設計出來的效果也會有所不同。
Design Samples
http://www.also-online.com/
ALSO Online
使用色票中冷色系設計而成的網站。
配色的概念
了解顏色就會知道如何恰當用色
顯示器看到的Web網站基本上是光的三原色(RGB)。這個三原色可以呈現出光的波長所含的12個主要的顏色。由紅到紫的12色所組成的圓就稱為「色相環」。R(紅)和G(綠)混合就會成為中間色黃色(二次色)，黃色再和紅色相混，就會形成中間的橘色(三次色)，色相環有著這樣的三色關係。而兩個相鄰的顏色有著類似自然界顏色那樣調和關係的，則稱為類似色。補色則是指位於色相環斜對角上，對比最強的顏色。「三角形配色」意指色相環上，構成三角形的顏色關係，是種很有色彩張力效果的顏色搭配。這個色相環產生的三相就是配色的基礎。
Johannes Itten
Johannes Itten是瑞士的造型專家，德國包浩斯(Bauhaus)藝術造型學院早期的院長，他因將顏色置換成12環的圖，讓色彩學自成一家而聲名大噪。他提出顏色有互補關係，且配色會因不同亮度或彩度，而給人不同印象之顏色性質理論，讓原本以繪畫為主的色彩探求領域也延伸到家具或建築等所有的商品上。至今對於利用顏色提高商品價值的現代產品設計仍有很大的影響。
Design Samples
http://www.r-sumai.jp/
R-System株式會社
將相同色相、不同色調的顏色一起搭配使用的例子。
http://www.ebis.ne.jp/
廣告效果測試系統「AD EBIS」
明度低的幾個不同色相的顏色，以灰色來做整合。
配色時要考慮顏色性質
不同配色方式，呈現出不同的顏色印象與效果
顏色給人的印象，會隨使用者操作環境或使用方法等條件而異。就像我們可能認為同個顏色、不同色調應該很好搭配才是，但也會因使用方法不對，而出現跌破眼鏡的效果。沒有實際用用看，是很難掌握會呈現什麼顏色效果的。配色之所以比想像中還難掌握，就是因為不了解顏色的特性與本質所致。本章介紹的顏色對比性質，是根據印刷品或圖畫等情況提出的見解，但以光來顯示顏色的Web媒體上同樣也適用。
Point1：一樣是橘色，背景為紅色時，橘色就會看起來比較黃；以黃色為背景時，橘色看起來就會比較紅。這是因為中心顏色受背景顏色影響之心理補色之故。所謂心理補色是指一直看著相同顏色時，眼睛就會自然看到互補色。紅色的互補色是綠色而言，綠色就會加在橘色上而看起來比較黃。就算是相同顏色，也會因為背景色之不同，給人的印象也會有所不同。
Point2：受到背景色等周圍附近鮮豔顏色的影響，顏色會看起來比實際顏色還暗；被較暗的顏色包圍時，顏色就會看起來很鮮豔。
Point3：本例為顏色的對比。被暗的顏色包圍時，顏色看起來比較亮；被亮的顏色包圍時，顏色看起來比較暗。背景為黑色的網頁上，淡灰色的文字看起來不容易閱覽，背景為白色時，由於看起來比實際還暗，因此看起來很清楚，也很輕鬆。當顏色為彩色時也是一樣的情況。
面積對比：面積不同，看起來感覺也不同
即使是相同顏色，面積大看起來就比較亮，面積小看起來就比較暗(明度變低)。在處理Web網頁中背景色這樣大範圍的用色時，如不降低彩度，就會看起來比想像中還亮。另外，文字等小範圍內使用的顏色即使很鮮豔，也會因為面積小而看起來沒那麼亮。
膨脹：讓面積看起來會變大的顏色搭配
明亮的暖色系，尤其是對比色強的配色會讓面積看起來比較大。中間為橘色的圖對比較強，看起來會比藍色的圖還要大。有時設計還會因配色效果的關係，而需要再稍微調整大小。尤其是文字大小也會因標題和背景色的關係，而看起來不一樣。
冷色系和暖色系
暖色的圖形看起來比冷色的圖形還要近。從這個特性我們可以想到，只用暖色系的配色架構會對使用者造成壓迫感。因此在想要呈現畫面深度時，也可以使用暖色系的顏色。
彩度和明度的不同
彩度和明度都被視為是「顏色的亮度」，所以兩者很容易搞混。明度高的顏色對光的反射率也高。明亮的顏色反射率大，暗的顏色反射率小。明度高的顏色在畫面上只是看起來比較突出而已。另一方面，彩度高的顏色會吸引收掉所有其他成分，只反射自己的顏色，彩度低的顏色則會讓周圍的顏色進行反射(襯托其他顏色)。也就是說，彩度高的顏色彼此之間不容易取得平衡，彩度低的顏色則會影響配色時的銳利度。
Design Samples
http://adam1.szinhaz.org/
Adam1
明度和彩度都低，配色很容易。攝影作品集等就很適合使用此種方式。
http://www.jrobertscott.com/
J. Robert Schott
背景、文字、網站LOGO都統一為無色彩。無色彩當中黑色是最強烈的顏色。
冷色系和暖色系性質不同，需視情況來使用
聰明用色，讓影像和文字資訊更清晰
藍色或綠色等冷色系可以用來呈現畫面深度，而紅色或橘色等暖色系則適合用於平面的表現。尤其是藍色和紅色的對比，可以強調出深淺遠近的感覺。在藍色背景上加上紅色的影像就會產生心理補色，而讓紅色的周圍看起來好像灰色，這種圖形配色的架構相當有名。此外，如果一張照片想要讓人感覺到深淺遠近的效果時，可以加上藍色漸層的模式來強調立體感，這也是一種方法。
色彩給人的印象
藍色代表信賴感、綠色代表安全感、紫色代表很有靈性…，顏色給人的印象各不相同。現在坊間有很多教人以想要的印象為關鍵字，進行配色的書籍，您不妨將這些書當成決定設計方向的指導手冊。然而「水能載舟，亦能覆舟」，這樣既有的色彩印像有可能成為瞬間縮小配色可能性的兩面刃。執色彩理論牛耳的Johannes Itten就警告說，用色過度制式化，可能會抹煞顏色的本質。
Design Samples
http://www.infusion.com/
infusion
背景為冷色系，內容部分看起來好像往前突出。
用關鍵字找出所需配色
將關鍵字轉換為顏色的秘訣
在流行時尚業界，像「清爽」這類抽象關鍵字可搭配的具體顏色其實都是規範好了的。尤其是一年春、夏、秋、冬的流行顏色，都是由1963年成立的國際流行色委員會，每兩年召開一次的會議中由各國協調決定的。日本流行色協會亦為該會議之一員，會配合國內民情或過去發生的情況等提出日本自己的流行色。各單位所訂的流行色，會左右該年關鍵字所引導出的顏色印象。不過一般而言，顏色會分為三群，冷色系代表冷酷、冷靜，暖色系代表溫暖、充滿活力，中性色系代表中性、少有主張的，這些都是既定的、自然感受到的印象。
Point1：彩度低的冷色系是一般商務網站慣用的配色。因為主動提供參考的內容很多，因此適合讓人沉靜下來，或感覺有深度的冷色系。另外，低彩度也有助於烘扥其他顏色，每天都更新照片或影像的新聞網站等亦適用。
Point2：用色以清爽、彩度高的配色為主，搭配上以白色為基調的底色，這樣的設計很適合國家行政單位、各縣市政府網站之用。彩度高又鮮豔的顏色可以給人容易親近、產品容易使用的感覺，而這個概念一樣也適用於公家機構。要注意的重點是，顏色不要用太多種，選出要用的幾種就好了。
Point3：Outdoor & fishing Nature(自然、運動類) http://www.naturum.co.jp/
本例是以天空、海、山等自然界的顏色來展現自然或運動等主題。另外也可加上充滿活力的暖色系，以呈現戶外的感覺。大地的綠色在螢幕上看起來會太刺眼，因此要記得，如果用色面積大時，要儘量壓低彩度。
花蕊、嫩芽、可愛
時尚的領域流行表示花蕊、嫩芽概念的顏色。以明度不同的粉紅色為主的顏色，和淡灰色或綠色等重點顏色很搭。商品設計業界的表現主要是以呈現膚色為主，但由於Web上較難呈現這樣的效果，因此改用能穩定顯示的粉紅色，就比較沒有問題。
高齡者、生活
以綠色或象牙色等明度不同的顏色來呈現高齡者、生活概念。尤其是高齡者常患的「白內障」症狀會讓看到的東西偏黃色，顏色的感受方式和一般人不太相同。因此在設計時希望不要過度依賴顏色，而是改用對比方式讓使用者接收資訊。
設計、創造
無色彩和中性色為主的設計很適合公家單位的配色。無色彩不管對任何顏色親和力都高，又能襯托其他顏色，因此很適合使用在介紹設計、或本身就充滿色彩的網站。此外，中性色的紫色則有獨立性、創造性的感覺。
Web網頁上顏色的角色
代表某抽象概念的關鍵字的流行色會反映在流行服裝業界上，而汽車等工業設計也會在商品上呈現這樣的顏色流行趨勢。看得到、摸得到的實體商品，其顏色會受到形狀或環境之影響而有微妙差異。然而在Web上由於看起來觸感和質感都一樣，我們並無法期待顏色本身還能帶出什麼附加效果。在Web上，有的顏色所扮演的角色應該先重視像道路交通號誌似的功能性，才來追求新的附加價值。當然，我們可以透過顏色、移動性、功能等網站整體的架構來提高網站附加價值。但在此之前，網頁用色的基本原則，就是要讓畫面更易讀、更好用才是。
Design Samples
http://www.vodafone.com/index.VF.html
Vodafone
展現出企業形象色彩，是網頁必備的重要功能。
善用漸層效果
用數種顏色營造出一種質感
漸層可說是讓Web呈現質感的唯一方法。3D動畫就是利用模擬環境的光或打光等，讓物體看起來很立體以呈現質感。Web用圖也常以漸層來製作光或影效果，讓設計產生遠近深淺感，使網頁呈現更佳的效果。由於Web是以光來呈現色彩，和印刷品不同，因此在做漸層效果時，如能掌握RGB的特性，就能達到很好的顏色設定效果。好好控制光的混色，重現光影效果吧！
配色關鍵為HSB，調色則要用RGB
電腦上調整顏色的方法有RGB、CMYK、HSB等種類。要對色相設定不同明度或彩度，以呈現微妙顏色的這種配色作業，最適合用HSB。如果想要調色，就要用RGB。顯示器上的光就相當於紙上的顏料。您可以用RGB調整，看光怎麼樣最能清晰結合。建議您可以先將三原色彼此相混，做出12色的色相環。這個動作可以訓練您對光的敏感度。
Design Samples
http://thesims2.ea.com/
The Sims2.com
這個配色方式讓網站呈現3D電玩的感覺。
http://www.apple.com/quicktime/
Apple Quick Time
這個漸層效果呈現一種電影院黑漆漆的感覺。
利用配色讓畫面看起來更簡單
以藍色為基調的配色實例
灰色可以讓鮮豔華麗的色彩趨於沉靜，讓畫面整體呈現統一感，可說是相當方便使用的顏色。使用灰色的重點在於，只能搭配一、兩個有色彩的顏色，因為灰色會受到附近色彩的影響而看起來有點糊糊的。因此，為了有效呈現整體感，只好搭配單色。選擇一個色相之後，接下來再選類似色，並調整不同的色調來用即可。不刺眼、沒有太強烈特色主張的灰色，在Web上也扮演著重要的角色。
關於原色
三原色相混會變成白色，這就稱為「加法混色」；三原色相混會變成黑色，就稱為「減法混色」。將白色視為加、將黑色視為減，這樣哪個顏色要用哪個方法就會很好記。但是「原色」的英文為Primary Color。一般人看到「原」就以為應該是「original」，但代表「原始」、「根本」含意的英文應該是「Primal」才是。另外，很多的鳥類、有袋目的動物，及人類女性都覺得光除了三原色外，還有一個黃色，也就是四原色。
Design Samples
http://www.vancouverplayhouse.com/
PLAYHOUSE
深灰與白色的高度對比中，再加上黃色的重點文字，讓畫面保持著一種平衡感。
http://www.apple.com/
Apple.com
導覽設計用灰色來統一，避免視覺上顏色的衝突。
http://www.muthesius-kunsthochschule.de/de/
Muthesius Kunsthochschule
深灰色的內文比黑色看起來沉靜、易讀。
配色以三色為限
Web網站的配色最好只用三色
使用三種顏色的3-color-design網站已經快要另成流派了，這種配色方法從Web的角色來思考非常合情合理。Web主要的用途就是要將資訊傳達給非特定的使用者。有的使用者的閱覽方式不依靠視覺，有的人則是要黑白列印出來閱讀才行。事實上，對於Web而言，用不同顏色來做資訊整理沒有什麼意義。當然配色華麗以求各個部分明顯區別，或是觀照使用者閱覽上的感覺也很重要，所以要讓網站適合所有人都來瀏覽，才需要採用這項建議。
顏色的名稱
橘色或黃色這樣主要色相，與萊姆綠色、米色等中間色都有顏色名稱。各國顏色名稱數都不同，日本工業規格則是規定了168色的顏色名稱。日本人平均能分辨的既有顏色數，據說有400色左右。在嚴格要求顯示器顏色顯示效果的現代，人類能接受的範圍卻意外地小。
Design Samples
http://www.albertocerriteno.com/
Alberto Cerrite
以略為帶黃色的灰色為基調，讓整體不至於看起來太暗。
http://www.adaptivepath.com/
Adaptive Path
這裡用的是在顯示器上，最不會造成眼睛負擔的綠色三色樣式。
左右網站操作簡易性的配色方式
利用對比關係，讓導覽更一目暸然
要讓畫面上可以點選的地方看得很清楚，可以使用ROLLOVER的效果。一般都採用讓滑鼠滑過和遠離時採用不同色相的顏色，但是運用色彩的明度差呈現對比，也是頗具效果的方法。使用者的視力情況各不相同，有的人可能會將設定的顏色看成別的顏色也不一定。如果碰上這種情況，想光靠顏色來清楚顯示操作情況是很難達到效果的。用RGB來顯示顏色時，明度的調整會比色相的選擇，更能讓人看清楚各個個體的顏色。按鈕動作(Button action)、與畫面閱覽後的顏色變化，可以用調整明度等配色技巧，來讓網站更易操作與閱覽。
高齡者與配色
公共建築物中標誌的設計，往往都會考量到高齡者視覺上的感受。最明顯的例子就是白內障會導致老人眼前所見都有點黃黃的。這種情況下，以黑色為背景之藍色字體，或是黃色的設計等，就會不容易看清楚，因此，在設計時都要考量到如果在網站現在的設計蒙上一層黃色時，會產生什麼變化。
Design Samples
http://www.adobe.com/
Adobe
連結文字與一般文字的明度不同。
http://www.leapfrog.com/en/shop.html
LEAP FROG
採用色相相同、明度不同的配色，讓畫面兼具美觀與使用簡易性。
和風配色法
使用日本傳統的配色
採用的直向標題，以和風為主題的照片素材等，都可以表現日本味道。但是最能明確讓人感覺到「日本」的，就要靠顏色了。日本傳統色很多，市面上也有賣介紹顏色名稱和顏色設定的色樣。取材自自然界的花草、石頭、作物等的日本傳統顏色，其色彩變化也很多，非常適合用以表現日本的文化或四季。再加上條紋或格子等日本特有小圖案，即時是時尚的畫面架構也能呈現出日本的印象。
其他國家的傳統顏色
除了日本傳統色外，其他如法國、中國的傳統顏色也很值得參考。尤其是法國的顏色和日本一樣，很多都是來自自然界花朵或石頭等的要素。亞洲圈中有些傳統色是可以轉而代表宗教或思想的，光是根據色樣來使用顏色，就能呈現各國給人的既有印象，這點真是不可思議。
Design Samples
http://www.edo-tokyo-museum.or.jp/
江戶東京博物館
造型和配色都呈現出高格調的日本氛圍。
http://www.nakaya.co.jp/
淺草中屋
如果不是對祭典氣氛顏色印象十分深刻，很難表現出這樣的主題。
design note
製作Web網頁也會出現「顏色統一的問題」
色彩管理是指在運用數位技術的過程中追求顏色表現的統一性，這在進行印刷工作時更是一件大事。數位創作會用到掃描器、顯示器、印表機等各種顯示顏色的數位工具，可是顯示出來的顏色卻會因為印表機用不同的墨水、顯示器的光不同、以及呈現顯示器或掃描器機種構造不同，造成無法呈現相同的顏色。因此印刷作業上都會以軟體做為中間媒體，透過色彩管理系統來解決問題。
在Web上也是一樣，瀏覽用的顯示器或影像編輯工具不同，呈現出的顏色也會有所差異。最常出問題的就是畫面在Windows和在Mac上出現的顏色不一樣。這是因為支援兩種作業系統的顯示器，出廠時預設的模式不同所致。就瀏覽Web而言，Windows的使用者較多，所以如果是用Mac來製作網頁時，可以將顯示器的設定調整為和Windows的標準設定一樣，盡量讓製作和操作瀏覽的環境一樣，再來進行作業。
另外影像製作工具間顏色不同，也是一個問題。用Photoshop製作的資料用Fireworks打開來看，顏色變得不一樣。這是因為這兩者之間使用的顏色表現方法不同之故。Photoshop標準使用的是Adobe RGB，而Fireworks等一般工具則是以合於Web用的影像標準sRGB為主流。可是，sRGB在綠色或黃色的表現上卻比Adobe RGB略遜一籌，因此用Photoshop製作的檔案(尤其是植物影像)使用其他軟體開啟時，色彩就顯得沒有強弱變化。這就是工具間會產生的色差問題。因此建議，在製作網頁的過程中，使用的工具品牌最好能全程統一，以便讓想要的效果如預期中呈現。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
