網(wǎng)頁設(shè)計(jì)中的灰色色彩搭配

  • 2020-02-18 20:41:36
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://supportcoffeeroasters.com

【示例】同類灰色頁面(灰色+橙色)示例截圖如圖所示。

c46d75266f2593fe6a3afa7753932519.jpg

【分析】

5f87a2828aad897481adfe1041419012.jpg

該頁面在網(wǎng)頁設(shè)計(jì)時(shí)主要以大面積的灰色系列為主,主色調(diào)為背景色非常明確。部分灰色只在明度上加深了,增強(qiáng)灰色的空間感。

從RGB所呈現(xiàn)的均衡數(shù)值及HSB模式的HS都為0來看,主色調(diào)的淺灰色屬于非常純凈的非色彩,沒有摻雜其他色系進(jìn)去。而輔色調(diào)的兩個(gè)模式上就有些差異,HSB模式的H顯示180°色相上偏青藍(lán)色,有及其微弱的飽和度,明度也較低。

點(diǎn)睛色的SB顯示為正橘紅色且飽和度和明度都為100%,應(yīng)該是及其耀眼的顏色,然而在大面積背景主色調(diào)下,此種耀眼的顏色得到緩解,這正是與灰色配色后顯示出灰色最強(qiáng)烈的特性:削弱緩和刺激耀眼的顏色。點(diǎn)睛色橙色和白色點(diǎn)綴下打破了平面平淡的配色格局,眼前頓時(shí)一亮的感覺。

【點(diǎn)評(píng)】

灰色調(diào)非色彩所構(gòu)成的頁面頗具有獨(dú)特的魅力,整個(gè)頁面呈現(xiàn)出平穩(wěn)緩和的氣質(zhì)。兩個(gè)點(diǎn)睛色橙色和白色起到調(diào)動(dòng)配色頁面的作用。

同類色+多彩色

【示例】灰色搭配應(yīng)用(同類灰色+多種顏色)網(wǎng)頁設(shè)計(jì)示例截圖如圖所示。

7d58415602eb9203b97d93c2d3e78595.jpg

【分析】

三十歲.jpg

這是一個(gè)灰色階變化較多的頁面,形成較有節(jié)奏塊面分明的韻律美感。這一變化改善了灰色容易形成的呆板單調(diào)特性。

從HSB模式數(shù)值來看,主色調(diào)、輔色調(diào)都是非色彩的正灰色,沒有摻雜其他色彩進(jìn)去。點(diǎn)睛色黃色、綠色H數(shù)值上顯示有些色相偏移都略向暖色色環(huán)靠攏,這兩種顏色的特性屬于較顯眼的顏色。另外,兩點(diǎn)睛色粉紅和粉藍(lán)色在色相上已經(jīng)較接近于正色系,明度較高飽和度降低。這4種顏色盡管所使用的面積非常少,但結(jié)合了面積上相對(duì)使用較多的非色彩白色,讓整個(gè)頁面配色雅致的同時(shí)不乏生動(dòng)活躍。

【點(diǎn)評(píng)】在網(wǎng)站建設(shè)時(shí),不同灰色背景的變化,前景使用面積較少的純凈色點(diǎn)綴,這幾種顏色還同樣出現(xiàn)在右上角產(chǎn)生平衡色彩的呼應(yīng)作用,整個(gè)頁面產(chǎn)生雅致和諧的視覺美感。

灰色+對(duì)比色

【示例】灰色與對(duì)比色搭配網(wǎng)頁示例截圖如圖所示。

1.jpg

【分析】

22.jpg

從RGB和HSB模式上可看出主色調(diào)不是純正的非色系,里面摻雜了其他色彩,肉眼識(shí)別及H色相為32范圍上都能看出含有微弱的黃色調(diào)在里面,S13%、B46%分別顯示該種顏色含濃重的灰色,有少量的黃色加入結(jié)合整個(gè)頁面的配色是比較調(diào)和的搭配。輔色調(diào)則是運(yùn)用了比較正的淺灰色。

點(diǎn)睛色主要是由一組橙色、藍(lán)色對(duì)比色構(gòu)成,從雙方的H色相上也能看出來。RGB模式上看到這兩種顏色都或多或少地?fù)诫s了其他的顏色在里面,所以明度純度上呈灰色階傾向。另一點(diǎn)睛色淺黃色相上呈現(xiàn)正黃色,但由于明度非常高因此色彩呈不飽和狀態(tài),盡管如此,在主色調(diào)灰色的背景下還是比較突出的。

【點(diǎn)評(píng)】該頁面依舊以灰色為主導(dǎo)位置,雖然主色調(diào)灰色少量摻雜了黃色,與頁面其他黃色色彩元素較統(tǒng)一調(diào)和。點(diǎn)睛色主要是以兩對(duì)比色做主導(dǎo),相對(duì)其他顏色飽和度較高且面積使用得不少,較響亮和突出產(chǎn)品目的。在主色調(diào)灰黃色特性掌控下卻也達(dá)到醒目又和諧的目的。

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的灰色色彩搭配

當(dāng)前URL:http://supportcoffeeroasters.com/news/wzzz/3165.html

上一篇:網(wǎng)頁設(shè)計(jì)時(shí)的灰色頁面配色

下一篇:網(wǎng)頁設(shè)計(jì)中的灰色色彩搭配(二)

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))