colors in css[翻译]

在css中颜色值有 5中书写方式：

• RGB and RGBA
• Hexadecimal
• Keywords (+transparent and currentColor)
• HSL and HSLA
• System colors

RGB

rgb

rgb故名思议是(red,green,blue)不同色值设置。
rgb值设置有4中方式，其中有2种可以用在css中，另外的2种只是一种定义。

• 百分比 % 设置 从0% (black) to 100%(white)
• 整型设置 int , 从 0(black) to 255(white), 255这种是 8进制的一种设置
• 浮点型(float number) from 0 to 1(0.58935),这种 css 不可用
• 更大的整型 10,16,24,32,48,64位的数，这种css不可用

.black { /* I’m black! */
	color: rgb(0, 0, 0);
	color: rgb(0%, 0%, 0%);
}

.white { /* I’m white! */
	color: rgb(255, 255, 255);
	color: rgb(100%, 100%, 100%);
}

.purple { /* I’m medium purple! */
	color: rgb(128, 0, 128);
	color: rgb(50%, 0%, 50%);
}

.light-purple { /* I’m fuchsia! */
	color: rgb(255, 0, 255);
	color: rgb(100%, 0%, 100%);
}

.dark-purple { /* I’m deep purple! */
	color: rgb(64, 0, 64);
	color: rgb(25%, 0%, 25%);
}

上面的rgb值设置，百分比和 int 都表示同一个值，大多经常使用int设置色值

rgba

rgba 指的是 (red,green,blue,alpha) ，alpha 指alpha 通道。
alpha值设置一般用 0——1 的float(浮点型)设置如(0.1-1)。
一般的rgb值就是默认alpha值为1

/*下面的 每个类里的color 都表示同一个色值*/
.black { /* I’m half transparent black! */
	color: rgba(0, 0, 0, 0.5);
	color: rgba(0%, 0%, 0%, 0.5);
}

.white { /* I’m 2/3 transparent white! */
	color: rgba(255, 255, 255, 0.33);
	color: rgba(100%, 100%, 100%, 0.33);
}

.red { /* I’m fully transparent red, so kind of invisible */
	color: rgba(255, 0, 0, 0);
	color: rgba(100%, 0%, 0%, 0);
}

rgba 用法 下面例子

.parent {
	background-image: url(‘my-picture.jpg’);
}

.child {
	background: rgba(255, 255, 255, 0.75);
	color: rgb(51, 51, 51);
}

这个例子设置child色值为透明度为75%的白色，而不影响parent background的可读性等。

alpha设置时(0.5)等，可以省略前面的 0 直接 rgba(0,0,0,.5)
rgba的兼容性不是很好，不支持IE6,IE7,IE8

Hexadecimal

