最近忙着完成业务需求，好久没写博客了。今天某个时间，翻看了一些最近项目中的前端代码，看到Web颜色转换功能的时候，突然想到我们在做一些颜色设置/编辑需求的时候，经常会涉及到各种颜色值格式的互换。所以我决定记录下我是如何实现这部分功能的，写下来和大家分享。希望读者多发表意见，多交流。

先看问题。

第一，我们在开发网页前端的时候，经常用DOM . style . background color=' # f00 '来设置一个DOM元素的背景颜色，我们也用一个类似的(为什么是类似的？案例很多，大家可以在这里自由想象。)var bgc=dom . style . background color代码获取DOM元素的背景颜色。那么问题来了，请看下图：

如果这里的对比不够明显，我们继续往下看：

显然，同样的色值应该是相等的，但结果却不是这样。这不是个案。作者在Chrome开发工具和Firefox控制台中得到的结果是一致的。

第二，前端开发往往从恢复UI设计稿开始。在编码的过程中，我们经常会发现这样的设计：一个盒子有一个坚实的背景(假设：#f00)，但不透明度为75%。显然，我们不能简单地用DOM . style . background color=' # f00 '来设置这种情况，因为我们无法达到半透明的效果。回头来看，我们知道CSS3中有一个rgba，这意味着我们可以通过DOM . style . background color=' rgba(255，0，0，0.75)'来设置带有半透明的背景色。然后，问题又来了：这个转换在Photoshop里很容易，但是在Javascript里怎么才能把(" # f00 "，75)转换成rgba(255，0，0，0.75)？

接下来，让我们看看我是如何做到的。

Rgb(a)颜色值转换为十六进制颜色(十六进制)。

是做开发的，我懂！说什么不如直接上代码，不过这里先放一段最原始的：

！- lang: js -

再现代码如下： varrgbtohex=function(RGB){ var rrgb=/RGB ( d {1，3})，( d {1，3})，( d { 1，3}) )/，rrgba=/rgba 。)/，r，g，b，a，rs=rgb.replace(/s /g ' ')。match(rRgb)，rsa=rgb.replace(/s /g ' ')。匹配(RRgba)；if (rs) { r=(rs[1])。toString(16)；r=r.length==1？0 ' r : rg=(rs[2])。toString(16)；g=g.length==1？0 ' g :g；b=(rs[3])。toString(16)；b=b.length==1？0 ' b : b返回{hex: '#' r g b，alpha : 100 }；} else if (rsa) { r=(rsa[1])。toString(16)；r=r.length==1？0 ' r : rg=(rsa[2])。toString(16)；g=g.length==1？0 ' g :g；b=(rsa[3])。toString(16)；b=b.length==1？0 ' b : ba=(rsa[4]) * 100返回{hex: '#' r g b，alpha : Math . ceil(a)}；} else { return {hex: rgb，alpha : 100 }；}};

为什么是最原始的？因为今天复习代码的时候，发现这里还有进化的空间。接下来，比较进化(优化)的代码：

！- lang: js -

复制的代码如下： varrgbtohex=Function(RGB){ Varrrgba=/rgba？((d{1，3})，(d{1，3})，(d{1，3})(，([。d])？)/，r，g，b，a，rsa=rgb.replace(/s /g ' ')。匹配(RRgba)；if (rsa) { r=(rsa[1])。toString(16)；r=r.length==1？0 ' r : rg=(rsa[2])。toString(16)；g=g.length==1？0 ' g :g；b=(rsa[3])。toString(16)；b=b.length==1？0 ' b : ba=((rsa[5]？rsa[5] : 1)) * 100返回{hex: '#' r g b，alpha : Math . ceil(a)}；} else { return {hex: rgb，alpha : 100 }；}};

更别说少了一个if分支，单从代码量就很明显！接下来，让我们看看转换的结果是否如预期的那样。因此，我在控制台中执行了几行代码，如下图所示：

从实现的结果来看，我们的方法似乎已经能够达到我们的目标。不过细心的朋友应该注意到了，图中有两个红色箭头。这里有坑吗？还不错。我们仔细观察从第一个箭头传输的颜色参数rgb(255，0，0，2)。其实这不是一个合法的色值。rgb格式的颜色值没有第四个(透明度)参数。看看第二个箭头中的rgba(255，0，0，1.48)，格式没问题，但是透明度是1.48，这不是一个合法的透明度值。在这两种情况下，我们的方法都已经正常执行并正常返回，这说明我们的方法还有进一步进化的空间，所以我们应该给大家！

十六进制颜色(十六进制)到rgba格式。

在我们的日常开发中，我们最常使用的颜色值应该是十六进制格式(#ff0000、#f00等)。).如果我们在使用颜色值时需要转换成rgba格式，应该怎么做？

！- lang: js -

复制的代码如下：VAR Hextorgba=function (hex，al) {VAR Hexcolor=/#/。测试(十六进制)？hex.slice(1) : hex，alp=hex==='透明'？0 : Math.ceil(al)，r，g，b；六色=/^[0-9a-f]{3}|[0-9a-f]{6}$/i.test(hexcolor)？hexColor : ' fffffif(HexColor . length===3){ HexColor=HexColor . replace(/( w)( w)/gi，' $ 1 $ 1 $ 2 $ 3 $ 3 '；} r=hexColor.slice(0，2)；g=hexColor.slice(2，4)；b=hexColor.slice(4，6)；r=parseInt(r，16)；g=parseInt(g，16)；b=parseInt(b，16)；返回{ hex: '#' hexColor，alpha: alp，rgba: 'rgba(' r '，' g '，' b '，'(alp/100)。toFixed(2)“)”}；};

同样，我们也编写验证代码来测试我们的转换是否正常：

从执行结果来看，我们的方法，没有问题，可以得到我们想要的转换结果。但是仍然有两个红色箭头，非法透明度和非法颜色值。这部分进化功能也留给大家了，哈哈…

最后，网页颜色值之间的相互转换其实是一个老套的问题，我在这里简单列举了一个。我相信有更多更好的方法可以使用。欢迎大家一起求婚，一起交流，一起进步~ ~。