第二章
互補色相關係
這是街旁在聖誕節前夕推出的與星巴克合作的活動網頁。街旁標誌中的紅色和星巴克標誌中的綠色，正好與象征聖誕節的紅和綠相吻合，網站采用了紅綠這對互補色，通過聖誕節的各種象征物進行充分表現。界麵色彩飽滿，充滿節日氣氛，很是吸引眼球。
名稱: 街旁
主色彩 R211 G000 B039
R001 G176 B080
輔助色彩 R001 G176 B080
強調色彩 R255 G255 B255
Whitecastle 是售賣快餐的網站，網站界麵沿用了品牌Logo 中的標準色藍色和橙色作為網站主色，成功地強化了品牌形象。界麵中橙色和藍色這對互補色處理得十分成功，通過明度和彩度的調整，以及色彩麵積的控製，使得大麵積的橙色飽和生動，小麵積的藍色或明亮輕快或沉穩安靜，營造出年輕一族喜愛的飽滿活潑的氛圍，同時成功地避免互補色相容易過火、過愣的問題。
名稱: Whitecastle地址: www.whitecastle.com
主色彩 R255 G134 B046
R 028 G 079 B132
輔助色彩 R255 G162 B049
R 112 G 183 B239
強調色彩 R255 G255 B255
明度（Value）是指色的明暗程度，也可稱色的亮度、深淺。若把無彩色的黑、白作為兩個極端，在中間根據明度的順序，等間隔地排列出若幹個灰色，就成為明度階段，靠近白端為高明度色，靠近黑端為低明度色，中間部分為中明度色。明度階段從無彩色的角度來看，很容易區分明暗程度，但是混合了色相明暗程度就不是那麼容易區分了。
1..高明度
玉蘭油白裏透紅美白霜的廣告站點可以作為高明度型站點的典型參考，主色（白色）是明度最高的顏色，輔助色是明度很高的藍色，營造出輕快、爽潔的氛圍，是二十歲左右年輕女性十分青睞的風格。
Kindle 是亞馬遜的閱讀軟件，主要用於閱讀亞馬遜銷售的電子書。界麵以白色為主，簡潔、明亮、幹淨。在高明度的環境中，強調色藍色重點突出了書籍名稱等相關信息，而強調色橙色主要用於交互操作的提示和用戶評價的星級。閱讀軟件需要顯示大量信息和圖片，因此高明度的主色是一個不錯的選擇。
名稱:kindle
主色彩 R255 G255 B255
輔助色彩 R203 G203 B203 R246 G245 B214
強調色彩 R005 G001 B222 R244 G119 B009
2..中明度
中明度的色彩是網站配色中最常用的，比例高於高明度和低明度的網站。1 號店“現金好禮天天見”專題廣告站點中的主色采用中明度的橙色，生動富於親和力；而中間區域較低明度的青綠色的運用，使活躍氣氛中又多一些安靜，便於受眾閱讀內容。
名稱: 1 號店地址: www.yhd.com主色彩
R255 G140 B025 輔助色彩
R000 G106 B099 R137 G057 B004 強調色彩
R255 G248 B156 R255 G255 B255
Stori.c 是法國的一款基於地理位置服務的訂餐軟件，除了對商家進行篩選，提供附近餐館的信息、距離以及可提供的美食服務之外，當用戶進入餐廳後，Stori.c 還會自動生成該餐廳的菜單供你點菜。用戶使用Stori.c 點餐後，餐廳的後廚會自動收到訂單並及時處理。
Stori.c 的界麵保持了很好的一致性，整個視覺體驗都很流暢。采用中明度天藍色作為主色，搭配著鈷藍、深藍、白色、深灰，界麵運用了一些色調的漸變，給人一種較強的韻律感，能讓界麵的色彩層級更加豐富。橙色作為主色的互補色，用作界麵的強調色，麵積大小控製得很好，起到了畫龍點睛的效果。界麵一些圖標、按鈕、文本鏈接，都采用玻璃質感，比較整體化。