Typescript Library - argbFromHex - Incorrect Parsing

[wojtek-viirtue]

The argbFromHex function does not parse hex values correctly when the hex value is 8 characters long (excluding the #). It incorrectly assumes the last two characters are the blue channel when it's actually the alpha channel.

Example: 50% opacity as represented by the 80 in the input (black)

Input: #80 (equivalent to #7f7f7f)

Incorrect Output: 4278190208 (equivalent to #80) ... a blue

material-color-utilities/typescript/utils/string_utils.ts

Lines 50 to 78 in 9e67d5e

	export const argbFromHex = (hex: string) => {
	hex = hex.replace('#', '');
	const isThree = hex.length === 3;
	const isSix = hex.length === 6;
	const isEight = hex.length === 8;
	if (!isThree && !isSix && !isEight) {
	throw new Error('unexpected hex ' + hex);
	}
	let r = 0;
	let g = 0;
	let b = 0;
	if (isThree) {
	r = parseIntHex(hex.slice(0, 1).repeat(2));
	g = parseIntHex(hex.slice(1, 2).repeat(2));
	b = parseIntHex(hex.slice(2, 3).repeat(2));
	} else if (isSix) {
	r = parseIntHex(hex.slice(0, 2));
	g = parseIntHex(hex.slice(2, 4));
	b = parseIntHex(hex.slice(4, 6));
	} else if (isEight) {
	r = parseIntHex(hex.slice(2, 4));
	g = parseIntHex(hex.slice(4, 6));
	b = parseIntHex(hex.slice(6, 8));
	}
	return (
	((255 << 24) | ((r & 0x0ff) << 16) | ((g & 0x0ff) << 8) | (b & 0x0ff)) >>>
	0);
	};

[wojtek-viirtue]

I know you guys aren't accepting pull requests....but it looks like alpha isn't being factored in a few parts of the code base. The following is a working version of the function in question (with minimal refactoring):

export const argbFromHex = (hex: string) => {
  hex = hex.replace('#', '');
  const isThree = hex.length === 3;
  const isSix = hex.length === 6;
  const isEight = hex.length === 8;
  if (!isThree && !isSix && !isEight) {
    throw new Error('unexpected hex ' + hex);
  }
  let r = 0;
  let g = 0;
  let b = 0;
  let a = 0;

  switch (hex.length) {
    case 3:
      r = parseIntHex(hex.slice(0, 1).repeat(2));
      g = parseIntHex(hex.slice(1, 2).repeat(2));
      b = parseIntHex(hex.slice(2, 3).repeat(2));
      break;
      // @ts-ignore
    case 6:
      r = parseIntHex(hex.slice(0, 2));
      g = parseIntHex(hex.slice(2, 4));
      b = parseIntHex(hex.slice(4, 6));
      // falls through
    case 8:
      a = parseIntHex(hex.slice(6, 8));
  }

  return (
    (((a & 0x0ff) << 24) | ((r & 0x0ff) << 16) | ((g & 0x0ff) << 8) | (b & 0x0ff)) >>>
    0);
};

function parseIntHex(value: string) {
  // tslint:disable-next-line:ban
  return parseInt(value, 16);
}

[DomiR]

I think you are confusing rgba with argb. The function name already states, that alpha is in front (just another way to represent a color value) which is different from what one would use in css where alpha is usually in the back. Sure - it would be convenient to have rgbaFromHex as well...

[WillsterJohnson]

@DomiR even so, there is no such thing as a Hex color which has the alpha out front. Hex colors are either RGB RGBA RRGGBB or RRGGBBAA.
I would otherwise agree with you if it weren't for the expectation of a # at the start of the hex string, implying it is not a hexadecimal number, but instead expects a hexadecimal color.