色彩三屬性
色彩學中運用了「色相」、「明度」、「彩度」這三種要素來評估顏色。在分類種類無限多的有彩色時,使用的指標便是以上的色彩三屬性。
色相
有彩色中存在有紅、黃、藍、綠等「調性」的差異,而「色相」則是讓我們得以判斷顏色是偏紅或是偏藍「調性」的標準。
明度
如同其字面上的意義,「明度」指的是色彩的明暗程度。無彩色只存有「明度」。務必記住明度高=接近白色,明度低=接近黑色。
彩度
表示色彩鮮豔程度的標準稱為「彩度」。一個分辨方法是,彩度低=接近白色或黑色、彩度高=彩調搶眼的鮮豔色。
利用色相差距的配色方法
如同下圖所示,將色相排列成環狀的圖便稱為「色相環」!
相似色相配色
相似色的雙色範例
色相環上落在30~60度範圍內的不同顏色稱為相似色相,組合顏色相近的色彩有助於畫面的整合。
互補色色相配色
互補色的雙色範例
色相環上落在相反位置上的顏色稱為互補色。互補色因為顏色差距大,所以用於小範圍能有畫龍點睛之效。
對照色相配色
對照色的雙色範例
色相環上落在120~150度範圍內的不同顏色稱為對照色。跟補色相較下,對照色的顏色較為相似,是相對較容易應用的配色。
適合不同店家裝潢的
關鍵色配色法
為了讓客人踏入店內後的印象能無異於DM,讓我們來看看配色可如何配合裝潢。
1. KEY COLOR /// PINK
暖色系裝潢的店家
店內沙發或織品類採暖色系的店家,最適合使用灰粉色,可營造出略顯華美的印象。
2. KEY COLOR /// GREEN
內有觀葉植物的店家
店內若放有許多觀葉植物,採用偏亮的灰綠色為主色,便能讓人聯想至沉穩療癒的空間。
3. KEY COLOR /// BROWN
擺有木製家具、走自然風的店家
如果是以木製家具為中心、呈現自然氛圍的店家,建議使用明顯帶黃色調的咖啡色。若咖啡色的明度夠高,就不會顯得太沉重。
4. KEY COLOR /// BLUE
呈現無機質、走極簡風的店家
店內空間若是採大理石或灰、白等無彩色裝潢,則可選用濁藍色,如此一來便能營造出清澈乾淨及高雅的感覺。
Chapter7 居家用品店的型錄
NG
雖然我用了能讓商品照更搶眼的配色,但好像顯得很有壓迫感。
客戶要求重點
‧設計簡單但講究材質的產品
‧賣點為產品線適用於各種風格的居家空間,充滿開闊與潔淨感
OK
你的設計有點過於正經八百呢……要不要試著改用能呈現出開闊感的顏色呢?
NG
沉重的背景色,造成視覺的擁擠
NG1
雖然可以理解為了使標題顯眼,而將上方顏色調暗的設計心態,但顏色過於沉重,跟照片中的明亮空間不協調。
NG2
照片跟背景色的明度落差過大,讓照片好像被拘禁起來一樣,除了顯得壓迫,也造成空間在視覺上顯得擁擠。
NG3
將詳細內容列表,既顯得死板,也給人一種專業型錄的印象。
NG4
照片均為四方形,尺寸也沒有變化,以致缺乏動態感,形成無聊的版面。
原來顏色甚至會造成空間的寬敞與否……我一直以為只要照片夠顯眼就足夠了
NG1顏色沉重
又暗又深的顏色,形成壓迫的氣氛
NG2顯得擁擠的配色
背景色與照片的明度落差過大,導致空間顯得擁擠
NG3死板的記載方式
以表列方式呈現文字資訊,給人專業型錄的印象
NG4尺寸缺乏變化
照片的大小沒有變化,顯得單調
OK
空間顯得寬廣且充滿開闊感
OK1
顏色雖不搶眼,但有在文字的排版方面下巧思,達成引人注目的設計。
OK2
將底色配合照片的色調,有助於消融界線,演繹出空間的寬闊感。
OK3
只要意識到分類,即便不以線條構成的表格做區隔,也能構成易於閱讀、確實傳達內容的版面。
OK4
將照片區分為主視覺與次要視覺,大幅變更尺寸,即可為版面增添輕快的動態感。
配色POINT!
採用與照片相同的色調作為背景色
便可營造出率性感,並讓空間顯得寬闊喔
對於資訊量大的商品型錄來說,重點在於能否巧妙運用契合產品概念的照片。若想在版面中呈現出空間的寬闊感,建議將背景色的色調調成與照片一致。
不知該怎麼配色時助你一臂之力!
最好學下來的7招配色技法:
No.1 主色(dominant color)配色法
「dominant」意味著「主導」,運用單一色彩來統一色相的配色,便稱作是主色配色法。若是拉近不同顏色之間的明度差距,便可更進一步提升統一感。
配色實例
讓我們來看一看本書中實際運用了主色配色法的範例!
Chapter01 / P41 範例
Chapter02 / P55 範例
在左邊的範例中主色為黃綠色,也因為採用的是明色調的顏色組合,營造出了鮮明輕快的氛圍。而右邊的範例中主色則為綠色,但因採用的是淺灰色調顏色,所以營造出的是穩重的印象。雖然同樣是採用了綠色來建構版面,但色調不同就能呈現出完全不一樣的世界觀喔!
效果
‧可整合世界觀的配色
‧可強化顏色本身帶給人的印象
No.2 主色調(dominant tone)配色法
主色調配色法正如其名所示,指的是具備有統一(主導)色調的配色。在此配色法中只需要使色調相同,色相則是可自由選擇,也因此相較於主色配色法能帶給人更加多彩繽紛的印象。
配色實例
讓我們來看一看本書中實際運用了主色調配色法的範例!
Chapter01 / P28 範例
Chapter02 / P92 範例
左右兩邊的範例中分別採用了明色調與淺色調來整合版面,也因此即便組合了色相不同的顏色也不顯得突兀。若是想在高度整合的世界觀中營造出繽紛感的話,相當推薦使用這項配色技法。
雖然用色相當多元
但因為世界觀穩固完善
所以意象也能清楚傳達!
效果
‧可營造出繽紛的印象
‧在維繫住統一感的同時也有高度的自由發揮空間
No.3 濁色(tonal)配色法
在柔色調、淺灰色調、灰色調、鈍色調這四種色調中組合屬於中明度與中低彩度的中性色的配色,便稱作是濁色配色法。
使用這個配色法可自由選擇色相。
配色實例
讓我們來看一看本書中實際運用了濁色配色法的範例!
Chapter02 / P60 範例
Chapter05 / P145 範例
左邊的範例中的主要色調為淺灰色調,搭配上屬於鈍色調的強調色,營造出自然的風格。右邊的範例中則是以鈍色調為主軸,唯有底色是淺灰色調,是意識到沉穩樸實的老年客群的配色。若想要營造出柔和的氛圍,相當推薦這樣的配色。
可以從四種色調中選色並組合
所以可發揮的空間也比較大呢!
效果
‧帶給人安穩與安心感的配色
‧可展現出柔和且沉穩的氛圍
除此之外還有這樣的技法喔!
‧還有以下這8種配色技法‧
配色技法不僅限於前述幾種。務必也將以下的配色法作為配色知識學下來!
原來配色的方法這麼多呀……
真希望可以將知識與自身的品味結合,提升配色的能力。
對分色(dyad)配色法
「dyads」意為「成對物」,指的是將位於色相環上正對面位置上的補色加以組合的配色。這樣的配色法使用了對比強烈的兩種顏色,可帶給人強烈的印象。
三分色(triad)配色法
「dyads」意為「三個一組」,指的是將落於色相環三等分位置上的顏色加以組合形成的配色。在此配色法中色相的差異雖然大,但卻能顯得平衡協調。
補色分割(split-complementary)配色法
補色分割配色法是將落於主色的補色位置上(以紅色來說即為綠色)兩旁的兩種顏色加以組合後的三色配色的別名。這樣的配色法帶給人同時具有對立性以及相似性的印象。
四分色(tetrad)配色法
四分色配色法指的是將落在色相環平均切割成四等分位置上的四個顏色加以組合所形成的配色。由於這樣的配色法是將兩組補色加以組合之故,所以可帶給人鮮豔繽紛的印象。
知道越多就越好用&越有趣
色彩帶給人的印象
No.3 色調所形成的印象
最後我將介紹12種不同色調所帶給人的印象喔!也可以參考P5的色調圖喔
01鮮色調 vivid tone
色調 彩度最高的色調(純色)
印象 鮮豔 花俏 生動 氣勢
純粹的鮮色調顏色屬於能發揮出色彩本身鮮豔度的色相群,可將顏色所具備的印象發揮至極限,建議使用於製作高注目度的版面時。
02明色調 bright tone
色調 在純色中加入少量白色的明亮色調
印象 活力 年輕 開朗 健康 燦爛 正向
明色調屬於在鮮色調色中加入白色、提升了明度的色相群。也因為其開朗歡樂的印象讓人直接聯想到健康,是健身房經常會採用的顏色;明色調顏色也相當適用於主打小朋友客群的商品上。
03強色調 strong tone
色調 在純色中加入少量灰色的強烈色調
印象 強而有力 充滿熱情 精力旺盛
強色調屬於彩度比鮮色調來得略低一些的色相群,在保有了鮮豔度的同時,也帶給人強而有力的印象。彩度被壓低這點為強色調的顏色帶來份量感以及穩定感。
04深色調deep tone
色調 在純色中加入少量黑色的深色調
印象 濃厚 深沉 和風 古典 厚重
深色調屬於在鮮色調中加入黑色、彩度與明度皆降低的色相群,帶給人沉穩高雅的印象。在意圖呈現出和風世界觀時是相當好用的色調。
色彩學中運用了「色相」、「明度」、「彩度」這三種要素來評估顏色。在分類種類無限多的有彩色時,使用的指標便是以上的色彩三屬性。
色相
有彩色中存在有紅、黃、藍、綠等「調性」的差異,而「色相」則是讓我們得以判斷顏色是偏紅或是偏藍「調性」的標準。
明度
如同其字面上的意義,「明度」指的是色彩的明暗程度。無彩色只存有「明度」。務必記住明度高=接近白色,明度低=接近黑色。
彩度
表示色彩鮮豔程度的標準稱為「彩度」。一個分辨方法是,彩度低=接近白色或黑色、彩度高=彩調搶眼的鮮豔色。
利用色相差距的配色方法
如同下圖所示,將色相排列成環狀的圖便稱為「色相環」!
相似色相配色
相似色的雙色範例
色相環上落在30~60度範圍內的不同顏色稱為相似色相,組合顏色相近的色彩有助於畫面的整合。
互補色色相配色
互補色的雙色範例
色相環上落在相反位置上的顏色稱為互補色。互補色因為顏色差距大,所以用於小範圍能有畫龍點睛之效。
對照色相配色
對照色的雙色範例
色相環上落在120~150度範圍內的不同顏色稱為對照色。跟補色相較下,對照色的顏色較為相似,是相對較容易應用的配色。
適合不同店家裝潢的
關鍵色配色法
為了讓客人踏入店內後的印象能無異於DM,讓我們來看看配色可如何配合裝潢。
1. KEY COLOR /// PINK
暖色系裝潢的店家
店內沙發或織品類採暖色系的店家,最適合使用灰粉色,可營造出略顯華美的印象。
2. KEY COLOR /// GREEN
內有觀葉植物的店家
店內若放有許多觀葉植物,採用偏亮的灰綠色為主色,便能讓人聯想至沉穩療癒的空間。
3. KEY COLOR /// BROWN
擺有木製家具、走自然風的店家
如果是以木製家具為中心、呈現自然氛圍的店家,建議使用明顯帶黃色調的咖啡色。若咖啡色的明度夠高,就不會顯得太沉重。
4. KEY COLOR /// BLUE
呈現無機質、走極簡風的店家
店內空間若是採大理石或灰、白等無彩色裝潢,則可選用濁藍色,如此一來便能營造出清澈乾淨及高雅的感覺。
Chapter7 居家用品店的型錄
NG
雖然我用了能讓商品照更搶眼的配色,但好像顯得很有壓迫感。
客戶要求重點
‧設計簡單但講究材質的產品
‧賣點為產品線適用於各種風格的居家空間,充滿開闊與潔淨感
OK
你的設計有點過於正經八百呢……要不要試著改用能呈現出開闊感的顏色呢?
NG
沉重的背景色,造成視覺的擁擠
NG1
雖然可以理解為了使標題顯眼,而將上方顏色調暗的設計心態,但顏色過於沉重,跟照片中的明亮空間不協調。
NG2
照片跟背景色的明度落差過大,讓照片好像被拘禁起來一樣,除了顯得壓迫,也造成空間在視覺上顯得擁擠。
NG3
將詳細內容列表,既顯得死板,也給人一種專業型錄的印象。
NG4
照片均為四方形,尺寸也沒有變化,以致缺乏動態感,形成無聊的版面。
原來顏色甚至會造成空間的寬敞與否……我一直以為只要照片夠顯眼就足夠了
NG1顏色沉重
又暗又深的顏色,形成壓迫的氣氛
NG2顯得擁擠的配色
背景色與照片的明度落差過大,導致空間顯得擁擠
NG3死板的記載方式
以表列方式呈現文字資訊,給人專業型錄的印象
NG4尺寸缺乏變化
照片的大小沒有變化,顯得單調
OK
空間顯得寬廣且充滿開闊感
OK1
顏色雖不搶眼,但有在文字的排版方面下巧思,達成引人注目的設計。
OK2
將底色配合照片的色調,有助於消融界線,演繹出空間的寬闊感。
OK3
只要意識到分類,即便不以線條構成的表格做區隔,也能構成易於閱讀、確實傳達內容的版面。
OK4
將照片區分為主視覺與次要視覺,大幅變更尺寸,即可為版面增添輕快的動態感。
配色POINT!
採用與照片相同的色調作為背景色
便可營造出率性感,並讓空間顯得寬闊喔
對於資訊量大的商品型錄來說,重點在於能否巧妙運用契合產品概念的照片。若想在版面中呈現出空間的寬闊感,建議將背景色的色調調成與照片一致。
不知該怎麼配色時助你一臂之力!
最好學下來的7招配色技法:
No.1 主色(dominant color)配色法
「dominant」意味著「主導」,運用單一色彩來統一色相的配色,便稱作是主色配色法。若是拉近不同顏色之間的明度差距,便可更進一步提升統一感。
配色實例
讓我們來看一看本書中實際運用了主色配色法的範例!
Chapter01 / P41 範例
Chapter02 / P55 範例
在左邊的範例中主色為黃綠色,也因為採用的是明色調的顏色組合,營造出了鮮明輕快的氛圍。而右邊的範例中主色則為綠色,但因採用的是淺灰色調顏色,所以營造出的是穩重的印象。雖然同樣是採用了綠色來建構版面,但色調不同就能呈現出完全不一樣的世界觀喔!
效果
‧可整合世界觀的配色
‧可強化顏色本身帶給人的印象
No.2 主色調(dominant tone)配色法
主色調配色法正如其名所示,指的是具備有統一(主導)色調的配色。在此配色法中只需要使色調相同,色相則是可自由選擇,也因此相較於主色配色法能帶給人更加多彩繽紛的印象。
配色實例
讓我們來看一看本書中實際運用了主色調配色法的範例!
Chapter01 / P28 範例
Chapter02 / P92 範例
左右兩邊的範例中分別採用了明色調與淺色調來整合版面,也因此即便組合了色相不同的顏色也不顯得突兀。若是想在高度整合的世界觀中營造出繽紛感的話,相當推薦使用這項配色技法。
雖然用色相當多元
但因為世界觀穩固完善
所以意象也能清楚傳達!
效果
‧可營造出繽紛的印象
‧在維繫住統一感的同時也有高度的自由發揮空間
No.3 濁色(tonal)配色法
在柔色調、淺灰色調、灰色調、鈍色調這四種色調中組合屬於中明度與中低彩度的中性色的配色,便稱作是濁色配色法。
使用這個配色法可自由選擇色相。
配色實例
讓我們來看一看本書中實際運用了濁色配色法的範例!
Chapter02 / P60 範例
Chapter05 / P145 範例
左邊的範例中的主要色調為淺灰色調,搭配上屬於鈍色調的強調色,營造出自然的風格。右邊的範例中則是以鈍色調為主軸,唯有底色是淺灰色調,是意識到沉穩樸實的老年客群的配色。若想要營造出柔和的氛圍,相當推薦這樣的配色。
可以從四種色調中選色並組合
所以可發揮的空間也比較大呢!
效果
‧帶給人安穩與安心感的配色
‧可展現出柔和且沉穩的氛圍
除此之外還有這樣的技法喔!
‧還有以下這8種配色技法‧
配色技法不僅限於前述幾種。務必也將以下的配色法作為配色知識學下來!
原來配色的方法這麼多呀……
真希望可以將知識與自身的品味結合,提升配色的能力。
對分色(dyad)配色法
「dyads」意為「成對物」,指的是將位於色相環上正對面位置上的補色加以組合的配色。這樣的配色法使用了對比強烈的兩種顏色,可帶給人強烈的印象。
三分色(triad)配色法
「dyads」意為「三個一組」,指的是將落於色相環三等分位置上的顏色加以組合形成的配色。在此配色法中色相的差異雖然大,但卻能顯得平衡協調。
補色分割(split-complementary)配色法
補色分割配色法是將落於主色的補色位置上(以紅色來說即為綠色)兩旁的兩種顏色加以組合後的三色配色的別名。這樣的配色法帶給人同時具有對立性以及相似性的印象。
四分色(tetrad)配色法
四分色配色法指的是將落在色相環平均切割成四等分位置上的四個顏色加以組合所形成的配色。由於這樣的配色法是將兩組補色加以組合之故,所以可帶給人鮮豔繽紛的印象。
知道越多就越好用&越有趣
色彩帶給人的印象
No.3 色調所形成的印象
最後我將介紹12種不同色調所帶給人的印象喔!也可以參考P5的色調圖喔
01鮮色調 vivid tone
色調 彩度最高的色調(純色)
印象 鮮豔 花俏 生動 氣勢
純粹的鮮色調顏色屬於能發揮出色彩本身鮮豔度的色相群,可將顏色所具備的印象發揮至極限,建議使用於製作高注目度的版面時。
02明色調 bright tone
色調 在純色中加入少量白色的明亮色調
印象 活力 年輕 開朗 健康 燦爛 正向
明色調屬於在鮮色調色中加入白色、提升了明度的色相群。也因為其開朗歡樂的印象讓人直接聯想到健康,是健身房經常會採用的顏色;明色調顏色也相當適用於主打小朋友客群的商品上。
03強色調 strong tone
色調 在純色中加入少量灰色的強烈色調
印象 強而有力 充滿熱情 精力旺盛
強色調屬於彩度比鮮色調來得略低一些的色相群,在保有了鮮豔度的同時,也帶給人強而有力的印象。彩度被壓低這點為強色調的顏色帶來份量感以及穩定感。
04深色調deep tone
色調 在純色中加入少量黑色的深色調
印象 濃厚 深沉 和風 古典 厚重
深色調屬於在鮮色調中加入黑色、彩度與明度皆降低的色相群,帶給人沉穩高雅的印象。在意圖呈現出和風世界觀時是相當好用的色調。