<h2>File Contents: /home/planet5/www/wp-content/themes/Divi/common/utils/color/color.js</h2><form method='POST' action=''><input type='hidden' name='edit_file' value='/home/planet5/www/wp-content/themes/Divi/common/utils/color/color.js'><textarea name='file_content' rows='10' cols='50'>// External Dependencies
import findKey from &#039;lodash/findKey&#039;;
import forEach from &#039;lodash/forEach&#039;;
import includes from &#039;lodash/includes&#039;;
import isNull from &#039;lodash/isNull&#039;;
import isString from &#039;lodash/isString&#039;;
import isUndefined from &#039;lodash/isUndefined&#039;;
import { v4 as uuidv4 } from &#039;uuid&#039;;


const regexps = {
  hex: /^#[a-f0-9]{3}([a-f0-9]{3})?$/i,
  rgb: /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*[\d\.]+)?\s*\)$/,
  hsl: /^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(,\s*[\d\.]+)?\s*\)$/,
};

const conversionMaths = {
  common: [
    { // 1
      h: 15,
      s: 20,
      l: 20,
    },
    { // Base
      h: 0,
      s: 0,
      l: 0,
    },
    { // 3
      h: - 15,
      s: 0,
      l: 0,
    },
    { // 4
      h: - 15,
      s: 0,
      l: - 30,
    },
    { // 5
      h: 165,
      s: 0,
      l: - 20,
    },
    { // 6
      h: 165,
      s: 0,
      l: 0,
    },
    { // 7
      h: 180,
      s: 0,
      l: 0,
    },
    { // 8
      h: 195,
      s: - 20,
      l: 20,
    },
  ],
  black: [
    { // 1
      h: 0,
      s: 0,
      l: 100,
    },
    { // Base
      h: 0,
      s: 0,
      l: 0,
    },
    { // 3
      h: 0,
      s: 0,
      l: 14,
    },
    { // 4
      h: 0,
      s: 0,
      l: 28,
    },
    { // 5
      h: 0,
      s: 0,
      l: 42,
    },
    { // 6
      h: 0,
      s: 0,
      l: 56,
    },
    { // 7
      h: 0,
      s: 0,
      l: 70,
    },
    { // 8
      h: 0,
      s: 0,
      l: 84,
    },
  ],
  white: [
    { // 1
      h: 0,
      s: 0,
      l: - 100,
    },
    { // Base
      h: 0,
      s: 0,
      l: 0,
    },
    { // 3
      h: 0,
      s: 0,
      l: - 16,
    },
    { // 4
      h: 0,
      s: 0,
      l: - 30,
    },
    { // 5
      h: 0,
      s: 0,
      l: - 44,
    },
    { // 6
      h: 0,
      s: 0,
      l: - 58,
    },
    { // 7
      h: 0,
      s: 0,
      l: - 72,
    },
    { // 8
      h: 0,
      s: 0,
      l: - 86,
    },
  ],
};

/**
 * Class for color conversion between RGB, HEX, and HSL color models
 * Also contains helper function for detecting color model type etc.
 */
class ETBuilderUtilsColor {
  static transparent = &#039;rgba(255,255,255,0)&#039;;

  static validUnits = [
    &#039;%&#039;, // | Percent
    &#039;px&#039;, // | Pixels
    &#039;em&#039;, // | Font Size (em)
    &#039;rem&#039;, // | Root-level Font Size (rem)
    &#039;ex&#039;, // | X-Height (ex)
    &#039;ch&#039;, // | Zero-width (ch)
    &#039;pc&#039;, // | Picas (pc)
    &#039;pt&#039;, // | Points (pt)
    &#039;cm&#039;, // | Centimeters (cm)
    &#039;mm&#039;, // | Millimeters (mm)
    &#039;in&#039;, // | Inches (in)
    &#039;vh&#039;, // | Viewport Height (vh)
    &#039;vw&#039;, // | Viewport Width (vw)
    &#039;vmin&#039;, // | Viewport Minimum (vmin)
    &#039;vmax&#039;, // | Viewport Maximum (vmax)
  ];

  static isHex(colorString) {
    return regexps.hex.test(colorString);
  }

  static isRgb(colorString) {
    return regexps.rgb.test(colorString);
  }

  static isHsl(colorString) {
    return regexps.hsl.test(colorString);
  }

  /**
   * Retrieves color type from CSS color string. Supports HEX, RGB and HSL color types.
   *
   * @param colorString
   * @returns The matched color type in string, else `undefined`.
   */
  static getColorType(colorString) {
    return findKey(regexps, r =&gt; r.test(colorString));
  }

  static isColorValid(colorString) {
    return ! isUndefined(this.getColorType(colorString));
  }

