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安全顏色的例子。