<center id="iyacc"><source id="iyacc"></source></center>
  • <center id="iyacc"></center>
  • 
    
  • <ul id="iyacc"><delect id="iyacc"></delect></ul>
  • <strike id="iyacc"><code id="iyacc"></code></strike>
    <strike id="iyacc"><code id="iyacc"></code></strike>
  • <center id="iyacc"><dd id="iyacc"></dd></center><ul id="iyacc"><delect id="iyacc"></delect></ul>

    網(wǎng)頁色彩基礎(chǔ)

    • 2020-01-15 10:44:21
    • 閱讀次數(shù):
    • 作者:盈嵐科技小編
    • 來源:http://www.ww44088.com

    色彩形成

    網(wǎng)頁設(shè)計(jì)中,色彩的形成離不開光的作用,當(dāng)光刺激眼睛時,就會使視覺產(chǎn)生色彩的概念,也就有了現(xiàn)在的這個被色彩渲染得五顏六色的世界,簡單地說,色彩是一種視知覺,是光作用于眼睛的結(jié)果。如果讓一束白光從狹縫射入黑色的房間,并且使光穿過三棱鏡,這時會發(fā)現(xiàn)白光被分離成紅、橙、黃、綠、青、藍(lán)、紫等各種顏色的光,這就是能看到各種不同顏色物體的原因。

    當(dāng)被分解的紅、橙、黃、綠、青、藍(lán)、紫等顏色的光再次經(jīng)過三棱鏡時不再發(fā)生光的分解現(xiàn)象,這樣的光就被稱為單色光。而紅色、綠色、藍(lán)色的光被稱為三原色光。自然界的任何色光都可以由一定比例的三原色光組合而成,如紅色光和綠色光混和可以產(chǎn)生黃色光,紅色光和藍(lán)色光混和可以產(chǎn)生品紅色光,藍(lán)色光和綠色光混和可以產(chǎn)生青色光,紅橙黃綠青藍(lán)紫光、綠色光、藍(lán)色光三者等量混和可以產(chǎn)生白色光。

    紫紅、黃、藍(lán)綠3種顏色稱為色彩三原色,自然界的任何色彩都可以由一定比例的色彩三原色組合而成。理論上色彩三原色等量混和可以得到黑色,紫紅色和黃色混和可以得到紅色,紫紅色和藍(lán)綠色混和可以得到藍(lán)色,藍(lán)綠色和黃色混和可以得到綠色。

    色彩特征

    顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色,而其他所有顏色均屬于彩色。從心理學(xué)和視覺的角度出發(fā),彩色具有3個屬性:色相、明度、純度(彩度)。明度表現(xiàn)了色彩的深淺,色相表現(xiàn)了色彩的種類,純度表現(xiàn)了色彩的鮮艷程度。

    1. 明度(Value)

    明度也叫亮度,指顏色的深淺、明暗程度,沒有色相和飽和度的區(qū)別。不同的顏色,反射的光量強(qiáng)弱不一,因而會產(chǎn)生不同程度的明暗。非色彩的黑、灰、白較能形象地表達(dá)這一特質(zhì)。光量越多,明度越高,反之明度越低。色彩的明度則取決于混色中白色和黑色含量的多少。

    網(wǎng)頁設(shè)計(jì)中,如果底色是黑的,而文字也選用了較深的色彩,那么由于色彩的明度比較接近,訪問者在瀏覽時,眼睛就會感覺很吃力,影響瀏覽的效果。當(dāng)然,色彩的明度也不能變化太大,否則屏幕上的亮度反差太強(qiáng),同樣也會使訪問者在瀏覽時感覺到刺眼。國際上日本色研配色體系(Practi-cal Color Co-ordinate System)用9級來表示明暗,門賽爾則用11級來表示明暗,兩者都用一連串?dāng)?shù)字表示明度的增減變化。

    【示例1】明度網(wǎng)頁示例截圖如圖所示。

    bc976417aa54ef91185e8bd0ecce811a.jpg

    【分析】從圖所示的網(wǎng)頁所選取的4個主要色塊的RGB數(shù)值來看,這4塊色彩組合顯示RGB數(shù)值很高,接近于最高值255。RGB相互間數(shù)值相近,由于有RG的高數(shù)值與B高數(shù)值混合,整個網(wǎng)頁給人的感覺非常協(xié)調(diào),柔和雅致,心情愉悅。

    7a7cdad2baeaa4e93a567fbfa66e457b.jpg

    【點(diǎn)評】在網(wǎng)站建設(shè)時,RGB同時呈現(xiàn)相近的高數(shù)值時,相近等量的色彩相互混合,頁面呈高明度灰色段,協(xié)調(diào)的柔和狀態(tài),令人遐想,對視覺刺激是緩慢的,適合長時間觀看。但由于數(shù)值接近,因此色階平穩(wěn),同時存在著不夠醒目的狀態(tài)。

    2. 色相(Hue)

    色彩的色相也叫色調(diào),簡單地說就是指色彩的種類。色相和色彩的強(qiáng)弱及明暗沒有關(guān)系,只是純粹表示色彩相貌的差異。最初的基本色相為紅、橙、黃、綠、藍(lán)、紫。在各色中間加插一兩個中間色,其頭尾色相,按光譜順序?yàn)榧t、橙紅、黃橙、黃、黃綠、綠、綠藍(lán)、藍(lán)綠、藍(lán)、藍(lán)紫、紫、紅紫、紅和紫中再加個中間色,可制出12基本色相。

    色輪是表示最基本色相關(guān)系的色表。色輪上90°角內(nèi)的幾種色彩稱作同類色,也叫近鄰色或姐妹色。90°角以外的色彩稱為對比色。色輪上相對位置的色叫補(bǔ)色,也叫相反色。

    49fd48f641e5dd327369841f1bd3dc84.jpg

    一般來說,在網(wǎng)頁設(shè)計(jì)中選擇暖色相,即紅色、橙色、黃色、赭色等色彩的搭配,可以使網(wǎng)站顯得溫馨、和煦、熱情。在網(wǎng)頁設(shè)計(jì)中選擇冷色相,即青色、綠色、紫色等色彩的搭配,可以使網(wǎng)站顯得寧靜、清涼、高雅。在網(wǎng)頁設(shè)計(jì)中選擇對比色相,即把色性完全相反的色彩搭配在同一個空間里,如紅與綠、黃與紫、橙與藍(lán)等的搭配,可以產(chǎn)生強(qiáng)烈的視覺效果。

    3. 純度

    純度(Chroma)也叫飽和度,指色彩的鮮艷程度。原色最純,顏色的混合越多則純度逐漸減低。如某一鮮亮的顏色,加入了白色或者黑色,使得它的純度低,顏色趨于柔和、沉穩(wěn)。一種色相純度,也有強(qiáng)弱之分,拿正紅來說,有鮮艷無雜質(zhì)的純紅,也有較淡薄的粉紅,但它們的色相都相同,只是強(qiáng)弱不一。

    純度常用高低來描述,純度越高,色越純,越艷;純度越低,色越澀,越濁。純色是純度最高的一級。色彩純度的高低受物體表面結(jié)構(gòu)、照射光源的特點(diǎn)以及視覺生理特性的影響。

    掌握明度、色相和純度3個方面的知識,能產(chǎn)生良好的色彩感。

    【示例2】純度網(wǎng)頁示例截圖如圖所示。

    4b7681c12717dd2444ba21971b07e690.jpg

    【分析】

    H 213 S 99% B 79%H 327 S 85% B 97%

    圖所示的網(wǎng)頁中選取了主要的兩種色系為組合。運(yùn)用HSB數(shù)值模式更易于理解分析該網(wǎng)頁的純度情況,我們看到藍(lán)色S數(shù)值呈現(xiàn)100%具有相當(dāng)高的飽和度,B明度為80%,玫瑰色S飽和度數(shù)值為85%,B明度為97%。當(dāng)飽和度和明度同時呈最高值時,色彩對視覺的刺激強(qiáng)度達(dá)到最高狀態(tài)。由于藍(lán)色的明度稍低,飽和度較高,而玫瑰色的明度較高,該顏色純度隨之加強(qiáng),因此玫瑰色相對藍(lán)色對人的視覺刺激更強(qiáng)烈。

    【點(diǎn)評】

    HSB模式中S和B呈現(xiàn)的數(shù)值越高,飽和度明度越高,頁面色彩強(qiáng)烈艷麗,對視覺刺激是迅速的,醒目的效果,但不易于長時間的觀看。以上兩種顏色的S數(shù)值接近,是強(qiáng)烈的狀態(tài)。H顯示的度是代表在色輪表里某個角度所呈現(xiàn)的色相狀態(tài),相對于SB來說,意義不大。

    當(dāng)前文章標(biāo)題:網(wǎng)頁色彩基礎(chǔ)

    當(dāng)前URL:http://www.ww44088.com/news/wzzz/3157.html

    上一篇:設(shè)置圓潤的欄目模塊

    下一篇:認(rèn)識RGB與HSB

    網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號)
    亚洲bt欧美bt中文字幕,囯产剧情亚洲精品无码一页,国产欧美va欧美va香蕉在,国产激情久久99久久 亚洲国产视频95 婷婷六月在线视频中文字幕
    <center id="iyacc"><source id="iyacc"></source></center>
  • <center id="iyacc"></center>
  • 
    
  • <ul id="iyacc"><delect id="iyacc"></delect></ul>
  • <strike id="iyacc"><code id="iyacc"></code></strike>
    <strike id="iyacc"><code id="iyacc"></code></strike>
  • <center id="iyacc"><dd id="iyacc"></dd></center><ul id="iyacc"><delect id="iyacc"></delect></ul>