01 10
了解顏色和Web顏色方案
有四種基本配色方案可用於網站。 本文的每個頁面都顯示了配色方案的圖片,以及如何在Photoshop中生成類似的方案。
- 單色
使用相同色調的顏色。 根據添加的白色或黑色的多少,它們可能具有不同的色調或色調。 - 類似
這使用色輪上彼此接近的顏色。 - 補充
這通常被認為是“相反的”,因為互補配色方案中的兩種顏色在色輪上彼此相反。 - 三元
這些顏色在色輪上均勻分佈。
所有的配色方案將使用這個黃色作為基礎顏色。
02之10
單色網絡配色方案
這種配色方案使用我的基色的芥末黃色,並相應地添加一些白色和黑色來淡化和淡化方案。
- 左上方 - 基本顏色#ffe500
- 右上角 - 添加50%白色填充以獲得#fff280
- 左下角 - 添加75%白色填充以獲得#fff8bf
- 右下角 - 添加50%黑色填充以獲得#7f7200
單色配色方案通常是所有配色方案中最簡單的。 色調和陰影的溫和變化使顏色更好地流入彼此。 使用這種配色方案,使您的網站顯得更加流暢和收集。
03之10
更多單色網絡色彩方案
在計劃中增加了20%的黑色正方形以獲得更多顏色。 向您的顏色添加黑色或白色可以為您的調色板創建新的顏色,而不會破壞頁面的色調。
04年10月
類似的Web顏色方案
此顏色方案採用黃色基色,並在Photoshop調色板中為色調添加和減去30度。
- 左上方 - 基本顏色#ffe500
- 右上角 - +30度獲得#99ff00
- 左下角-30度得到#ff6600
- 右下角 - 100%白色#ffffff
類似的顏色可以很好地結合在一起,但有時它們會發生嚴重的衝突。 一定要比你自己,你的家人和朋友更多的人來測試這些計劃。 當他們工作時,他們創建的網站比單色網站更豐富多彩,但幾乎一樣流暢。
10的10
更類似的Web顏色方案
在計劃中增加了20%的黑色正方形以獲得更多顏色。
06年10月
互補網頁配色方案
與其他配色方案不同,互補配色方案通常只有兩種顏色。 基色和它在色輪上相反。 Photoshop可以很容易地獲得補色 - 只需選擇想要補色的區域並按下Ctrl-I即可。 Photoshop會為你反轉。 確保在復製圖層上執行此操作,以免丟失基本顏色。
- 左 - 基色#ffe500
- 正確 - 補充#001aff
補色配色方案通常比其他配色方案引人注目,因此請謹慎使用。 他們最常用於需要突出的部分。
07的10
更多互補網頁配色方案
為了獲得這個版本,我在顏色的下半部分添加了50%的白色,在中心部分添加了30%的黑色。 正如你所看到的,它給了你更多的選擇,但它仍然是一種互補的配色方案。
08年10月
三色網絡色彩方案
三色配色方案由圍繞色輪或多或少均勻間隔的3種顏色組成。 由於色輪是360度,我再次使用顏色選擇器中的色調框來添加和減去基本顏色的120度。
- 左上方 - 基本顏色#ffe500
- 右上角 - +120度得到#e500ff
- 左下角-120度得到#00ffe6
- 右下角 - 100%白色#ffffff
三色配色方案通常會生成非常活躍的網頁。 但是像補色配色方案一樣,它們可以不同地影響人們。 一定要測試。
您還可以創建四色或四色配色方案,其中顏色圍繞色輪等距分佈。
09年10月
更多三色網頁配色方案
和其他例子一樣,我在顏色上添加了30%的黑色方塊以獲得更多的陰影。
10 10
不和諧的Web顏色方案
美麗在旁觀者的眼中,但不是所有的顏色都在一起,這是一個不幸的事實。 不和諧的顏色是比色輪上的間隔大約30度的顏色,並且不是互補的或是三元組的一部分。
不協調的配色方案可能非常令人震驚,應該只用於引起注意。 請記住,因為這些顏色經常會發生衝突,所以您得到的關注可能並不是您正在尋找的。