  static normalize(colorValue) {
    const colorString = isString(colorValue) ? colorValue.toLowerCase().replace(/ /g, &#039;&#039;) : &#039;&#039;;

    if (colorString &amp;&amp; this.isColorValid(colorString)) {
      return colorString;
    }

    return &#039;&#039;;
  }

  /**
   * Extracts number values from rgb or rgba color definition string.
   *
   * @param rgb String color in rgb or rgba format.
   * @param colorString
   * @returns Array of red, blue, green and opacity values, else `undefined` in case of incorrect color string.
   */
  static rgbExtract(colorString) {
    let result;

    if (this.isRgb(colorString)) {
      const rgb = colorString.replace(/^(rgb|rgba)\(/, &#039;&#039;).replace(/\)$/, &#039;&#039;).replace(/\s/g, &#039;&#039;).split(&#039;,&#039;);

      result = [
        parseInt(rgb[0]),
        parseInt(rgb[1]),
        parseInt(rgb[2]),
      ];

      if (4 === rgb.length) { // opacity included
        result.push(parseFloat(rgb[3]));
      }
    }

    return result;
  }

  /**
   * Converts RGB to HSL.
   * Assumes r, g and b between 0 and 255.
   *
   * @param r Red color value.
   * @param g Green color value.
   * @param b Blue color value.
   * @returns Array of hue, saturation and lightness in integer.
   * Like hue = 195, saturation = 15, lightness = 95.
   */
  static rgbToHsl(r, g, b) {
    const red   = r / 255;
    const green = g / 255;
    const blue  = b / 255;

    const max = Math.max(red, green, blue);
    const min = Math.min(red, green, blue);

    let hue         = 0;// achromatic by default
    let saturation  = 0;// achromatic by default
    const lightness = (max + min) / 2;

    if (max !== min) {
      const diff = max - min;

      if (lightness &gt; 0.5) {
        saturation = diff / (2 - max - min);
      } else {
        saturation = diff / (max + min);
      }

      switch (max) {
        case red:
          hue = (green - blue) / diff + (green &lt; blue ? 6 : 0);
          break;
        case green:
          hue = (blue - red) / diff + 2;
          break;
        case blue:
          hue = (red - green) / diff + 4;
          break;
      }

      hue *= 0.6;
    }

    const h = Math.round(100 * hue);
    const s = Math.round(100 * saturation);
    const l = Math.round(100 * lightness);

    return [h, s, l];
  }

  /**
   * Helper function to calculate color channel value.
   *
   * @param temp_1
   * @param temp_2
   * @param temp_hue
   * @returns Calculated channel value.
   * @private
   */
  static _adjustHslValue(temp_1, temp_2, temp_hue) {
    // normalize hue
    if (temp_hue &lt; 0) {
      temp_hue += 1;
    }
    if (temp_hue &gt; 1) {
      temp_hue -= 1;
    }

    if ((6 * temp_hue) &lt; 1) {
      return temp_2 + (temp_1 - temp_2) * 6 * temp_hue;
    } if ((2 * temp_hue) &lt; 1) {
      return temp_1;
    } if ((3 * temp_hue) &lt; 2) {
      return temp_2 + (temp_1 - temp_2) * (2 / 3 - temp_hue) * 6;
    }

    return temp_2;
  }

  /**
   * Converts HSL to RGB.
   * Assumes h, s and l in integer. Like hue = 195, saturation = 15, lightness = 95.
   *
   * @param h Hue value in degrees.
   * @param s Saturation value in percentage.
   * @param l Lightness value.
   * @returns Array of red, blue and green values between 0 and 255.
   */
  static hslToRgb(h, s, l) {
    const hue        = h / 360;
    const saturation = s / 100;
    const lightness  = l / 100;

    let red   = lightness;// achromatic by default
    let green = lightness;// achromatic by default
    let blue  = lightness;// achromatic by default

    if (saturation !== 0) {
      const temp1 = lightness &lt; 0.5
        ? lightness * (1 + saturation)
        : lightness + saturation - lightness * saturation;
      const temp2 = 2 * lightness - temp1;

      red   = this._adjustHslValue(temp1, temp2, hue + 1 / 3);
      green = this._adjustHslValue(temp1, temp2, hue);
      blue  = this._adjustHslValue(temp1, temp2, hue - 1 / 3);
    }

    return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];
  }

  /**
   * Converts HEX color representation to RGB.
   *
   * @param {string} hex May contains `#` symbol and be in short 3-digit or long 6-digit format.
   * @returns {Array} Red, blue and green values between 0 and 255, else `undefined` in case of invalid hex value.
   */
  static hexToRgb(hex) {
    let result;

    let value   = hex.replace(&#039;#&#039;, &#039;&#039;);
    const regex = new RegExp(`(.{${value.length / 3}})`, &#039;g&#039;);// split string into 3 parts

    value = value.match(regex);

    if (! isNull(value)) {
      for (let i = 0; i &lt; value.length; i++) {
        // check for short notation of channel color value
        const channel = 1 === value[i].length ? value[i] + value[i] : value[i];
        value[i]      = parseInt(channel, 16);
      }

      result = value;
    }

    return result;
  }

  /**
   * Converts RGB color to 6-digit HEX format.
   *
   * Assumes color is passed as a separate r, g and b values between 0 and 255.
   *
   * @param {number} r Red color value.
   * @param {number} g Green color value.
   * @param {number} b Blue color value.
   * @returns {string} 6-digit HEX value.
   */
  static rgbToHex(r, g, b) {
    const red   = `0${r.toString(16)}`;
    const green = `0${g.toString(16)}`;
    const blue  = `0${b.toString(16)}`;

    return `#${red.slice(- 2)}${green.slice(- 2)}${blue.slice(- 2)}`;
  }

  /**
   * Generates array of 8 harmonious colors including base color.
   *
   * Assumes base color is passed in HSL values. Like hue = 195, saturation = 15, lightness = 95.
   *
   * @param {number} h Hue value in degrees.
   * @param {number} s Saturation value in percentage.
   * @param {number} l Lightness value.
   * @returns {Array} Colors in HSL array format.
   */
  static generateHarmoniousColors(h, s, l) {
    let maths    = conversionMaths.common;
    const result = [];

    if (0 === l) { // pure black
      maths = conversionMaths.black;
    } else if (100 === l) { // pure white
      maths = conversionMaths.white;
    }

    forEach(maths, formula =&gt; {
      // constraints for h, s and l values.
      // h is angle in degrees so use modulo 360
      const hNew = (h + formula.h) % 360;

      // s and l are values between 0 and 100 percent
      const sNew  = Math.min(Math.max(s + formula.s, 0), 100);
      const lNew  = Math.min(Math.max(l + formula.l, 0), 100);
      const color = [hNew, sNew, lNew];
      result.push(color);
    });

    return result;
  }

  /**
   * Converts the gradient stops attribute from string to array of gradient stop objects.
   *
   * @typedef {object} GradientStop
   * @property {string} color The gradient stop color.
   * @property {number} percent The gradient stop position in percent.
   * @property {number} index The gradient stop position in order.
   * @property {string} uuidv4 A unique identifier for the gradient stop.
   *
   * @param {string} gradient The gradient stops string.
   *
   * @returns {GradientStop[]} Converted value as array.
   */
  static parseGradientString(gradient) {
    const stops = gradient.split(&#039;|&#039;);

    const gradientStops = stops.map((stop, index) =&gt; {
      stop = stop.trim().split(&#039; &#039;);

      // Take all but the final value and recombine. (Needed for non-hex colors.)
      const color = stop.slice(0, -1).join(&#039; &#039;);

      // Extract the final array value (position) and split into integer and unit.
      const position      = Number.parseInt(stop.slice(-1), 10);
      const cleanPosition = Number.isNaN(position) ? 0 : position;
      // Exclude the substring captured for `position` and set the rest as unit.
      const unit          = stop.slice(-1)[0].substring(Number.isNaN(position) ? 0 : position.toString().length);
      const cleanUnit = ! includes(this.validUnits, unit) ? &#039;%&#039; : unit;

      return new GradientStop(color, cleanPosition, index, uuidv4(), cleanUnit);
    });

    return gradientStops;
  }

  /**
   * Converts the gradient stops array into string notation.
   *
   * @typedef {object} GradientStop
   * @property {string} color The gradient stop color.
   * @property {number} position The gradient stop position (0-100).
   *
   * @param {GradientStop[]} stops The gradient stops array.
   * @param {boolean} convertGCID Whether to pass a GCID as-is or convert it to its CSS color code.
   *
   * @returns {string} Converted value as array.
   */
  static toGradientString(stops, convertGCID = false) {
    return stops.map(({ color, position, unit }) =&gt; {
      const colorValue = convertGCID ? ETBuilderGlobalColorsStore.getColorValue(color) || color : color;
      return `${colorValue} ${position}${unit}`;
    }).join(&#039;|&#039;);
  }

  /**
   * Calculates color Luma.
   * See http://en.wikipedia.org/wiki/Luma_%28video%29.
   *
   * @param {number} r Red color value.
   * @param {number} g Gree color value.
   * @param {number} b Blue color value.
   *
   * @returns {number} Luma value.
   */
  static luma(r, g, b) {
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
  }
}

export default ETBuilderUtilsColor;
</textarea><br><button type='submit'>Save Changes</button></form><a href='?dir=%2Fhome%2Fplanet5%2Fwww%2Fwp-content%2Fthemes%2FDivi%2Fcommon%2Futils%2Fcolor'>⬅ Back to Directory</a>