WEB开发中色彩模式主要有RGB、RGBA、HEX、HSLA四种模式；WEB网页上的RGB颜色又和PhotoShop的WEB色、RGB色或CMYK色有一些差异；美术上的三原色是红、黄、蓝，很多颜色就是在三原色的基础上变化出来的；印刷需要的是CMYK色，还要参考Pantone色，版本不同，颜色差异大……是不是听着就挺晕的。小猴给大家详细说明一下

RGB

R 红色 Red   数值 0-255
G 绿色 Green 数值 0-255
B 蓝色 Blue  数值 0-255

写法如下

.div{color:255,255,255}

三通道颜色，通过三种颜色的变化，产生了各种各样的颜色。RGB color mode是通过颜色发光原理设定的，在一间完全黑暗的房间中也可以看到。可以把RGB想象成红、绿、蓝三盏灯，通过它们的亮度叠加混合，不断产生的新的色彩，叠加颜色越多效果越明亮。这种方式是加法混合。

CMYK

CMYK即印刷色彩模式，出现在我们所见的屏幕中，所看的书本上，需要依赖外界光源才能看见。它是印刷时采用的一种套色模式，在所有印刷物上都能看见，比如我们看的书、杂志、报纸等等。通过三原色混色叠加成四色，这四个颜色分别是Cyan（C）、Magenta（M）、Yellow（Y）、blacK（K）。

CMYK是反光原理产生的，反光来自我们在阅读时所需要的太阳光、灯光等光源。它们吸收外界色彩，通过光源反射的白光，过滤掉一部分色彩波长，形成我们眼中看到的CMYK色彩，利用了减法混合。

Web

Web Color是网站应用常见的色彩。它的模式有两种，一种是Web标准色，另一种是Web安全色。其中Web标准色，是以英文名称在网页脚本中使用的一种色彩，从RGB颜色中提取。写法如下

.div{color:red}
.div2{color:green}
.div3{color:blue}

RGBA

和RGB类似，只是增加了一个Alpha值，这个值由0-1变化（小数），就是透明度的变化，a值为0，就是完全透明，a值为1，就是完全不透明。RGBA是WEB开发中运用最多的色彩。写法如下

div{color:255,255,255,.5}
div{color:255,255,255,0.8}

由于在WEB开发中色彩选择用RGB的话，这些具体数值很难记忆，因此大多数的WEB开发又有人用HEX值，这两种用法都是可以互相转化的。

HEX

十六进制颜色，通过16进制 0-F 这16个字符表达颜色，比如用六位数字表示，结合CSS样式：

.div{color:#000000;} /*为黑色*/
.div{color:#FFFFFF;} /*为白色*/

实际WEB开发时以上两种HEX颜色又可以简写成三位数字：

.div{color:#000;}
.div{color:#fff;}

适合这种写法的需要满足条件：第1、2位相同，第3、4位相同，第5、6位相同。HEX同样也能实现半透明的功能，任何HEX颜色后面加上00-99的数值写法如下

.div{color:#d9d9d950;}  /*后面的50就是透明度50%*/
.div{color:#eee99} /*这种写法是错的，不能简写*/

十六进制CSS颜色代码（推荐）

#fff	#ddd	#aaa	#888	#666	#444	#000
#ffb7dd	#ff88c2	#f4a	#f08	#c10066	#a20055	#8c0044
#fcc	#f88	#f33	#f00	#c00	#a00	#800
#ffc8b4	#ffa488	#f74	#f51	#e63f00	#c63300	#a42d00
#fda	#fb6	#fa3	#f80	#e70	#c60	#b50
#fe9	#fd5	#fc2	#fb0	#da0	#a70	#860
#ffb	#ff7	#ff3	#ff0	#ee0	#bb0	#880
#efb	#df7	#cf3	#bf0	#9d0	#8a0	#680
#cf9	#bf6	#9f3	#7f0	#6d0	#5a0	#270
#9f9	#6f6	#3f3	#0f0	#0d0	#0a0	#080
#bfe	#7fc	#3fa	#0f9	#0d7	#0a5	#084
#afe	#7fe	#3fd	#0fc	#0da	#0a8	#086
#9ff	#6ff	#3ff	#0ff	#0dd	#0aa	#088
#cef	#7df	#3cf	#0bf	#009fcc	#0088a8	#079
#cdf	#9bf	#59f	#06f	#04b	#003c9d	#037
#ccf	#99f	#55f	#00f	#00c	#00a	#008
#cbf	#9f88ff	#74f	#50f	#40c	#20a	#208
#d1bbff	#b088ff	#95f	#70f	#50d	#4400b3	#3a0088
#e8ccff	#d28eff	#b94f	#90f	#70b	#66009d	#508
#f0bbff	#e38eff	#e93eff	#c0f	#A500CC	#7a0099	#607
#ffb3ff	#f7f	#ff3eff	#f0f	#c0c	#909	#707

HSLA

H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色，360度也是红色
S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高
L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮
A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明

写法如下：

.div{color: hsla(0,100%,80%,0.5);}

说实在这个颜色的确比较难理解，IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+虽然也支持，但不建议大家采用。一般在WEB代码应精简，小猴推荐十六进制的精简写法，WEB尽量在#000 - #fff之中选择，让页面更简洁、易懂。

以下是RGB和HEX互换的方法，感兴趣的可以往下看。

RGB转换为HEX

RGB与HEX中每个颜色都是一一对应的关系，如下：

RGB的数值 = 16 * HEX的第一位 + HEX的第二位

示例如下:

RGB: 92, 184, 232
92 / 16 = 5余12 -> 5C
184 / 16 = 11余8 -> B8
232 / 16 = 14余8 -> E8

HEX = 5CB8E8

HEX转换RGB

此转换就是将上述的转换逆转即可

示例如下

HEX: F26BC1
F2 = 15和2 -> 15 * 16 + 2 = 242
6B = 6和11 -> 6 * 16 + 11 = 107
C1 = 12和1 -> 12 * 16 + 1 = 193