1. /**
    2.  * 判断是否 十六进制颜色值.
    3.  * 输入形式可为 #fff000 #f00
    4.  *
    5.  * @param   String  color   十六进制颜色值
    6.  * @return  Boolean
    7.  */
    8. export function isHexColor(color: string) {
    9.   const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/;
    10.   return reg.test(color);
    11. }
    13. /**
    14.  * RGB 颜色值转换为 十六进制颜色值.
    15.  * r, g, 和 b 需要在 [0, 255] 范围内
    16.  *
    17.  * @return  String          类似#ff00ff
    18.  * @param r
    19.  * @param g
    20.  * @param b
    21.  */
    22. export function rgbToHex(r: number, g: number, b: number) {
    23.   // tslint:disable-next-line:no-bitwise
    24.   const hex = ((r << 16) | (g << 8) | b).toString(16);
    25.   return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;
    26. }
    28. /**
    29.  * Transform a HEX color to its RGB representation
    30.  * @param {string} hex The color to transform
    31.  * @returns The RGB representation of the passed color
    32.  */
    33. export function hexToRGB(hex: string) {
    34.   let sHex = hex.toLowerCase();
    35.   if (isHexColor(hex)) {
    36.     if (sHex.length === 4) {
    37.       let sColorNew = '#';
    38.       for (let i = 1; i < 4; i += 1) {
    39.         sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1));
    40.       }
    41.       sHex = sColorNew;
    42.     }
    43.     const sColorChange: number[] = [];
    44.     for (let i = 1; i < 7; i += 2) {
    45.       sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)));
    46.     }
    47.     return 'RGB(' + sColorChange.join(',') + ')';
    48.   }
    49.   return sHex;
    50. }
    52. export function colorIsDark(color: string) {
    53.   if (!isHexColor(color)) return;
    54.   const [r, g, b] = hexToRGB(color)
    55.     .replace(/(?:\(|\)|rgb|RGB)*/g, '')
    56.     .split(',')
    57.     .map((item) => Number(item));
    58.   return r * 0.299 + g * 0.578 + b * 0.114 < 192;
    59. }
    61. /**
    62.  * Darkens a HEX color given the passed percentage
    63.  * @param {string} color The color to process
    64.  * @param {number} amount The amount to change the color by
    65.  * @returns {string} The HEX representation of the processed color
    66.  */
    67. export function darken(color: string, amount: number) {
    68.   color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
    69.   amount = Math.trunc((255 * amount) / 100);
    70.   return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
    71.     color.substring(2, 4),
    72.     amount,
    73.   )}${subtractLight(color.substring(4, 6), amount)}`;
    74. }
    76. /**
    77.  * Lightens a 6 char HEX color according to the passed percentage
    78.  * @param {string} color The color to change
    79.  * @param {number} amount The amount to change the color by
    80.  * @returns {string} The processed color represented as HEX
    81.  */
    82. export function lighten(color: string, amount: number) {
    83.   color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
    84.   amount = Math.trunc((255 * amount) / 100);
    85.   return `#${addLight(color.substring(0, 2), amount)}${addLight(
    86.     color.substring(2, 4),
    87.     amount,
    88.   )}${addLight(color.substring(4, 6), amount)}`;
    89. }
    91. /* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
    92. /**
    93.  * Sums the passed percentage to the R, G or B of a HEX color
    94.  * @param {string} color The color to change
    95.  * @param {number} amount The amount to change the color by
    96.  * @returns {string} The processed part of the color
    97.  */
    98. function addLight(color: string, amount: number) {
    99.   const cc = parseInt(color, 16) + amount;
    100.   const c = cc > 255 ? 255 : cc;
    101.   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
    102. }
    104. /**
    105.  * Calculates luminance of an rgb color
    106.  * @param {number} r red
    107.  * @param {number} g green
    108.  * @param {number} b blue
    109.  */
    110. function luminanace(r: number, g: number, b: number) {
    111.   const a = [r, g, b].map((v) => {
    112.     v /= 255;
    113.     return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
    114.   });
    115.   return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
    116. }
    118. /**
    119.  * Calculates contrast between two rgb colors
    120.  * @param {string} rgb1 rgb color 1
    121.  * @param {string} rgb2 rgb color 2
    122.  */
    123. function contrast(rgb1: string[], rgb2: number[]) {
    124.   return (
    125.     (luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
    126.     (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05)
    127.   );
    128. }
    130. /**
    131.  * Determines what the best text color is (black or white) based con the contrast with the background
    132.  * @param hexColor - Last selected color by the user
    133.  */
    134. export function calculateBestTextColor(hexColor: string) {
    135.   const rgbColor = hexToRGB(hexColor.substring(1));
    136.   const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0]);
    138.   return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF';
    139. }
    141. /**
    142.  * Subtracts the indicated percentage to the R, G or B of a HEX color
    143.  * @param {string} color The color to change
    144.  * @param {number} amount The amount to change the color by
    145.  * @returns {string} The processed part of the color
    146.  */
    147. function subtractLight(color: string, amount: number) {
    148.   const cc = parseInt(color, 16) - amount;
    149.   const c = cc < 0 ? 0 : cc;
    150.   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
    151. }