Hexadecimal = 十六进制
什么是css colors 十六进制呢？
css colors十六进制是由 3到6位字符组成其中包含 0-9整型数和A-F的字母，例如红色(red) 是 (#f00)。
详细的说，十六进制字符是由rgb 生成，6位字符串，前2位代表 red，3-4位值代表 green，5-6位代表 blue 。

rgb可以直接替换成十六进制字符
看到上面有 3位字符的，是因为red值是#ff0000 这种连续2个数值相同的才可以简写。如果连续2个值不一样不能用简写方式

• 十六进制不支持rgba 那种透明度值的加入 *

    .red { /* I'm  red */
        color: #ff0;
    }
    .white { /* I'm white */
        color: #ffffff;
    }

Keywords

css通用keywords

这里的keywords指的是 color keywords。事实上最常用的十六进制表示色值这个并不友好。并不能一目了然的知道是什么颜色。rgb 比十六进制稍微好点。
color keywords指 red,green等这些，在html4.01提出了16个不同keywords 标准。

Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

css2.1的时候添加了orange 这个特殊的关键词，到css3的时候又添加130个，一共有147个，其中有 134个 non-gray, 13个gray。
参照网站有
http://meyerweb.com/eric/css/colors/
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

147个keywords兼容性非常好，除了IE6

special keywords

有2个比较特殊的keywords，不是rgb三种色彩的组合。
transparent 和 currentColor

transparent

transparent在css1时代，只用于background属性。现在transparent可以作为color,border-color,background,shadow,granints等等。

transparent其效果是非常直接的:它使颜色或背景颜色或其他元素的透明,因为它是在默认情况下,当没有指定颜色。

transparent 用于如果设置不能删除重设的地方，和设置默认透明。

currentcolor

currentcolor是 css3的值。是继承临近属性的color值。

    .my-element { /* 这里的currentColor继承了上面的color值 */
        color: red;
    	border-color: 5px solid currentColor;
    }

可继承的属性有 border-color,box-shadow中的color设置，text-shadow等
如下例子

.my-element {
	color: red;
	border-color: 5px solid;   /* This will be red */
	box-shadow: 10px 10px 5px; /* This will be red */
	text-shadow: 0 2px 1px;    /* This will be red */
}

如上面的例子，currentColor这个关键字中的C 可大写，可小写也可省略

HSL

HSL 是指 Hue(色相)，Saturation(饱和度)，Lightness(透明度)组合，是rgb的另一种表示方式。

• Hue 是从 0% 到 360%，从0°是 red, 120°是 green， 240°是blue 具体理解可以看下图
  ![Hue 色相][1]

• Saturation 饱和度 跟Photoshop中的一样，使用white or black 颜色混合。

• Lightness 透明度 跟Photoshop 中的一样。

怎么使用HSL colors

• Hue 设置 是 0-360 0接近 红色
• Saturation 设置 100% 左右是 紫色purple，如果想设置一些grey 需要低于100%
• Lightness 设置 如果想要比较干净的颜色 大概设置成 50%，如果想明亮点设置在 50% 到 100%之间，如果想暗点设置低于 50%；

.white { /* I’m white! */
	color: hsl(0, 0%, 100%);
}

.black { /* I’m black! */
	color: hsl(0, 0%, 0%);
}

.red { /* I’m red! */
	color: hsl(0, 100%, 50%);
}

note:当你想设置 黑色 或者白色的时候，hue不是起决定性的作用， 如hsl(0,0%,100%),hsl(120,0%,100%),hsl(240,0%,100%) 这3个颜色都是白色

note: hue 设置时是不需要写单位的，即使写了浏览器也不能解析

hsl 的 alpha 通道

hsl 跟 rgb一样，设置alpha 就是设置rgba，hsl则 是hsla 其中a 的设置范围也是 0-1.

.parent {
	background-image: url(‘my-picture.jpg’);
}

.child {
	background: hsla(0, 0%, 100%, 0.75);
	color: hsl(0, 0%, 30%);
}

System colors

系统颜色在 css 3 规范中被放弃，而且由于各个系统不同，不好控制。

怎么使用colors in css

以下面代码为例

/* This will be red, whatever you pick */
.red { color: red; } 
.red { color: #f00; }
.red { color: #ff0000; }
.red { color: rgb(255, 0, 0); } 
.red { color: rgb(100%, 0%, 0%); } 
.red { color: rgba(255, 0, 0, 1); }
.red { color: rgba(100%, 0%, 0%, 1); }
.red { color: hsl(0, 100%, 50%); }
.red { color: hsla(0, 100%, 50%, 1); }

以上都是表示 红色，自己喜欢那种写法就选那种。

colors and css preprocessors

css preprocessors 指css 预处理器 [less,sass]
css预处理器提供了很多颜色的内置方法，比如saturate,darken,hue rotation等等

less doc

lighten(@color, @percentage);               /* Makes lighter */
darken(@color, @percentage);                /* Makes darker */

saturate(@color, @percentage);              /* Makes more saturated*/
desaturate(@color, @percentage);            /* Makes less saturated*/

fadein(@color, @percentage);                /* Makes more opaque */
fadeout(@color, @percentage);               /* Makes more transparent */ 
fade(@color, @percentage);                  /* Gives the color 50% opacity */

spin(@color, @degrees);                     /* Rotates the hue wheel 10° */

mix(@color1, @color2, @percentage);         /* Mixes 2 colors with a default weight of 50% */
contrast(@color1, @darkcolor, @lightcolor); /* Returns @darkcolor if the color is >50% luma (i.e. is a light color) otherwise return @lightcolor */

sass doc

rgba($color, $alpha)               /* Convert a hex color into a RGBa one 返回颜色值 */
red($color)                        /* Gets the red component 如果是 red 颜色直接返回 255 其他的返回 0 */
green($color)                      /* Gets the green component  如果是 green 颜色直接返回 255 其他的返回 0*/
blue($color)                       /* Gets the blue component  如果是 blue 颜色直接返回 255 其他的返回 0*/
mix($color-1, $color-2, [$weight]) /* Mixes 2 colors together with a default weight of 50% 同上 */

hue($color)                         /* Gets the hue component 返回相应的颜色($color)hue色相值*/
saturation($color)                  /* Gets the saturation component 返回相应的颜色($color)saturation值 */
lightness($color)                   /* Gets the lightness component返回相应的颜色($color)lightness值 */
adjust-hue($color, $degrees)        /* Rotates the hue wheel 返回颜色值 */
lighten($color, $percentage)        /* Makes lighter 返回颜色值 */
darken($color, $percentage)         /* Makes darker 返回颜色值*/
saturate($color, $percentage)       /* Makes more saturated  饱和度*/
desaturate($color, $percentage)     /* Makes less saturated 饱和度*/

grayscale($color)                   /* Converts to grayscale 添加灰度 */
complement($color)                  /* Returns the complement 补光 比如$color:green，生成的就是purple */
invert($color)               /* Returns the inverse 反相 ，反色，比如$color:green,最后生成#ff7fff */

alpha($color)                       /* Gets the alpha component (opacity) 返回$color opacity值*/
opacity($color)                     /* Gets the alpha component (opacity) 返回$color opacity值 */
opacify($color, $percentage)        /* Makes more opaque 这里的$percentage 只能设置 0-1范围内的数值*/
fade-in($color, $percentage)        /* Makes more opaque 同上*/
transparentize($color, $percentage) /* Makes more transparent 0.4设置透明度 */
fade-out($color, $percentage)       /* Makes more transparent 同上*/

[翻译文章 color in css](http://hugogiraudel.com/2012/11/27/css-colors/"color in css")

最后自己补充，alpha通道在IE7一下不能设置，需要使用微软提供的一个方法，设置filter。

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=56);

opactiy 设置。
[1]: http://hugogiraudel.com/images/css-colors/color-wheel.png