css

CSS 颜色

下文笔者讲述CSS颜色的相关简介说明,如下所示

CSS中颜色定义

CSS样式表中的颜色值,可使用CSS预定义的颜色名称
   也可以使用十六进制、RGB、HEX、HSL、RGBA、HSLA 值
值 备注 示例
颜色名称 使用颜色名称来设置具体的颜色
如:green、black、white 等
颜色名称不区分大小写(因为css不区分大小写)		 color:green;
十六进制码 使用十六进制码以 #RRGGBB或#RGB(如 #ff0000)的形式设置具体颜色
"#" 后跟 6 位或 3 位十六进制字符(0-9, A-F)		 color:#000;
RGB 通过rgb()函数对 red、green、blue 三原色的强度进行控制
从而实现不同的颜色		 color: rgb(188,0,22);
RGBA RGBA 扩展RGB
在RGB基础上增加alpha通道来设置颜色的透明度
需使用rgba()函数实现		 color: rgba(188,0,0,0.1);
HSL 使用hsl() 函数对颜色的色调、饱和度、亮度进行调节
从而实现不同的颜色		 color: hsl(188,100%,25%);
HSLA HSLA扩展HSL
在HSL基础上增加alpha通道来设置颜色的透明度
需要使用hsla()函数实现		 color: hsla(188,100%,50%,0.5);

CSS中常见的颜色名

颜色名 颜色 颜色名 颜色
lime 浅绿 silver 浅灰色
green 绿色 gray 灰色
orange 橙色 purple 紫色
red 红色 blue 蓝色
teal 蓝绿色 white 白色
fuchsia 品红 yellow 黄色
navy 深蓝 olive 橄榄色
aqua 天蓝 black 黑色
maroon 紫红色     
由于浏览器间存在差异
   所以有些特殊的颜色名,不一定通用
   笔者建议使用十六进制或RGB或其他的颜色表示法

十六进制码

十六进制码:
  指使用一个以#开头6位十六进制数(0~9,a~f)
  表示颜色的方式
  这个六位数可以分为三组
  每组两位
  依次为red、green、blue三种颜色的强度

如：
h1 {
    color: #876700;
}
p {
    color: #90800;
}

获取十六进制颜色值的方法

  可使用识颜软件、PS等获取颜色十六进制
十六进制颜色示例
如:
#87c099、#000000、#336688

RGB

RGB指:
  red、green、blue缩写
  是一种色彩模式
  使用red、green、blue三种颜色来实现各式各样的颜色
 
CSS中使用RGB模式的方法
  设置颜色需要借助rgb()函数，函数的语法格式如下： 
   rgb(red, green, blue)
    参数说明:
	   red、green、blue指三原色红、绿、蓝的强度
       三个参数的取值可以是 0~255 之间的整数
	    也可以是 0%~100% 之间百分比数值
例：
div { color: rgb(188,26, 0); } body { color: rgb(0%,60%, 0%); }

RGBA

RGBA:
   是RGB扩展
   同RGB的不同之处在于多了一个透明度的设置
RGBA需借助RGBA函数返回一个颜色对象
   rgba(red, green, blue, alpha);
    alpha:是一个0~1的值 
	      0代表透明
		  1代表完全不透明
例 
div {
    color: rgba(186, 0, 0, 0.5);
}
p {
    color: rgba(0, 186, 0, 1);
}

HSL

HSL指:
   Hue(色调)
   Saturation(饱和度)
   Lightness(亮度)的缩写
     指一种色彩模式
      可通过对色调、饱和度、亮度三个属性的调节来实现不同颜色的
     CSS中需使用HSL模式需使用hsl() 函数

hsl函数的语法

hsl(hue, saturation, lightness) 语法说明如下：

1.hue

  参数hue指颜色在色盘上的度数(从 0 到 360)
    0 或 360 表示红色，120 表示绿色，240 表示蓝色
hue

2.saturation

参数 saturation 为一个百分比数值
表示色彩的饱和度
   0%表示灰色
   100% 表示全彩
saturation

3.lightness

参数lightness 同样为一个百分比数值
   表示颜色的亮度
   0% 是黑色(没有亮度)，50% 为最合适的亮度（既不发黑也不过亮），100% 是白色（曝光严重）。
lightness

HSLA

她是HSL的一个扩展,后面的A指透明度，是一个0~1的值
 0：表示透明
 1：表示非透明

CSS颜色综合示例

<html>
 <head>
    <title>CSS颜色-linux28.com</title>
    <style>
    p {
        font-size: 18px;
        font-weight: bold;
    }
    #rgb {
        color: rgb(188, 0, 0);
    }

    #rgba {
        color: rgba(188, 0, 0, 0.5);
    }

    #hex {
        color: #ADC890;
    }

    #short {
        color: #ECF;
    }

    #hsl {
        color: hsl(0, 30%, 30%);
    }

    #hsla {
        color: hsla(0, 30%, 30%, 0.5);
    }

    #built {
        color: red;
    }
    </style>
</head>
<body>
    <p id="rgb">
        color: rgb(188, 0, 0);
    </p>
    <p id="rgba">
        color: rgba(188, 0, 0, 0.5);
    </p>
    <p id="hex">
        color: #ADC890;
    </p>
    <p id="short">
        color: #ECF;
    </p>
    <p id="hsl">
        color: hsl(0, 30%, 30%);
    </p>
    <p id="hsla">
        color: hsla(0, 30%, 30%, 0.5);
    </p>
    <p id="built">
        color: red;
    </p>
</body>
</html>
css颜色示例