您現在的位置是:電腦技術吧?>? 編程技術 ??>??網頁設計配色教程,網頁設計配色方案??>??正文詳情

網頁設計配色教程,網頁設計配色方案

員建德2019-11-25 11:21:30 人圍觀
簡介設計配色在網頁顏色的應用概率中,根據網頁主題內容的需求,以紅色為主色的網站相對較少,主要用于輔助色和修飾色,達到箔和打效果。它通常和其他顏色混合在一起。本文闡述了

在網頁顏色的應用機率中,根據網頁主題內容的需求,純粹使用紅色為主色調的網站相對較少,多用于輔助色、點睛色,達到陪襯、醒目的效果。

通常都配以其他顏色調和。

本文對網頁設計配色應用實例 進行了具體闡述供閱讀。

  紅色的色感溫暖,性格剛烈而外向,是一種對人刺激性很強的顏色。

紅色容易引起人的注意,也容易使人興奮、激動、緊張、沖動、還是一種容易造成人視覺疲勞的顏色。

  在眾多顏色里,紅色是最鮮明生動的、最熱烈的顏色。

因此紅色也是代表熱情的情感之色。

鮮明紅色極容易吸引人們的目光。

  紅色在不同的明度、純度的狀態(粉紅、鮮紅、深紅)里,給人表達的情感是不一樣的。

  在網頁顏色的應用機率中,根據網頁主題內容的需求,純粹使用紅色為主色調的網站相對較少,多用于輔助色、點睛色,達到陪襯、醒目的效果。

通常都配以其他顏色調和。

  紅色相對于其他顏色,視覺傳遞速度最快。

由于以上的這些紅色傳達出的特性,因此人們喜歡用紅色作為警示符號的顏色,例如:消防、驚嘆號、錯誤提示等等。

  為了讓大家對紅色的理解做更好的區別,下面我們分別對紅色系根據鄰近色、同類色、對比色的搭配做不同的舉例分析。

  1,朱紅色在紅色系里傾向黃色方向,是大紅色加入黃色而得。

在色環表中,純紅色在HSB里為0度,往360度方向呈現的是冷紅色系,0度方向為黃色系。

  整個頁面里,主色調朱紅色面積非常大、確定明顯,輔助色主要由黑色、深紅構成,(數值上選取的是深紅色做標示)。

主色調的R呈現出255最高數值,S中100%,充分標明了紅色最高特性。

輔助色的深紅R為222,B87%,顯示其充當輔助角色的這一特性。

  結論:

  背景色朱紅由于紅色特性明顯,飽和度、明度都非常的高,這里運用了輔助色深紅、黑色壓住并牽制朱紅色搶眼的個性,也同樣能達到突出前景主要圖片內容的目的。

點睛色主要用于標志的突出上,其他導航文字、圖片的部分運用等,調和并達到了不至于使得整個頁面刺激中又透出的沉悶感。

  這類顏色的組合比較容易使人提升興奮度,紅色特性明顯,這一醒目的特殊屬性,比較被廣泛的應用于食品、時尚休閑等等類型的網站

  2,深紅色在原有的紅色基礎上降低了明度而得,是紅色系中的明度變化。

通過上圖的數值顯示看出明度較低。

  這類顏色的組合隨著明度的變暗,比較容易制造深邃、幽怨的故事氣氛。

傳達的是穩重、成熟、高貴、消極的心理感受。

  這個頁面背景色運用了紋樣,是以目前選取的主色調顏色和明度較暗的深紅色結合而的,使得明度稍暗。

  數值上看,主色調也就是背景色的飽和度較高,但是由于降低了明度,顏色變得較沉穩。

輔助色RGB添加了適量的其他顏色,G和B數值區別不大,因此飽和度降低,顏色趨于柔和穩定。

點睛色的加入提亮,頁面視覺效果強化。

  結論 :

  前景色通常要較明顯的區別于背景色,達到臺前的宣傳目的。

當飽和度較低的前景色與背景色變化不明顯時形成的是另外一種柔和統一的效果

  3,玫瑰紅色在色環上實際已經接近冷色,是紅色系中的色相的微妙變化,是紅色系里的冷色系。

我們在HSB中H數值可看出,0度為紅色的最高值,越接近0度數值紅色特性越明顯,否則逐漸冷色傾斜,而該數值偏離0度稍遠。

  這個頁面主要由兩種不同明度、純度的玫瑰色調組成。

