迹忆客 专注技术分享

本教程将讨论如何使用 JavaScript 中的 toString() 函数将 RGB 转换为 HEX。

使用 JavaScript 中的 toString() 函数将 RGB 转换为 HEX

JavaScript 中不同颜色空间之间的转换很困难，因为 JavaScript 中没有预定义的函数可以在不同颜色空间之间进行转换。

因此，我们必须制作自己的转换函数，将一种颜色空间转换为另一种颜色空间。要制作转换函数，我们需要知道两个颜色空间的区别。

例如 RGB 和 HEX 颜色空间的区别在于 RGB 是十进制格式，HEX 是十六进制格式。要从 RGB 转换为 HEX，我们只需要将每种颜色的十进制数从 RGB 转换为十六进制，然后将它们连接在一起即可创建等效的十六进制颜色空间。

要将值从十进制更改为十六进制，我们可以使用 toString(16) 函数。如果转换后的数字的长度是 1，我们必须在它前面添加一个 0。请参考下面的代码。

function ColorToHex(color) {
  var hexadecimal = color.toString(16);
  return hexadecimal.length == 1 ? '0' + hexadecimal : hexadecimal;
}

function ConvertRGBtoHex(red, green, blue) {
  return '#' + ColorToHex(red) + ColorToHex(green) + ColorToHex(blue);
}
console.log(ConvertRGBtoHex(255, 100, 200));

输出：

#ff64c8

我们还可以使用 parseInt() 函数将 HEX 转换为 RGB。一个 HEX 颜色空间包含 6 个数字，不包括第一个数字。我们需要获取前 2 位数字并使用 parseInt() 函数将它们转换为十进制格式，这将是我们的红色。类似地，接下来的两位数字将为我们提供绿色，其余数字将为我们提供蓝色。

例如，让我们使用 parseInt() 函数将 HEX 颜色转换为 RGB。请参考下面的代码。

var hex = '#ff64c8';
var red = parseInt(hex[1] + hex[2], 16);
var green = parseInt(hex[3] + hex[4], 16);
var blue = parseInt(hex[5] + hex[6], 16);
console.log(red, green, blue);

输出：

255 100 200

你还可以使用上面的代码创建一个函数，这样你就不必再次编写代码。同样，你可以将任何颜色空间转换为另一种颜色空间；你只需要了解不同色彩空间之间的区别。