颜色值类型

根据 CSS 颜色草案中提到的颜色值类型，大概可以把它们分为这几类：

  • 颜色关键字
  • transparent 关键字
  • currentColor 关键字
  • RGB 颜色
  • HSL 颜色

    颜色关键字

    颜色名称也称为颜色关键字，像我们熟悉的black表示黑色，white表示白色，blue表示蓝色等。

实际上，在CSS的颜色定义中，总共有147种颜色关键字，所有者147种颜色名字均取自X Windows 系统，X 颜色名，所以即使这147个颜色名看上去不是很标准，支持也是非常不错的。

CSS3下的147个颜色名称实例页面

好看的配色

image.png
ghost 一丝、一点、淡色系
image.png

  1. border-radius: 4px;
  2. background-color: rgba(255, 103, 33, 0.1);
  3. font-family: 'Open Sans', sans-serif;
  4. color: #ff6721;

RGB，HEX，HSL以及关键字颜色相互转换方法

  1. /* RGB颜色转换为16进制 */
  2. String.prototype.colorHex = function(){
  3.     var that = this;
  4.     //十六进制颜色值的正则表达式
  5.     var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  6.     // 如果是rgb颜色表示
  7.     if (/^(rgb|RGB)/.test(that)) {
  8.         var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
  9.         var strHex = "#";
  10.         for (var i=0; i<aColor.length; i++) {
  11.             var hex = Number(aColor[i]).toString(16);
  12.             if (hex === "0") {
  13.                 hex += hex;    
  14.             }
  15.             strHex += hex;
  16.         }
  17.         if (strHex.length !== 7) {
  18.             strHex = that;    
  19.         }
  20.         return strHex;
  21.     } else if (reg.test(that)) {
  22.         var aNum = that.replace(/#/,"").split("");
  23.         if (aNum.length === 6) {
  24.             return that;    
  25.         } else if(aNum.length === 3) {
  26.             var numHex = "#";
  27.             for (var i=0; i<aNum.length; i+=1) {
  28.                 numHex += (aNum[i] + aNum[i]);
  29.             }
  30.             return numHex;
  31.         }
  32.     }
  33.     return that;
  34. };
  36. /* 十六进制颜色转为RGB格式 */
  37. String.prototype.colorRgb = function(){
  38.     var sColor = this.toLowerCase();
  39.     //十六进制颜色值的正则表达式
  40.     var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  41.     // 如果是16进制颜色
  42.     if (sColor && reg.test(sColor)) {
  43.         if (sColor.length === 4) {
  44.             var sColorNew = "#";
  45.             for (var i=1; i<4; i+=1) {
  46.                 sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));    
  47.             }
  48.             sColor = sColorNew;
  49.         }
  50.         //处理六位的颜色值
  51.         var sColorChange = [];
  52.         for (var i=1; i<7; i+=2) {
  53.             sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));    
  54.         }
  55.         return "RGB(" + sColorChange.join(",") + ")";
  56.     }
  57.     return sColor;
  58. };
  60. /**
  61.  * HSL颜色值转换为RGB. 
  62.  * 换算公式改编自 http://en.wikipedia.org/wiki/HSL_color_space.
  63.  * h, s, 和 l 设定在 [0, 1] 之间
  64.  * 返回的 r, g, 和 b 在 [0, 255]之间
  65.  *
  66.  * @param   Number  h       色相
  67.  * @param   Number  s       饱和度
  68.  * @param   Number  l       亮度
  69.  * @return  Array           RGB色值数值
  70.  */
  71. function hslToRgb(h, s, l) {
  72.     var r, g, b;
  74.     if(s == 0) {
  75.         r = g = b = l; // achromatic
  76.     } else {
  77.         var hue2rgb = function hue2rgb(p, q, t) {
  78.             if(t < 0) t += 1;
  79.             if(t > 1) t -= 1;
  80.             if(t < 1/6) return p + (q - p) * 6 * t;
  81.             if(t < 1/2) return q;
  82.             if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
  83.             return p;
  84.         }
  86.         var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
  87.         var p = 2 * l - q;
  88.         r = hue2rgb(p, q, h + 1/3);
  89.         g = hue2rgb(p, q, h);
  90.         b = hue2rgb(p, q, h - 1/3);
  91.     }
  93.     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  94. }
  96. /**
  97.  * RGB 颜色值转换为 HSL.
  98.  * 转换公式参考自 http://en.wikipedia.org/wiki/HSL_color_space.
  99.  * r, g, 和 b 需要在 [0, 255] 范围内
  100.  * 返回的 h, s, 和 l 在 [0, 1] 之间
  101.  *
  102.  * @param   Number  r       红色色值
  103.  * @param   Number  g       绿色色值
  104.  * @param   Number  b       蓝色色值
  105.  * @return  Array           HSL各值数组
  106.  */
  107. function rgbToHsl(r, g, b) {
  108.     r /= 255, g /= 255, b /= 255;
  109.     var max = Math.max(r, g, b), min = Math.min(r, g, b);
  110.     var h, s, l = (max + min) / 2;
  112.     if (max == min){ 
  113.         h = s = 0; // achromatic
  114.     } else {
  115.         var d = max - min;
  116.         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  117.         switch(max) {
  118.             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
  119.             case g: h = (b - r) / d + 2; break;
  120.             case b: h = (r - g) / d + 4; break;
  121.         }
  122.         h /= 6;
  123.     }
  125.     return [h, s, l];
  126. }
  128. /* 
  129. * 任意色值（甚至是CSS颜色关键字）转换为RGB颜色的方法
  130. * 此方法IE9+浏览器支持，基于DOM特性实现 
  131. */
  132. var colorToRgb = function (color) {
  133.     var div = document.createElement('div');
  134.     div.style.backgroundColor = color;
  135.     document.body.appendChild(div);
  136.     var c = window.getComputedStyle(div).backgroundColor;    
  137.     document.body.removeChild(div);
  138.     return c;
  139. };

颜色转换的库

color

npm地址：https://www.npmjs.com/package/color

image.png