最全的rgba与16进制颜色空间互相转换方法

解析rgba颜色和16进制颜色，rgba颜色和16进制颜色相互转换。

简介

日常开发中常用到颜色的相互转换，这里提供了丰富的解析、转换颜色的方法。

首先颜色有以下两种主要的常用表现形式

• 16进制模式：用三到四位16进制数表示颜色
  • 如#ff0000 #fff #0000007f
  • 有3位，6位，8位三种
  • 3位表示缩写，6位是常用的表达方式，8位最后两位表示透明度
• rgba模式：用0-255分别表示rgb三个通道的数值
  • 如rgb(255,255,255) rgba(0,0,0,0.5)
  • 透明度为0-1的数值

原理

• 解析16进制颜色字符串
• 解析rgba颜色字符串
• 生成16进制颜色字符串
• 生成rgba颜色字符串
• 16进制颜色字符串 与 rgba颜色字符串 相互转换

使用

hexToRgba('#a53eda') // rgba(165,62,218,1)
rgbaToHex('rgba(165,62,218,1)') // #a53eda

parseColorString('#a53eda') // {r: 165, g: 62, b: 218, a: 1}
parseColorString('rgba(165,62,218,0.5)') // {r: 165, g: 62, b: 218, a: 0.5}

toHexString({r: 165, g: 62, b: 218, a: 0.5}) // #a53eda7f
toRgbaString({r: 165, g: 62, b: 218, a: 0.5}) // rgba(165,62,218,0.5)
复制代码

源码

export interface IColorObj {
  r: number;
  g: number;
  b: number;
  a?: number;
}

/**
 * 255颜色值转16进制颜色值
 * @param n 255颜色值
 * @returns hex 16进制颜色值
 */
export const toHex = (n: number) => `${n > 15 ? '' : 0}${n.toString(16)}`;

/**
 * 颜色对象转化为16进制颜色字符串
 * @param colorObj 颜色对象
 */
 export const toHexString = (colorObj: IColorObj) => {
  const { r, g, b, a = 1 } = colorObj;
  return `#${toHex(r)}${toHex(g)}${toHex(b)}${a === 1 ? '' : toHex(Math.floor(a * 255))}`;
};

/**
 * 颜色对象转化为rgb颜色字符串
 * @param colorObj 颜色对象
 */
 export const toRgbString = (colorObj: IColorObj) => {
  const { r, g, b } = colorObj;
  return `rgb(${r},${g},${b})`;
};

/**
 * 颜色对象转化为rgba颜色字符串
 * @param colorObj 颜色对象
 */
 export const toRgbaString = (colorObj: IColorObj, n = 10000) => {
  const { r, g, b, a = 1 } = colorObj;
  return `rgba(${r},${g},${b},${Math.floor(a * n ) / n})`;
};

/**
 * 16进制颜色字符串解析为颜色对象
 * @param color 颜色字符串
 * @returns IColorObj
 */
export const parseHexColor = (color: string) => {
  let hex = color.slice(1);
  let a = 1;
  if (hex.length === 3) {
    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
  }
  if (hex.length === 8) {
    a = parseInt(hex.slice(6), 16) / 255;
    hex = hex.slice(0, 6);
  }
  const bigint = parseInt(hex, 16);
  return {
      r: (bigint >> 16) & 255,
      g: (bigint >> 8) & 255,
      b: bigint & 255,
      a,
  } as IColorObj;
};

/**
 * rgba颜色字符串解析为颜色对象
 * @param color 颜色字符串
 * @returns IColorObj
 */
export const parseRgbaColor = (color: string) => {
  const arr = color.match(/(\d(\.\d+)?)+/g) || [];
  const res = arr.map((s: string) => parseInt(s, 10));
  return {
    r: res[0],
    g: res[1],
    b: res[2],
    a: parseFloat(arr[3]),
  } as IColorObj;
};

/**
 * 颜色字符串解析为颜色对象
 * @param color 颜色字符串
 * @returns IColorObj
 */
export const parseColorString = (color: string) => {
  if (color.startsWith('#')) {
    return parseHexColor(color);
  } else if (color.startsWith('rgb')) {
    return parseRgbaColor(color);
  } else if (color === 'transparent') {
    return parseHexColor('#00000000');
  }
  throw new Error(`color string error: ${color}`);
};

/**
 * 颜色字符串解析为各种颜色表达方式
 * @param color 颜色字符串
 * @returns IColorObj
 */
export const getColorInfo = (color: string) => {
  const colorObj = parseColorString(color);
  const hex = toHexString(colorObj);
  const rgba = toRgbaString(colorObj);
  const rgb = toRgbString(colorObj);
  return {
    hex,
    rgba,
    rgb,
    rgbaObj: colorObj,
  };
};

/**
 * 16进制颜色字符串转化为rgba颜色字符串
 * @param hex 16进制颜色字符串
 * @returns rgba颜色字符串
 */
export const hexToRgba = (hex: string) => {
  const colorObj = parseColorString(hex);
  return toRgbaString(colorObj);
};

/**
 * rgba颜色字符串转化为16进制颜色字符串
 * @param rgba rgba颜色字符串
 * @returns 16进制颜色字符串
 */
 export const rgbaToHex = (rgba: string) => {
  const colorObj = parseColorString(rgba);
  return toHexString(colorObj);
};

复制代码