網頁設計配色基礎:RGB與HSB

2020-12-17 站長之家

在實用美術中,常有"遠看色彩近看花,先看顏色後看花,七分顏色三分花"的說法。
  
這也就說明,在任何設計中,色彩對視覺的刺激起到第一信息傳達的作用。因此,對色彩的基礎知識的良好掌控,在網頁設計中才能做到遊刃有餘。

為了使下面的網頁配色分析更易於理解,我們先來了解色彩的RGB模式和HSB模式。

■ RGB

RGB是表示紅色綠色藍色又稱為三原色光,英文為R(Red)、G(Green)、B(Blue),在電腦中,RGB的所謂"多少"就是指亮度,並使用整數來表示。

通常情況下,RGB各有256級亮度,用數字表示為從0、1、2至255。雖然數字最高是255,但0也是數值之一,因此共256級。按照計算,256級的RGB色彩總共能組合出約1678萬種色彩,即256×256×256=16777216。通常也被簡稱為1600萬色或千萬色。也稱為24位色(2的24次方)。

對於單獨的R或G或B而言,當數值為0時,代表這種顏色不發光;如果為255,則該顏色為最高亮度。因此當RGB三種色光都發到最強的亮度,純白的RGB值就為255,255,255。屏幕上黑的RGB值是0,0,0。R,意味著只有紅色存在,且亮度最強,G和B都不發光。因此最紅色的數值是255,0,0。同理,最綠色就是0,255,0;而最藍色就是0,0,255。黃色較特殊,是由紅色加綠色而得就是255,255,0。

 

 

RGB模式是顯示器的物理色彩模式。這就意味著無論在軟體中使用何種色彩模式,只要是在顯示器上顯示的,圖像最終就是以RGB方式出現。

■ HSB
  
是顏色分為色相、飽和度、明度三個因素。英文為H(Hue)、S(Saturation)B(Brightness)飽和度高色彩較豔麗。飽和度低色彩就接近灰色。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到純白,最低得到純黑。一般淺色的飽和度較低,亮度較高,而深色的飽和度高而亮度低。

 