兩色數值顯示,我們看到RGB數值中R呈現的數值最高,紅色特性較明顯。

輔助色調的玫瑰色,加入少許G,色調向冷色稍微偏移,也由于加入了G,在HSB數值里,飽和度輕微減弱,但隨著明度增加,色彩趨于艷麗,符合突出前景的目的。

主色調雖然純度達到最高飽和,但由于明度降低,相對于輔色調較沉穩,適合做背景色。

  數值上看,由于背景色和前景色的明度較為接近,加入白色邊框,強烈了前景色于背景色的區分,加強視覺強化效果。

  結論:

  背景色和前景色的明度較接近,顏色給人的視覺表象較悶,加入少量白色劃分使得色彩引導的主次塊面更分明,頁面明快許多。

  這類顏色的組合多用于女性主題,例如:化妝品、服裝等,容易營造出嬌媚、誘惑、艷麗等氣氛

  小編為大家編輯的網頁設計配色應用實例 希望對大家有所幫助!

版權聲明:本文由 員建德 整理編輯。

原標題:網站設計配色,網頁設計 配色

轉載注明出處:http://www.dn9ww09s.icu/program/14295.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 高德地圖手機離線導航,高德地圖離線下載后怎么使用

    高德地圖手機離線導航,高德地圖離線下載后怎么使用 相關圖片高德地圖新版怎么離線作為中國最大的電子地圖,你知道它也有很酷的離線導航功能嗎?如何設置離線導航?接下來,超人軟件編輯將介紹iPhone版高德地圖的離線導航高德地圖現在沒有...

  • 打破玻璃,玻璃

    打破玻璃,玻璃 相關圖片玻璃劃傷本教程介紹如何使用焰火制作碎玻璃的GIF動畫效果。制作方法不是很難,效果也很好。我推薦,希望你喜歡!首先,讓我們看看最終的效果:以下是具體的生產方法:1。下載過...

  • 怎么用手,用手

    怎么用手,用手 相關圖片手相最近,有很多小型的合作演出。當他們的手更新到2.2版之后,就不能使用了。如果不能使用手2.2,我們該怎么辦?下一步,超人軟件將介紹如何做,如果手2.2不能使用。諾手...

  • px rem em,px em rem區別

    px rem em,px em rem區別 相關圖片px和em的像素。相對長度單位。像素PX是相對于顯示屏的分辨率EM是相對長度的單位。相對于當前對象中文本的字體大小。如果當前內聯文本的字體大小不是人為設置的,則它與瀏覽器的...

  • kb4471328安裝失敗,kb4501375安裝失敗

    kb4471328安裝失敗,kb4501375安裝失敗 相關圖片kb4019990安裝失敗蠕蟲還沒有完全解決,出現了更嚴重的病毒。一些用戶擔心。超人軟件站為您提供了多種預防軟件,必要時可以下載。但是,一些用戶報告kb401215安裝失敗。Kb4012kb405451...

  • 掌閱ireader,掌閱ireader老版本

    掌閱ireader,掌閱ireader老版本 相關圖片掌閱ireader經典版本近兩年來,手工閱讀產品深受消費者歡迎。近日,第三代產品ireader light在掌上閱讀Android中發布,這并不是一個普通的升級,因為這款產品是目前最輕的掌閱ireader a6...

  • flash,flash空白關鍵幀

    flash,flash空白關鍵幀 相關圖片flash組件三類一。效果:請參見開頭的“播放”按鈕。單擊“播放”按鈕開始播放音樂并顯示“停止”按鈕。單擊“停止”按鈕停止音樂并顯示“播放”按鈕。然后單擊“播放”按鈕,從...

  • 445端口如何打開,怎么打開端口

    445端口如何打開,怎么打開端口 相關圖片開啟445端口的方法勒索病毒還沒有結束。近日,勒索病毒開始攻擊王者榮耀安卓用戶,而電腦玩家也應引起重視。為了防止勒索病毒入侵,很多用戶通過軟件和系統關閉了445端口,但關...

  • 總監設計師,設計師總監的職責

    總監設計師,設計師總監的職責 相關圖片室內設計總監崗位職責磨一個成熟的產品,設計一個全新的項目,你選擇哪一個?今天Facebook主管的一篇好文章說了許多設計師的心聲。改進和優化已經存在超過五年的復雜產品是非常困...

  • 閃電上征信嗎,閃電貸款上征信嗎

    閃電上征信嗎,閃電貸款上征信嗎 相關圖片閃電借款上人行征信嗎Flash學習是一個非常實用的貸款軟件。在這個軟件中,用戶可以輕松地借錢,而不用擔心月底缺錢。那么在學生會上的信用調查呢?接下來,超人軟件編輯將介紹過...

