加深配色的感覺和多樣的配色方法

學號 :9622019M 姓名 : 呂志庭

簡介

• 網頁顏色的選擇很重要，不過更重要的是如何組合所選的顏色。就好像選擇染髮的顏色，也要配合臉蛋的色澤一樣，這就是配色的感覺。

• 好看配色和不好看配色之間，並沒有很明確的判定基準，就像美醜是相對的，好看的配色和不好看的配色之間，也沒有絕對的定義。

• 所以我們就來看看根據顏色屬性或是顏色排列方式的不同，所產生的不同配色效果。

如果了解配色原理的話，便可以創造漂亮的設計

配色原理• 配色：將兩種以上的色彩加以配置，受其色彩、面

積大小比例的影響，所產生新的視覺效果。• 考量因素

– 配合網站內容本身的性質。– 版面中所佔的面積與位置。

色相的關係 1/2

• 色環最能表示色相彼此間的關係

• 以一顏色為基準色，配色的類型可區分為– 同一色相– 類似色相– 互補色相

色相的關係 2/2

• 同一色相：– 相同色相，但採不同的色

調的顏色配色，如淡紅與鮮紅。

• 類似色相 :– 即相鄰的顏色，如藍色與

靛色。

• 互補色相 :– 即完全相對的顏色，如紅

色與青綠色。

色調的關係 1/2

• 色調：以顏色的明暗程度來區分，各色相所呈現不同的灰階。

• 以一色調為基準，依變化色調間距離來進行配色，可區分為– 同一色調– 類似色調– 互補色調

色調的關係 1/2

• 同一色調：同一色調，但採不同的色相的顏色配色，如淡紅與淡黃色的搭配。

• 類似色調：色調相鄰，如極淡色調與淡色調間的顏色搭配。

• 互補色調：相對色調是指配色顏色間，色調距離遠的顏色，如極淡色調與鮮明色調

運用色相要如何配色呢 ?

• 運用色相配色可以清楚地達到有條理及強調的效果，運用互補色對比，兩種顏色互相都被襯扥出，使人感到很明快，差不多色調的配色給人有條理又安全感的配色。

*

色相配色特徵 :多采多姿的變化感• 互補色對比配色 : 強調、明快感• 類似色調配色 : 條理、安全

1.相對色相，類似色調的配色*

相對色相，類似色調的配色特徵 :有安全感的變化性• 高彩度的配色 :強列鮮明的印象• 低彩度的配色 :沉靜穩重的印象

*• 背景色 : 背景運用的顏色。

• 主要色 : 主角的顏色可以清楚地表現網頁內容和性質的顏色。

• 輔助色 : 配合主要色給人整體印象的顏色。

• 強調色 : 表現配色的重點、強調點的顏色，通常只佔網頁較小的頁面。

2.相對色相，相對色調的配色*

相對色相，相對色調配色特徵 : 變化感，律動感• 隨著顏色的色相和色調，需要調整頁面大小比

3.有彩色和無彩色*

無彩色和有彩色的配色特徵 :無彩色的面積較多的話較有安定感• 高彩度的配色 :輕快• 低彩度的配色 :厚重

要如何運用色調配色

• 和色相配色相比，色調配色是強調感覺的配色方法。色相相同或色相相似，不同的色調配色可以產生更多變化。

*

調配色 :以色調變化為主體的配色• 明亮感覺的色調 : 鮮明的印象• 暗的感覺的色調 : 沉穩的印象

1.同一 /類似色相類似色調的配色*

類似色相，類似色調的配色特徵 : 沉穩與停頓的印象• 常使用在表現某種色相一貫的印象情況下

2.同一 /類似色相，相對色調的配色*

類似色相，相對色調的配色特徵 : 有強調一致感的效果

• 色調的差異越大就留下越深的印象

規則又有韻律感—漸層(Gradation)配色法

• 色和色之間的排列方法為主體的配色方法。紅、橙、黃、綠、藍、靛、紫各種顏色緩緩的變換，就向彩虹一樣，就是漸層配色的方法

強弱對比效果的展現—區分(Separation)配色法

• 在顏色之間加入區分的顏色，以這種方式產生強弱分明的感覺，是一種鮮明的配色方法。

只強調一點—單一配色法• 只強調一種顏色的配色方法，雖然只運用一種顏

色，在平淡的色調中加入鮮明的色調當強調色的這種配色方法給人很深刻的印象。

報告結束 !!