CSS顏色
在CSS中的顏色可以通過以下方法來指定:
- 十六進制顏色
- RGB顏色
- RGBA顏色
- HSL顏色
- HSLA顏色
- 預定義/跨瀏覽器顏色名
十六進制顏色
十六進制顏色值在所有主流瀏覽器的支持。
十六進制顏色與規定的:#RRGGBB,其中的RR (red) ,GG (green)和BB (blue)十六進制整數指定顏色的成分。 所有的值必須是00和FF之間。
例如,#0000FF值呈現為藍色,因為藍色分量被設置到它的最高值(ff)以及其他被設置為00。
例
定義不同的顏色HEX:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
試一試» RGB顏色
RGB顏色值在所有主流瀏覽器的支持。
:一個RGB顏色值與指定的rgb(red, green, blue) 。 每個參數(紅,綠,藍)定義的顏色的強度,並且可以是0到255或百分比值之間的整數(from 0% to 100%)
例如, rgb(0,0,255)值呈現為藍色,因為藍色參數被設置為它的最高值(255)和其他人都設置為0。
此外,以下的值定義等於顏色: rgb(0,0,255)和rgb(0%,0%,100%)
例
定義不同的RGB顏色:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
試一試» RGBA顏色
RGBA顏色值都在IE9 +,火狐3 +,Chrome瀏覽器,Safari和Opera中10+的支持。
RGBA顏色值是RGB顏色值的擴展用alpha通道 - 它指定該對象的透明度。
:一個RGBA顏色值與指定的rgba(red, green, blue, alpha) 。 阿爾法參數之間0.0的數(fully transparent)和1.0 (fully opaque) 。
例
定義具有透明度不同的RGB顏色:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
試一試» HSL顏色
HSL顏色值都在IE9 +,火狐,Chrome,Safari和Opera中10+的支持。
HSL代表色調,飽和度和亮度 - 和表示的顏色的圓筒坐標表示。
:一個HSL顏色值與指定的hsl(hue, saturation, lightness) 。
色調是色輪度(from 0 to 360) - 0 (or 360)是紅色,120是綠色,240是藍色的。 飽和是百分比值; 0%意味著灰色的陰影和100%是全彩。 明度也是百分比; 0%是黑色,100%是白色的。
例
定義不同的顏色HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
試一試» HSLA顏色
HSLA顏色值都在IE9 +,火狐3 +,Chrome瀏覽器,Safari和Opera中10+的支持。
HSLA顏色值是HSL顏色值的擴展,帶有一個alpha通道 - 它指定對象的不透明度。
:一個HSLA顏色值與指定hsla(hue, saturation, lightness, alpha) ,其中所述α-參數定義的不透明度。 阿爾法參數之間0.0的數(fully transparent)和1.0 (fully opaque) 。
例
定義不同顏色的HSL與透明度:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
試一試» 預定義/跨瀏覽器顏色名稱
140顏色名稱預先定義的HTML和CSS顏色規範。
看看表預定義的顏色名稱 。