顏色定義 ⇢ hsl() & rgb()
顏色與透明度定義 ⇢ hsla() & rgba()
hsl() HSL Value
hsl(hue, saturation, lightness)
hsl(色相、飽和度、明度)
hsl(100, 100%, 50%) /* #5f0 */ hsl(235, 100%, 50%, .5) /* #0015ff with 50% opacity */ hsl(235 100% 50%) /* CSS Colors 4 space-separated values */ hsl(235 100% 50% / .5); /* #0015ff with 50% opacity, using CSS Colors 4 space-separated values */
hsla() HSLA Value
hsla(hue, saturation, lightness, alpha)
hsl(色相、飽和度、明度、透明度)
hsla(9, 100%, 64%, 0.5)
rgb() RGB Value
rgb(red, green, blue)
三原色組成函數，以0~255 或 0%~255% 標示顏色數值。
#p1 {background-color:rgb(255,0,0);} /* Red */
#p2 {background-color:rgb(0,255,0);} /* Green */
#p3 {background-color:rgb(0,0,255);} /* Blue */
#p4 {background-color:rgb(192,192,192);} /* Grey */
#p5 {background-color:rgb(255,255,0);} /* Yellow */
#p6 {background-color:rgb(255,0,255);} /* Cerise */
rgba() RGBA Value
rgba(red, green, blue, alpha)
定義顏色透明度，alpha 0.0(完全透明)~1.0(完全不透明)。
#p1 {background-color:rgb(255,0,0);} /* Red */
#p2 {background-color:rgb(0,255,0);} /* Green */
#p3 {background-color:rgb(0,0,255);} /* Blue */
#p4 {background-color:rgb(192,192,192);} /* Grey */
#p5 {background-color:rgb(255,255,0);} /* Yellow */
#p6 {background-color:rgb(255,0,255);} /* Cerise */