相關焦點

  • 【設計課堂】平面設計 寫給網頁設計師的基礎配色理論
    基於「色彩一致」的原理,有兩種配色法最為常見:三角對立法與複色搭配法,我們將稍後再細談這兩種方法 。當你能真正理解和掌握「色彩一致性」這一原理之後,毫無疑問你的設計水準也會躍升一個層次。將網頁劃分為色彩明顯不同的內容有助於減輕用戶的視覺疲勞和引導用戶的注意力,這應當歸功於色彩的對比效果。
  • 網頁設計HTML_CSS_VC#語言描述的網頁
    WWW_WEB_入門實踐—網頁設計HTML_CSS_VC#語言描述的網頁網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • 網頁設計HTML_CSS_VB語言描述的網頁
    WWW_WEB_入門實踐—網頁設計HTML_CSS_VB語言描述的網頁--VS平臺網頁內容與表現形式一般新聞或科技報導
  • 【51rgb】零基礎JavaScript視頻教程合集-05 06課
    51rgb在線教育讓一切學習都變得簡單起來。本次課程重點講解isNaN和setAttribute兩個函數的用法。來聽一聽吧,其實常用的就這麼幾句話。掌握之後拿20000+高薪不是事!ps:由於手機屏幕較小,如果看不清的話,還請用電腦前往51rgb官方網站查看<body><h1>51rgb網站 萬晨曦老師授課</h1><p
  • 網頁設計中如何配色?感受不一樣的視覺盛宴
    不同顏色的象徵意義和相對應的網頁設計成功案例。由此可見,網站頁面設計中色彩搭配的技巧一為先準主題色調整。網站頁面設計巧二:遵循網頁設計色彩搭配原則在網頁設計色彩搭配中,除了考慮顏色、網站本身具有的特點外還要遵循並體現一定的藝術性和規律性。我們最在網頁設計中常用的幾個顏色為藍色、綠色、橙色,以及暗紅色。
  • 一分鐘搞定PPT配色丨附24個PPT配色網站
    所以,當你要給PPT設置配色時,可以打開分享配色的網站,直接吸取,搞定PPT配色方案。那麼,有哪些配色方案的網站呢?color.hailpixel.com第③類如果你喜歡使用漸變色的PPT設計,對照著調整柱狀圖、餅圖等圖表的配色。
  • 《Web Designer Idea設計師談網頁設計思維》
    ,長期研究網頁視覺設計。  曾出版暢銷書籍《網站設計與網頁配色實例精講》、《個性化網頁設計與鑑賞》,作品收錄於圖集《設想》一書中。其中《網站設計與網頁配色實例精講》一書多次加印,並被改為繁體版,發行於港臺地區。
  • CSS基礎—元素背景純色填充
    在網頁設計中,有時需要對元素的背景進行填充。元素的背景包括元素的內容區域,內邊距和四邊邊框,但不包括元素的外部邊距。填充背景可以使用純色、漸變色和圖片。使用純色填充元素背景的樣式標籤是background-color。
  • 網頁banner設計基礎篇
    網頁設計設計過程中,banner圖是整個網頁中,圖片面積最大,位置最顯眼的區域,甚至一個好看的網站就取決於banner的設計。,設計的原理還是相同的,只是banner要考慮整體網站的結構,是否協調,設計上相對平面設計要簡單很多。
  • 網頁設計基礎:Div+CSS布局入門教程
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 網頁設計基礎:Div+CSS布局入門教程
  • 這十個網際網路巨頭的網站配色數據拿去!
    在網際網路上,一個好的網頁配色能叫人眼前一亮,甚至產生極大的品牌效應,好比「阿里橙」、「鏈家綠」等等。來自美國的一位設計師Paul Hebert爬取了全球前10大網站的網頁配色數據,發現了一些有趣的現象: 哪種顏色最受歡迎?在潛移默化中,這些熱門網站又向你灌輸了怎樣的用色傾向呢?找出熱門網站的配色偏好我曾對全球那些大型熱門網站的網頁配色感到好奇,於是決定找出答案。
  • 臺灣網站設計案例賞析:怎麼設計美觀網頁
    雖然網站設計的風格千差萬別,但同一文化地區的網站設計有趨同趨勢。但趨同不是完全相同,一些臺灣地區企業網站,其設計風格和大陸略有不同,但也有很多值得參考的地方。下面就從幾個臺灣網站設計案例來給大家分析一下,怎麼做好臺灣網站建設。
  • UI設計配色大全!
    還有配色素材可下載。本文僅是個人總結的和見解,不作標準規範;希望此文的總結能夠幫助一些熱愛設計又為配色而苦惱的朋友,共同學習,共同進步。     每個APP都會有一套配色方案,並在主要區域使用其基礎色彩。正因為有無數種色彩組合的可能,在設計一個新的APP時,人們往往很難決定一個效果好的方案。1.1色彩數量     在創建配色方案時,需要考慮很多因素,包括品牌色彩及色彩在你所在區域的特殊意義,保持色彩組合簡潔有助於改善用戶體驗。
  • 北京網頁設計中的圖文如何做好排版
    如果網站的首頁設計沒有美感也不夠整潔,更不符合企業自身的形象,給人帶來的印象並不好,對企業而言也是不太好,那麼在北京網頁設計要怎樣才能夠使得圖文排版做得更好呢?第二, 圖片和文字出現不要太多北京網頁設計網頁設計要有文字,圖片,互相的搭配可以讓人們的印象更好,但是建議的是網站上的圖片和文字出現不要太多,一方面是因為大量高清的圖片會影響網站的加載,用戶再打開網頁時會出現緩存,不利於用戶的體驗,還有文字略多也是影響了用戶的直觀感受,太多的文字並沒有那麼多人想去了解。
  • RGB鍵鼠弱爆了,真正的玩家都是給馬桶裝RGB燈
    影響多深遠?遠到有人把過去的十年,總結成rgb佔領PC的十年。 rgb的入侵是從外到內的。光鍵鼠外設光芒奪目還不夠,內存、風扇、水冷等零件廠商沒多久也紛紛著了道,開始給這些平時各位幾乎不會看幾眼的東西安排上rgb。
  • HTML|前端網頁的設計基礎知識
    1、關於html簡介html指的是超文本標記語言,是用來描述網頁的一種語言。且其並未為一種程式語言,而是一種標記語言(一套標記標籤),以此為基礎來描述網頁。4、總結學習前端網頁是一個不斷學習並發現新知識的過程,更是一個突破自我的過程。當然伴隨我們的是一個個枯燥的代碼,只有做好心中的覺悟,才能真正的去展現自我價值。
  • 2017年網頁設計流行趨勢盤點
    但是在網頁設計的一部分中適當使用下劃線可以緩解這個問題,同時引起對下劃線文字的注意。Simon Lee Gallery 和 Hoohaa Design 都使用一個簡單的下劃線,使之有足夠的空間將眼睛拉到某些文字。
  • 淘寶美工設計有沒有發展前途?零基礎如何去學淘寶美工設計
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享 淘寶美工設計有沒有發展前途?零基礎如何去學淘寶美工設計?在這個日益激烈的經濟社會裡,想要穩固立足於職場之中,沒有一技之能,談何容易。
  • 11個在新終端上的網頁設計趨勢
    這樣的夢需要幾個元素:優秀的配色,直觀的設計,良好的交互性和快的響應速度。此外,永遠不要低估簡約的力量。2011年,你的設計不但要考慮筆記本、桌上型電腦,還要考慮智慧型手機、上網本和平板電腦等設備。你都準備好了嗎?2011年網頁設計趨勢有何變化?