Parse RGBA color and hexadecimal color, RGBA color and hexadecimal color convert to each other.

Introduction to the

Daily development is often used in the conversion of color, here provides a rich analysis, conversion of color methods.

First of all, color has the following two main common forms of expression

  • Hexadecimal mode: Use three to four hexadecimal numbers to represent colors
    • Such as#ff0000 #fff #0000007f
    • There are three bits, six bits and eight bits
    • Three digits indicate abbreviation, six is a common expression, and eight digits indicate transparency
  • Rgba mode: Use0-255.Respectively represent the values of RGB three channels
    • Such asRGB (255255255). Rgba (0,0,0,0.5)
    • Transparency is 0-1

The principle of

  • Parse hexadecimal color strings
  • Parse rGBA color strings
  • Generates a hexadecimal color string
  • Generate rGBA color string
  • Hexadecimal color strings are converted to and from RGBA color strings

use

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)
Copy the code

The source code


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

/** * 255 Color value to hexadecimal color value *@param N 255 Color value *@returns Hex Hex color */
export const toHex = (n: number) = > `${n > 15 ? ' ' : 0}${n.toString(16)}`;

/** * The color object is converted to a hexadecimal color string *@param ColorObj Color object */
 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))}`;
};

/** * Color object is converted to RGB color string *@param ColorObj Color object */
 export const toRgbString = (colorObj: IColorObj) = > {
  const { r, g, b } = colorObj;
  return `rgb(${r}.${g}.${b}) `;
};

/** * color object is converted to rGBA color string *@param ColorObj Color object */
 export const toRgbaString = (colorObj: IColorObj, n = 10000) = > {
  const { r, g, b, a = 1 } = colorObj;
  return `rgba(${r}.${g}.${b}.The ${Math.floor(a * n ) / n}) `;
};

/** * Hexadecimal color strings are parsed into color objects *@param Color Indicates the color string *@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 color string parse to color object *@param Color Indicates the color string *@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;
};

/** * Color string parses into color object *@param Color Indicates the color string *@returns IColorObj* /
export const parseColorString = (color: string) = > {
  if (color.startsWith(The '#')) {
    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}`);
};

/** * Color strings are parsed into various color representations *@param Color Indicates the color string *@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,
  };
};

/** * Hexadecimal color string is converted to RGBA color string *@param Hex Hexadecimal color string *@returns Rgba color string */
export const hexToRgba = (hex: string) = > {
  const colorObj = parseColorString(hex);
  return toRgbaString(colorObj);
};

/** * RGBA color string to hexadecimal color string *@param Rgba RGBA color string *@returns Hexadecimal color string */
 export const rgbaToHex = (rgba: string) = > {
  const colorObj = parseColorString(rgba);
  return toHexString(colorObj);
};

Copy the code