hex-rgb.js

  1. /**
  2. * @func hex2rgb
  3. * @desc Return an RGBA color from a Hex color.
  4. * @param {StringHex} hex
  5. * @return {ArrayRGBA}
  6. * @example
  7. * hex2rgb("#f00") // => [100, 0, 0, 100]
  8. * hex2rgb("#f00f") // => [100, 0, 0, 100]
  9. * @example
  10. * hex2rgb("#ff0000") // => [100, 0, 0, 100]
  11. * hex2rgb("#ff0000ff") // => [100, 0, 0, 100]
  12. */
  14. export function hex2rgb(hex) {
  15. 	// #<hex-color>{3,4,6,8}
  16. 	const [, r, g, b, a, rr, gg, bb, aa] = hex.match(hexColorMatch) || [];
  18. 	if (rr !== undefined || r !== undefined) {
  19. 		const red   = rr !== undefined ? parseInt(rr, 16) : parseInt(r + r, 16);
  20. 		const green = gg !== undefined ? parseInt(gg, 16) : parseInt(g + g, 16);
  21. 		const blue  = bb !== undefined ? parseInt(bb, 16) : parseInt(b + b, 16);
  22. 		const alpha = aa !== undefined ? parseInt(aa, 16) : a !== undefined ? parseInt(a + a, 16) : 255;
  24. 		return [red, green, blue, alpha].map(c => c * 100 / 255);
  25. 	}
  27. 	return undefined;
  28. }
  30. /**
  31. * @func rgb2hex
  32. * @desc Return a HEX color from an RGB color
  33. * @param {Number} r - Red (0 - 100)
  34. * @param {Number} g - Green (0 - 100)
  35. * @param {Number} b - Blue (0 - 100)
  36. * @return {StringHex}
  37. * @example
  38. * rgb2hex(100, 0, 0) // => "#ff0000"
  39. */
  41. export function rgb2hex(rgbR, rgbG, rgbB) {
  42. 	return `#${((1 << 24) + (Math.round(rgbR * 255 / 100) << 16) + (Math.round(rgbG * 255 / 100) << 8) + Math.round(rgbB * 255 / 100)).toString(16).slice(1)}`;
  43. }
  45. const hexColorMatch = /^#?(?:([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])?|([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})?)$/i;