1. 程式人生 > 實用技巧 >css中顏色

css中顏色

顏色

如果我們相給頁面設定顏色可以採用多種方法進行設定:

一、命名顏色

假設在設定頁面的顏色時覺得一部分很小的顏色集中就足夠了,就可以直接給定顏色的名稱。css稱這些有名稱的顏色為命名顏色。

命名顏色的關鍵字有限,css定義了17個標準色:淺綠色,黑色,藍色,紫紅色,灰色,橙色,綠色,石灰,栗色,海軍,橄欖,紫,紅,銀,藍綠色,白色和黃色。

顏色名 顏色 顏色名 顏色
aqua 淺綠色 black 黑色
blue 藍色 fuchsia 栗色
gray 灰色 green 綠色
lime 石灰 maroon 紫紅色
navy 海軍 olive 橄欖
orange 橙色 purple 紫色
red 紅色 sliver 銀色
teal 藍綠色 white 白色
yellow 黃色


有的時候也許使用其他顏色值,並不在標準顏色之內的顏色也可以使用,它之所以能起作用,原因是大多數的web瀏覽器能識別多達140個顏色,包括前面說的17種顏色。

(二)、RGB指定顏色

計算機通過組合不同的紅色、藍色、綠色分量來創造顏色。這種組合通常被稱為RGB顏色。可以直接訪問這些顏色,通過調整紅、綠、藍分量來最大限度的控制顏色。所有瀏覽器都支援 RGB 顏色值。

RGB 顏色值是這樣規定的:rgb(red, green, blue)。每個引數 (red、green 以及 blue) 定義顏色的強度,可以是整數三元組表示法:引數介於 0 與 255 之間的整數,或者是百分比值(從 0% 到 100%)。

百分數記法:分別指定白色和黑色,值將指定為:

rgb(100%,100%,100%)
rgb(0%,0%,0%)

整數三元組記法,相同的顏色表示如下

rgb(255,255,255)
rgb(0,0,0)

在百分數記法中也可以使用分數,假設如果向指定某一顏色的紅色分量為25.5%,綠色分量為40%,藍色分量為98.2%,如果使用者代理忽略小數點,就會把這些值取整為與之最接近的整數。當然整數取值法只能使用整數。如下所示:

h2{color:rgb(25.5%,40%,98.2%)} 轉換為 h2{color:rgb(26%,40%,98%)}

無論哪種記法,如果值落在可取範圍之外,都會變動到最接近的範圍邊界。當一個值大於100%或是小於0%都會預設的調整到100%或0%(這是可取的最大和最小值)

h2{color:rgb(200%,-40%,0%)} 轉換為 h2{color:rgb(100%,0%,0%)}

h2{color:rgb(42,500,-20)} 轉換為h2{color:rgb(42,255,0)}

假設有一個顏色為rgb(25%,37.5%,60%),將其轉換為整數記法,百分數乘以255,就會得到63.75、95.625、153。再將這些值取整為最接近的整數,記得到了rgb(64,96,153)。

(三)、十六進位制RGB顏色

所有瀏覽器都支援十六進位制顏色值。

十六進位制顏色是這樣規定的:#RRGGBB,其中的 RR(紅色)、GG(綠色)、BB(藍色)十六進位制整數規定了顏色的成分。所有值必須介於 0 與 FF 之間。大寫小寫都可以。

如果組成十六進位制的三組數各自都是成對的,還允許一種簡寫方法,這種寫法一般都是#RGB

如 h2{color:#FFF}=h2{color:#FFFFFF}

瀏覽器會取一位,並將其複製成兩位。因此#FF0000等價於#F00。

(四)、RGBA顏色值

RGBA 顏色值得到以下瀏覽器的支援:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 顏色值是 RGB 顏色值的擴充套件,帶有一個 alpha 通道 - 它規定了物件的不透明度。

RGBA 顏色值是這樣規定的:rgba(red, green, blue, alpha)。alpha 引數是介於 0.0(完全透明)與 1.0(完全不透明)的數字。

(五)、HSL 顏色

HSL 顏色值得到以下瀏覽器的支援:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue(色調)、saturation(飽和度)、lightness(亮度) - 表示顏色柱面座標表示法。

HSL 顏色值是這樣規定的:hsl(hue, saturation, lightness)。

Hue 是色盤上的度數(從 0 到 360) - 0 (或 360) 是紅色,120 是綠色,240 是藍色。Saturation 是百分比值;0% 意味著灰色,而 100% 是全綵。Lightness 同樣是百分比值;0% 是黑色,100% 是白色。

佛山vi設計https://www.houdianzi.com/fsvi/ 豌豆資源搜尋大全https://55wd.com

(六)、HSLA 顏色

HSLA 顏色值得到以下瀏覽器的支援:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 顏色值是 HSL 顏色值的擴充套件,帶有一個 alpha 通道 - 它規定了物件的不透明度。

HSLA 顏色值是這樣規定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 引數定義不透明度。alpha 引數是介於 0.0(完全透明)與 1.0(完全不透明)的數字。

(七)、web安全顏色

web安全顏色是指,在256色計算機系統上可以避免抖動的顏色,保證網頁顏色可以正確顯示。web安全顏色可以表示為RGB值20%和51(相應的十六進位制值為33)的倍數。另外,0%或0也是一個安全值。

  • 如果使用RGB百分數,要讓所有這三個分量要麼是0%,要麼是能被20整除的數值,例如rgb(40%,100%,80%)或rgb(60%,0%,0%)。
  • 如果使用0~255範圍的RGB值,則分量要麼是0,要麼是能被51整除的數,如rgb(0,204,153)或rgb(255,0,102)
  • 採用十六進位制記法,使用值為00、33、66、99、CC和FF的三元組都認為是Web安全的。這種例子還有#669933、#00CC66和#FF00FF。這說明,web安全顏色的簡寫十六進位制值是0、3、6、9、C和F。因此#693、#0C6、#F0F都是web安全顏色的例子。