第三十章

類似色相、相反色調配色方案

漸變是以色彩的排列為主的配色方案。按照一定規律逐漸變化的色彩,會給人一種較強的韻律感,在視覺上賦予了注目性。漸變可以分為色相漸變和色調漸變。色相漸變是指在類似色調的基礎上,通過色相的逐漸變化進行配色。色調漸變是指在類似色相的基礎上,通過色調的變化來進行配色。這種配色方法在自然界很常見,例如雨後的彩虹就是典型的漸變配色實例。

該網站主要功能是用來介紹FIDM學校數字藝術專業,其中包括介紹優秀作品、申請學校的步驟,關於FIDM的信息,免費資源下載等。這是一個Flash 網站,界麵采用漸變配色形式,形式感、韻律感都很強,漸變的顏色都是高純度、中明度,結合網站的配樂、超炫的載入畫麵和絕佳的轉場,給人歡快、動感、有活力的感覺,抓人眼球。

名稱: FIDM 學校數字藝術專業網站

地址: www..dmdigitalarts.com/#/home

主色彩 R220 G220 B220

輔助色彩 R175 G175 B175

強調色彩 R000 G234 B239 R000 G168 B174 R194 G203 B015

R238 G236 B122 R235 G154 B000 R141 G042 B076

R088 G003 B057 R016 G011 B042

Se.hanow 是一個有四個成員的小型設計團隊。網站主要展示他們的Web、Logo等方麵作品。網站采用向心型漸變,空間縱深感很好,能凝聚用戶的視覺中心點,利於更好地展示作品。網站不同的二級頁麵采用不同的顏色,但所有色調是一致的,有一種很強的韻律感。值得借鑒的是,點擊所有以圖片方式展示的Web 作品,都能鏈接到該作品的網址,能全麵地看到整個作品的全貌。

名稱: Se.hanow

地址: www.se.hanov.com

主色彩 R252 G043 B048 R047 G188 B206 R229 G047 B121

R153 G195 B047 R243 G162 B047

輔助色彩 R154 G000 B124 R000 G052 B102 R100 G000 B039

R021 G102 B000 R151 G061 B000

強調色彩 R243 G226 B076

色調漸變配色方案

分離配色和漸變配色一樣,也是基於色彩排列的配色方式,通過向顏色與顏色之間插入一個分離色,通常使用的分離色是白色或黑色等非彩色,一般麵積不宜過大。主要用於需要分辨但顏色差異本身不太明顯的配色環境中,也可通過插入到兩個對比過於強烈的顏色之間達到緩衝效果。

Wee Society 是一家成立於2010 年,致力於創作為孩子和父母緊密聯係、一起快樂的兒童APP 產品的公司。其公司網站在配色上使用了分離的技巧,首先是很好地與公司的Logo 的造型呼應,其次眾多APP 的宣傳圖片和橙色、藍色色塊之間通過白色的分離有了一個緩衝和平衡,也給視覺上更多留白透氣的空間。

名稱: Wee Society地址:www.weesociety.com

主色彩 R040 G177 B074

輔助色彩 R255 G255 B255

R207 G207 B207

強調色彩 R239 G090 B032

R000 G180 B227

分離配色方案

6.6.1 三角調和

情況1

定義:凡是在色相環中構成等邊三角形或等腰三角形的三個色是調和的色相。也可將這些等邊或等腰三角形或任意不等邊三角形在色環中自由轉動,可找到無限個調和色組。

三角調和情況1——等邊三角形示意圖

可以看到:色環上等距離的三個顏色調和在一起,將這三個顏色用直線連接起來,所形成的三角形為等邊三角形。三種顏色在麵積相等的情況下勢均力敵,但在實際運用中,要合理安排色彩的麵積,區分出主色、輔助色和強調色。

我們可以利用之前介紹過的colorschemedesigner 在線配色工具來深入理解所謂的三角調和,在這個軟件中的triad 功能即可理解為三角調和。如圖中的橙色、紫色和綠色從所在的色環位置看,若加上連線的話,正好形成等邊三角形。點擊Export 進行配色方案輸出,選擇HTML+CSS,就可以網頁形式看到完整的配色方案及數值。

Tip:收藏+分享互聯網產品(Web移動WebAPP)視覺設計·配色篇,是对网站最大的肯定和支持。