上一节:
下一节:

  CSS 颜色值参考

  • CSS颜色

    CSS中的颜色可以通过以下方法指定：

    • 十六进制颜色
    • RGB颜色
    • RGBA颜色
    • HSL颜色
    • HSLA颜色
    • 预定义/跨浏览器颜色名称

  • 十六进制颜色

    十六进制颜色指定为：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）十六进制整数指定颜色的分量。所有值必须介于00和FF之间。例如，＃ff0000值呈现为红色，因为红色组件设置为其最高值（ff），其他组件设置为00。

    #p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */
    尝试一下

  • RGB颜色

    使用rgb()函数指定RGB颜色值，该函数具有以下语法：
    rgb(red, green, blue)
    每个参数（红色，绿色和蓝色）定义颜色的强度，可以是0到255之间的整数或百分比值（从0％到100％）。例如，rgb（0,0,255）值呈现为蓝色，因为蓝色参数设置为其最高值（255），其他值设置为0。此外，以下值定义相同的颜色：rgb（0,0,255）和rgb（0％，0％，100％）。

    #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颜色值是RGB颜色值的扩展，带有alpha通道 - 指定对象的不透明度。使用rgba()函数指定RGBA颜色，该函数具有以下语法：
    rgba(red, green, blue, alpha)
    alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。

    #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代表色调，饱和度和亮度 - 表示颜色的圆柱坐标表示。使用hsl()函数指定HSL颜色值，该函数具有以下语法：
    hsl(hue, saturation, lightness)
    色调是色轮上的度数（从0到360） - 0（或360）是红色，120是绿色，240是蓝色。饱和度是一个百分比值; 0％表示灰色阴影，100％表示全彩色。亮度也是一个百分比; 0％为黑色，100％为白色。

    #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颜色值是HSL颜色值的扩展，带有alpha通道 - 指定对象的不透明度。使用hsla()函数指定HSLA颜色值，该函数具有以下语法：
    hsla(hue, saturation, lightness, alpha)
    alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。

    #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 */
    尝试一下

  • 预定义/跨浏览器颜色名称

    在HTML和CSS颜色规范中预定义了140种颜色名称。查看预定义颜色名称表。

上一节:
下一节: