網頁配色設計應用:綠色稚嫩

0
46

綠色是一種存在感極強的色彩,很多人都覺得綠色很難與其他色彩搭配,相對來說,它的配色顯得比較單一。我們曾經探討過橙色,由於橙色介於紅色和黃色之間,因此看上去有種曖昧感。而綠色雖然介於藍色與黃色之間,卻與橙色完全不同,綠色的存在感極強,和藍色黃色相近卻擁有完全不同的視覺感受。

 

一、綠色的名稱和詞源

綠色作為大自然的主旋律,能帶給人安寧舒適、生機勃勃的感覺。研究也表明,綠色有助於恢復視力、緩解緊張,對某些疾病的治療也有輔助作用。然而,我們仔細觀察就會發現,儘管生活中對於綠色的配色可謂“爛大街”,設計師們卻都小心翼翼地繞過了100%的綠,或者偏黃或者偏藍,這種有偏頗感的綠色成為大家的新寵,百看不厭。那麼,為什麼綠色有這樣的雷區? 100%的顏色看上去都有種難以和其他顏色相容的姿態嗎?

 

淡黃綠色(Chartreuse)

法語Chartreuse意為查特酒,是一種法國和西班牙修道院僧侶釀製的黃綠色甜酒,其色彩呈現出黃色和草綠色,一般用來指稱淺嫩綠色。

1

蘋果綠(Apple green)

這是一種泛黃色較亮的綠色。

ifeiwutut59-02

草綠色(Grass green)

這裡指的是草的顏色,是一種泛黃色的深綠色。

3

深綠色(Malachite green)

該名稱來源於一種古希臘語中叫做malakhe的植物葉子,是一種較深的綠色。

4

琉璃綠(Bottle green)

這是一種玻璃綠色,主要指稱較深的綠色。

5

橄欖綠(Olive green)

橄欖的顏色本是黃色中泛綠,繼續走到綠色的色域裡就成為橄欖綠。指的是一種泛黃的綠色。

6

苔蘚綠(Moss green)

像苔蘚的顏色,是一種泛黃色低純度的綠色。

7

卡其色(khakie)

印度語khakie是土的意思,原來是英屬印度時期軍裝的顏色。這是一種較渾濁和黯淡的黃綠色。

8

蛋白石綠(Opal green)

蛋白石的顏色,是一種泛白的綠色。

9

冰綠色(Ice green)

冰下的顏色,是一種很亮的綠色。

10

 

二、綠色的意象和配色表現

100%的綠色雖然帶有藍色黯淡的感覺,但也隱含著黃色的光芒,不是一種完全冷暗的顏色。在綠色不作為主色的情況下,有必要稍微隱藏一些它的光芒。綠色與黑白色配色時,視覺效果較為強烈且具有明確的存在感。這樣看來,綠色在配色中幾乎不能幫助其他色彩,也不能強調整體的氛圍,有獨自搶眼的傾向,而又無法像紅色那樣給人以足夠強烈的印象。

源於自然的綠色意象:

葉子:樹木、自然、舒適、生命、智慧、新奇、休息、涼爽…… 地球:新奇、健康、和平…… 四葉草:幸運、順應、服從、合格、稚嫩、青少年……

源於社會的綠色意象:

信號:前進、出發、行動、進行…… 宗教:惡魔(怪物)、墮落…… 符號:清醒、治療、幫助、誠實、勤勞、中產階級……

 

在綠色作為主色,其他顏色作為點睛色的情況下,配色可以很順暢,但最好避免使用100%的綠色,降低純度、提高明度是不錯的方法。使用泛黃或泛藍的青綠色,也會有較好的效果。例如,在樹木不是作為主體而是作為單純的背景物的情況下,樹木的顏色要去“迎合”周圍使用的顏色方向。這是避免100%綠色的好辦法!假如畫面上方是藍色天空,可以把藍色換成青綠色;如果天空中有黃色霞光,可以用泛黃的嫩綠或者橄欖綠來表示。

如果不想讓畫面整體的配色過於黯淡,綠色(尤其是100%的綠色)之外就需要有非常亮的色彩相互搭配,反之亦然。必須要提醒的是,即使畫面中已經有了白色,最好也增加一種亮色,因為100%的綠色,似乎看上去就偏黯淡。

提前需要確定所使用的綠色要表現的是什麼感覺,這樣避免綠色影響整體配色的協調。溫暖舒適的葉子的綠色和涼風拂面的秋葉的綠色是完全不同的。綠色在配色中盡量避免無意義的綠色,這樣會顯得搶眼。

