首頁?>?知識?資訊?>?網(wǎng)站設計的網(wǎng)頁色彩概論?>?正文

網(wǎng)站設計的網(wǎng)頁色彩概論

2020/5/17 0:00:00 · 稿源:傳誠信

色碼表英文為Color code table,是網(wǎng)站設計師在做設計時,挑選顏色常常會用到的參考表,通常使用顏色有三種不同的寫法,分別是使用顏色的英文名稱、十六進位色碼以及RGB、HSL、Hex...而網(wǎng)站設計師通常是使用的16進位色碼比較多。


網(wǎng)站設計的網(wǎng)頁色彩概論

以下針對顏色先來做個基本介紹

RGB

三原色光模式(RGB color model),又稱RGB顏色模型或紅綠藍顏色模型,是一種加色模型,將紅(Red)、綠(Green)、藍(Blue)三原色的色光以不同的比例相加,以合成產(chǎn)生各種色彩光。

而網(wǎng)站主要使用的為sRGB,sRGB 色域較小,一般我們的電腦螢幕僅能顯示sRGB 色域,因此較適合用于網(wǎng)站設計,一般的電腦螢幕、軟體、相片沖印的預設狀態(tài)都是以sRGB為預設值。

每像素24位元

每像素24位元(bits per pixel,bpp)編碼的RGB值; RGB色彩在網(wǎng)站設計時的標記方式是RGB(0~255 , 0~255, 0~255),其中括弧內(nèi)以逗號分隔的三組數(shù)值恰好就是(R, G, B) 的色彩數(shù)值,所以數(shù)值會是0~255 共256個數(shù)值的這個區(qū)間

  • (0, 0, 0)是黑色

  • (255, 255, 255)是白色

  • (255, 0, 0)是紅色

  • (0, 255, 0)是綠色

  • (0, 0, 255)是藍色

  • (255, 255, 0)是黃色

HSL色彩( HSL color )

HSL色彩是通過對H(hue)色相,S(saturation)飽和度,L(lightness)亮度。三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的,HSL即是代表色相,飽和度,明度三個通道的顏色,取值范圍是0°~360°的圓心角,每個角度可以代表一種顏色。

H(hue)色相

360°/0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅


S(saturation)飽和度

0%~100%的值描述了相同色相、明度下色彩純度的變化。數(shù)值越大,顏色中的灰色越少,顏色越鮮艷,呈現(xiàn)一種從理性(灰度)到感性(純色)的變化.
?

L(lightness)亮度

0%~100%的取值范圍。數(shù)值越小,色彩越暗,越接近于黑色;數(shù)值越大,色彩越亮,越接近于白色
?

網(wǎng)站16進位色彩( hex color )

在HTML和CSS中使用3位元組共6個十六進制數(shù)字表示一種顏色,每位元組從00到FF,相當十進位數(shù)字從0到255,按順序前兩位是紅色的值,中間兩位是綠色的值,最后兩位是藍色的值。16進位碼的色彩標示是由一個井號(#)開始,在接著后面帶6個數(shù)字來表示。

  • 0 代表最低

  • 8 代表中間

  • 9 之后是 A

  • F 代表最高

FF為最大數(shù),代表十進制255。比如白色是R、G、B三個顏色最大,在網(wǎng)站代碼便是:#FFFFFF。黑色是三個顏色為0,在網(wǎng)站代碼便是:#000000。

使用范例:

#000000 -黑色-三組的兩個數(shù)字皆為 0

#FFFFFF??-白色-三組的兩個數(shù)字皆為F

#FF0000??-紅色-純粹紅色的最高值,所以前兩個數(shù)字為F,因為不包含任何的藍色與綠色,所以后兩組的兩個數(shù)字為0

#0000FF??-藍色-純粹藍色的最高值,所以后兩個數(shù)字為F,因為不包含任何的紅色與綠色,所以前兩組的兩個數(shù)字為0

#00FF00??-綠色-純粹綠色的最高值,所以中間兩個數(shù)字為F,因為不包含任何的紅色與藍色,所以前后兩組的兩個數(shù)字為0

#FFFF00??-黃色-純紅色與純綠色的結(jié)合,所以前兩組的兩個數(shù)字為F

  • 相關推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354