TypeScript 将颜色转换为 RGB

在开发过程中，我们经常需要将颜色转换为 RGB 值。在 TypeScript 中，可以使用以下代码片段来实现这一功能：

function hexToRgb(hex: string): { r: number, g: number, b: number } {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function rgbToHex(r: number, g: number, b: number): string {
  return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
}

上述代码中包含两个函数，一个用于将十六进制颜色值转换为 RGB 值，另一个则是将 RGB 值转换为十六进制颜色值。

具体实现如下：

将十六进制颜色值转换为 RGB 值

function hexToRgb(hex: string): { r: number, g: number, b: number } {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

此函数的参数为一个十六进制颜色值的字符串，例如 "#FF0000"（红色）。函数返回一个包含 RGB 值的对象，例如 { r: 255, g: 0, b: 0 }。

将 RGB 值转换为十六进制颜色值

function rgbToHex(r: number, g: number, b: number): string {
  return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
}

此函数的参数为三个分别表示红、绿、蓝分量的整数。函数返回一个字符串，其中包含转换后的十六进制颜色值，例如 "#FF0000"（红色）。

在 TypeScript 中使用这些函数非常简单：

const color = "#FF0000"; // 红色
const rgb = hexToRgb(color);
console.log(rgb); // { r: 255, g: 0, b: 0 }

const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
console.log(hex); // "#FF0000"

这些函数能够准确地将颜色值转换为 RGB 值并反之，帮助程序员在开发过程中更方便地操作颜色。