不知道大家有沒有註意到?曾經出現過一種用綠色做出的塑料的裝飾樹,雖然綠得足夠搶眼,卻讓人看不到一點生機,一眼識破是假象。這是為什麼呢?因為自然界的綠色是多種多樣的。雖然看上去都是綠色,卻可以有青蔥的嫩綠,松針的草綠,清亮深邃的青綠色,落葉的橄欖綠等。這些顏色各有各的感覺。比如,泛黃的綠色,即便不是鮮明的嫩綠也給人溫暖、自然、積極的印象。飽和度偏低且偏黃的綠色,看上去就更加柔和舒適。

11

青綠色是在綠色中加入了藍色的綠色系色彩,給人以冷淡、清爽的感覺。此外,低純度的青綠色,除了給人以非自然的感覺之外,還有後退的作用。尤其在表現遠處的事物或背景的時候,可以使用到它。

12

 

三、綠色系的配色實例

由於綠色有作為主色的特質和豐富的顏色感覺,所以即便沒有點睛色,也能獨自撐起畫面,是一種萬能的主色。如果需要增加一種點睛色,選擇綠色系中的一種也可以實現多樣化的配色,這是綠色的長處。綠色和其他色彩不同,比例增加的話,容易使畫面變得單調,而且不會根據色彩種類的增加而減弱自身的存在感。

首先綠色搭配黑白灰,毫無異議的顯得乾淨利落。

13

上圖中的綠色作為點睛色,平衡了黑白的單調,而這裡的白色和綠色都趨向於輕薄,因此需要用深黑,以加強色彩的力量感。

14

綠色與紅色、橙色與黃色等暖色的搭配時,重要的是要強調兩者之中的一個。比如,在上圖中的主色為綠色,點睛色就為紅色和黃色,其中紅色的顏色較深,突出強調圖案中的人物形象,而其他的色彩就退而次之,綠色的飽和度較低且偏黃,與黃色相得益彰地變為了背景,輔助突出了點睛色。

綠色是一種非常搶眼的顏色,因此一旦綠色與其他色彩發生了衝突,我們就要著手調整。

15

很多人覺得綠色和紅色不能搭配,否則會發生撞色。的確這不是容易搭配好的顏色,但是不代表它們完全不能搭配。在搭配的方式上可以參考上圖,一個作為主色,一個作為點睛色。其中綠色是往藍色靠攏的綠色,避免100%的綠。且紅色的飽和度並不高。這樣就減少了衝突卻保留了兩種色系在視覺上的對比,讓畫面顯得更為活潑。

16

綠色與藍或紫這類冷色調搭配時,很多人覺得比較棘手的地方是顯得有點太過黯淡。這時,不妨可以考慮增加綠色的溫暖感,使用偏黃的綠色,同時增加綠色的亮度,讓畫面有亮色的部分。或者增加另一種顏色的亮度。

17

其實兩種比較亮的顏色相配是非常容易的,由於色彩的感覺不強,就顯得比較融洽,但這樣的壞處就是會讓畫面衝擊力不夠,不易給人留下印象。解決這一問題需要增加另一種顏色,這種顏色中的其中一種的色重,最好的辦法就像上例中增加紫色漸變,這樣就出現了較為深一點的紫色。這時紫色與綠色略有衝突,對比的效果深刻。而黃色的出現也增加了色彩中的溫暖感,實現了色彩的色溫的平衡。

18

綠色與橙色的搭配,在我看來並沒有藍色與橙色搭配那麼協調。由於綠色和橙色在色環上表現為鄰近色,鄰近色之間的色彩感覺應該類似,然而綠色卻是有著豐富的色彩表現力,而又相對比較搶眼,因此很容易把畫面變得比較“鬧騰”,最終既沒有強烈的對比感,也沒有完全的和諧感受。這時,如果一定要用到這樣的一組搭配,不如選擇偏藍色的綠色,這時的綠色看上去偏冷感,和橙色拉開了距離,增加了畫面的活躍感。而運用較亮且沒那麼高的飽和度的色彩,則會讓畫面趨向柔和。

 

後記

其實為什麼搭配不好綠色,還是在於我們一開始選擇綠色時就不自主地選擇了原色。只要避開了原色,幾乎任何一種色彩都能與綠色搭配,適當的調整綠色的比例,增加亮度或者偏藍或者偏黃都有可能搭配出賞心悅目的畫面。

 

 

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03

原文地址:ifeiwu