熱評文章

  • 農行k寶電腦怎么使用,農行k寶怎么用 教你九個步驟

    農行k寶電腦怎么使用,農行k寶怎么用 教你九個步驟 相關圖片手機銀行農行k寶怎么用ABC k寶是ABC公司的安全認證產品。它的外觀與U盤相似。由于PKI認證體系的存在,通用k寶(音頻版)具有很高的安全性。ABC k-treasure通過USB個人網上銀行登錄...

  • 環狀排列,環狀排列的水泡

    環狀排列,環狀排列的水泡 相關圖片環形排列為什么要除n本文主要介紹了Python的圖片排列和環形輸出的方法,涉及到Python使用PIL庫操作圖片的技巧,具有一定的參考價值。有需要的朋友可以參考下面的例子來描述Py環狀圖...

  • vue圓形視頻怎么做,vue視頻不要圓的

    vue圓形視頻怎么做,vue視頻不要圓的 相關圖片怎么用vue編輯視頻你不覺得馮小剛拍的我不是潘金蓮的原型視角看起來很酷嗎?事實上,Vue軟件也可以拍攝圓形視頻。如何拍攝Vue圓形視頻?接下來,超人軟件編輯將向您介紹Vue IPHvue為...

  • 幸運奪寶,鉆石奪寶幸運值

    幸運奪寶,鉆石奪寶幸運值 相關圖片奪寶幸運值多少抽水晶作為一款眾籌軟件,lucky loot以其產品數量多、操作簡單而深受很多人的喜愛。那么幸運的戰利品怎么能贏呢?接下來,編輯將為您帶來一個關于如何使用幸運寶的...

  • 動畫幀數,ios動畫為什么那么流暢

    動畫幀數,ios動畫為什么那么流暢 相關圖片過渡動畫縮放Flash作為網頁制作和動畫制作的專業軟件,操作簡單,功能強大。它已經成為交互式矢量圖形和網絡動畫的事實標準,然而,如果制作出的Flash電影文件很大,往往達數ios動...

  • 守護世紀,世紀守護登錄

    守護世紀,世紀守護登錄 相關圖片守護者世紀戰元免費今天,超人軟件編輯就為大家介紹一下教程,是關于世紀衛士的。作為一種關于孩子成長的教育軟件,在這里您不僅可以隨時與老師了解孩子的最新情況,還可以了...

  • C中優先級,運算符中優先級最高

    C中優先級,運算符中優先級最高 相關圖片vb運算中優先級最高的是計算優先級是基于每種選擇器類型的連接字符串。它是與匹配表達式對應的權重。如果優先級相同,則稍后的CSS將應用于元素注意:元素在文檔樹中的位置不會影...

  • 什么時候能出,虛擬實境什么時候能出

    什么時候能出,虛擬實境什么時候能出 相關圖片靈能百分百什么時候出的N5,作為2017年發布的第一款360手機產品,相信大家最關心的是360手機的n5s何時面世?360手機的N5是什么屏幕?接下來,讓超人軟件編輯為您一一作答,然我什么時...

  • 開機F1,為什么要按f1才能開機

    開機F1,為什么要按f1才能開機 相關圖片開機f1f2怎么取消最近,很多小伙伴報告說他們的電腦是win7系統,他們每次打開電腦都要按F1。那么,如果我按F1鍵啟動win7,我該怎么辦?唉,超人軟件編輯會給你介紹win7電腦開機按f1怎...

  • 狀態協議,bgp協議

    狀態協議,bgp協議 相關圖片hdlc協議一種表示臨時響應的狀態碼,要求請求者繼續執行操作碼說明100(繼續)。請求者應繼續執行請求。服務器返回此代碼,以表明請求的第一部分已被接收,并正在等待其余的10m...

關注微信

变脸官网查询