創建Web顏色方案

01 10

了解顏色和Web顏色方案

基本顏色 - 芥末黃色。 J Kyrnin的圖片

有四種基本配色方案可用於網站。 本文的每個頁面都顯示了配色方案的圖片,以及如何在Photoshop中生成類似的方案。

所有的配色方案將使用這個黃色作為基礎顏色。

02之10

單色網絡配色方案

單色網絡配色方案。 J Kyrnin的圖片

這種配色方案使用我的基色的芥末黃色,並相應地添加一些白色和黑色來淡化和淡化方案。

單色配色方案通常是所有配色方案中最簡單的。 色調和陰影的溫和變化使顏色更好地流入彼此。 使用這種配色方案,使您的網站顯得更加流暢和收集。

03之10

更多單色網絡色彩方案

單色網絡配色方案。 J Kyrnin的圖片

在計劃中增加了20%的黑色正方形以獲得更多顏色。 向您的顏色添加黑色或白色可以為您的調色板創建新的顏色,而不會破壞頁面的色調。

04年10月

類似的Web顏色方案

類似的Web顏色方案。 J Kyrnin的圖片

此顏色方案採用黃色基色,並在Photoshop調色板中為色調添加和減去30度。

類似的顏色可以很好地結合在一起,但有時它們會發生嚴重的衝突。 一定要比你自己,你的家人和朋友更多的人來測試這些計劃。 當他們工作時,他們創建的網站比單色網站更豐富多彩,但幾乎一樣流暢。

10的10

更類似的Web顏色方案

類似的Web顏色方案。 J Kyrnin的圖片

在計劃中增加了20%的黑色正方形以獲得更多顏色。

06年10月

互補網頁配色方案

互補網頁配色方案。 J Kyrnin的圖片

與其他配色方案不同,互補配色方案通常只有兩種顏色。 基色和它在色輪上相反。 Photoshop可以很容易地獲得補色 - 只需選擇想要補色的區域並按下Ctrl-I即可。 Photoshop會為你反轉。 確保在復製圖層上執行此操作,以免丟失基本顏色。

補色配色方案通常比其他配色方案引人注目,因此請謹慎使用。 他們最常用於需要突出的部分。

07的10

更多互補網頁配色方案

互補網頁配色方案。 J Kyrnin的圖片

為了獲得這個版本,我在顏色的下半部分添加了50%的白色,在中心部分添加了30%的黑色。 正如你所看到的,它給了你更多的選擇,但它仍然是一種互補的配色方案。

08年10月

三色網絡色彩方案

三色網絡色彩方案。 J Kyrnin的圖片

三色配色方案由圍繞色輪或多或少均勻間隔的3種顏色組成。 由於色輪是360度,我再次使用顏色選擇器中的色調框來添加和減去基本顏色的120度。

三色配色方案通常會生成非常活躍的網頁。 但是像補色配色方案一樣,它們可以不同地影響人們。 一定要測試。

您還可以創建四色或四色配色方案,其中顏色圍繞色輪等距分佈。

09年10月

更多三色網頁配色方案

三色網絡色彩方案。 J Kyrnin的圖片

和其他例子一樣,我在顏色上添加了30%的黑色方塊以獲得更多的陰影。

10 10

不和諧的Web顏色方案

不和諧的Web顏色方案。 J Kyrnin的圖片

美麗在旁觀者的眼中,但不是所有的顏色都在一起,這是一個不幸的事實。 不和諧的顏色是比色輪上的間隔大約30度的顏色,並且不是互補的或是三元組的一部分。

不協調的配色方案可能非常令人震驚,應該只用於引起注意。 請記住,因為這些顏色經常會發生衝突,所以您得到的關注可能並不是您正在尋找的。