用javaScript进行颜色转换

RGB(A)与Hex互相转换的方法学习。

RGB 转 Hex

从RGB转换到Hex，只需要改变对数据的进行进制转换就行。我们通过toString(16)对红绿蓝三个通道的值进行转换，然后对转换后位数小于等于1的在前面添加一个0，最后前面加一个#将字符串加起来就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function RGBToHEX(r,g,b){
  if (typeof r !== "number") {
    r = Number(r)
  }
  if (typeof g !== "number") {
    g = Number(g)
  }
  if (typeof b !== "number") {
    b = Number(b)
  }
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  if (r.length === 1) {
    r = '0' + r;
  }
  if (g.length === 1) {
    g = '0' + g
  }
  if (b.length === 1) {
    b = '0' + b
  }
  return '#' + r + g + b
}

rgb字符串转Hex

除了将每个通道的值单独传入外，我们也可以将所有色值当作一个参数传入进行转换。只需要对前面的代码进行一点小小的改动就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function RGBToHEX(rgb) {
  let sep = rgb.indexOf(',') > -1 ? "," : ' '
  rgb = rgb.substring(4).split(')')[0].split(sep)
  let r = (+rgb[0]).toString(16)
  let g = (+rgb[1]).toString(16)
  let b = (+rgb[2]).toString(16)
  if (r.length === 1) {
    r = '0' + r;
  }
  if (g.length === 1) {
    g = '0' + g
  }
  if (b.length === 1) {
    b = '0' + b
  }
  return '#' + r + g + b
}

RGBA转Hex

将RGBA转换成Hex和rgb的转法基本相同。对于透明度a，因为它的范围是从0到1，因此我们可以通过这个参数乘以255得到想要的值，然后转换成Hex。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function RGBAToHexA(r,g,b,a) {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);
  a = Math.round(a * 255).toString(16);

  if (r.length == 1)
    r = "0" + r;
  if (g.length == 1)
    g = "0" + g;
  if (b.length == 1)
    b = "0" + b;
  if (a.length == 1)
    a = "0" + a;

  return "#" + r + g + b + a;
}

同前面将rgb参数一次性传入进行转换一样，我们也可以将rgba参数一次性传入，然后进行转换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function RGBAToHexA(rgba) {
  let sep = rgba.indexOf(",") > -1 ? "," : " "; 
  rgba = rgba.substr(5).split(")")[0].split(sep);
  let r = (+rgba[0]).toString(16)
  let g = (+rgba[1]).toString(16)
  let b = (+rgba[2]).toString(16)
  let a = Math.round(+rgba[3] * 255).toString(16);
  if (r.length == 1){
    r = "0" + r;
  }
  if (g.length == 1) {
     g = "0" + g;
  }
  if (b.length == 1) {
    b = "0" + b;
  }
  if (a.length == 1) {
    a = "0" + a;
  }
  return "#" + r + g + b + a;
}

Hex转rgb

我们知道rgb的色值除了#号外，通常长度是3位或者6位，在任何情况下，我们都可以通过在数据前加“0x”的形式来转换成Hex。如果长度是3位的，我们可以通过对每个通道连续转换两次的形式来实现转换。如果长度是6位的，那我们将前两位转换为r，中间两位转换为g，最后两位转换为b。获取到rgb转换的最终数据后，我们通过在前面增加一个+的形式，强制将他们转换成数字，这将产生我们需要的转换数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
function hexToRGB (h) {
  let r = 0, g = 0, b = 0;
  if (h.length === 4) {
    r = '0x' + h[1] + h[1]
    g = '0x' + h[2] + h[2]
    b = '0x' + h[3] + h[3]
  } else {
    r = '0x' + h[1] + h[2]
    g = '0x' + h[3] + h[4]
    b = '0x' + h[5] + h[6]
  }
  return "rgb(" + +r + "," + +g + "," + +b + ")"
}

Hex 转换为rgba

Hex转rgba和转rgb有点类似，我们只需要检测出出了#外的第四位或者第七八位位alpha值，然后处以255就可以了。为了获取精确度比较高但又不是很长的小数，我们使用toFixed(3)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function hexAToRGBA(h) {
  let r = 0, g = 0, b = 0, a = 1;

  if (h.length == 5) {
    r = "0x" + h[1] + h[1];
    g = "0x" + h[2] + h[2];
    b = "0x" + h[3] + h[3];
    a = "0x" + h[4] + h[4];

  } else if (h.length == 9) {
    r = "0x" + h[1] + h[2];
    g = "0x" + h[3] + h[4];
    b = "0x" + h[5] + h[6];
    a = "0x" + h[7] + h[8];
  }
  a = +(a / 255).toFixed(3);

  return "rgba(" + +r + "," + +g + "," + +b + "," + a + ")";
}

基于上面的方法，我做了一个在线转换工具，有兴趣的可以点击啊Hex(16进制颜色)与rgb(a)相互转换工具这里看一下。也可以复制这个链接查看https://www.91yqz.com/hex2rgb