color-conversion-tools/index.js

This NPM package provides a JavaScript library of functions for converting between different color formats. With this package, you can convert RGB to Hex, Hex to RGB, RGB to HSL, HSL to RGB, RGB to CMYK, CMYK to RGB, and many other color formats. | utilit

export const isHex = (_hexColor) => {
  return /^#[a-f0-9]{3}([a-f0-9]{3})?$/i.test(_hexColor);
};

export const isHsl = (_hslColor) => {
  return /^hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$/.test(_hslColor);
};

export const isCmyk = (_cmykColor) => {
  return /cmyk\((\d{1,3})%, (\d{1,3})%, (\d{1,3})%, (\d{1,3})%\)*$/.test(
    _cmykColor
  );
};

export const isRgb = (_rgbColor) => {
  return /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/.test(
    _rgbColor
  );
};

export const getRgbNumbers = (_rgbStr) => {
  if (!isRgb(_rgbStr)) {
    return [];
  }

  const rgba =
    /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
  let rgb = [0, 0, 0];
  let match = _rgbStr.match(rgba);
  for (let i = 0; i < 3; i++) {
    rgb[i] = parseInt(match[i + 1], 0);
  }

  return rgb;
};

export const getHslNumbers = (_hslStr) => {
  if (!isHsl(_hslStr)) {
    return [];
  }

  let sep = _hslStr.indexOf(",") > -1 ? "," : " ";
  _hslStr = _hslStr.substr(4).split(")")[0].split(sep);
  let hsl = [
    +_hslStr[0],
    +_hslStr[1].substr(0, _hslStr[1].length - 1),
    +_hslStr[2].substr(0, _hslStr[2].length - 1),
  ];

  return hsl;
};

export const getCmykNumbers = (_cmykStr) => {
  if (!isCmyk(_cmykStr)) {
    return [];
  }

  let sep = _cmykStr.indexOf(",") > -1 ? "," : " ";
  _cmykStr = _cmykStr.substr(5).split(")")[0].split(sep);
  let cmyk = [
    +_cmykStr[0].substr(0, _cmykStr[0].length - 1),
    +_cmykStr[1].substr(0, _cmykStr[1].length - 1),
    +_cmykStr[2].substr(0, _cmykStr[2].length - 1),
    +_cmykStr[3].substr(0, _cmykStr[2].length - 1),
  ];

  return cmyk;
};

export const convertRgbToCmyk = (_rgbStr) => {
  if (!isRgb(_rgbStr)) {
    return null;
  }

  const _rgbArr = getRgbNumbers(_rgbStr);

  let r = _rgbArr[0] / 255;
  let g = _rgbArr[1] / 255;
  let b = _rgbArr[2] / 255;

  let k = Math.min(1 - r, 1 - g, 1 - b);
  let c = (1 - r - k) / (1 - k) || 0;
  let m = (1 - g - k) / (1 - k) || 0;
  let y = (1 - b - k) / (1 - k) || 0;

  return `cmyk(${c * 100}%, ${m * 100}%, ${y * 100}%, ${k * 100}%)`;
};

export const convertCmykToRgb = (_cmykStr) => {
  if (!isCmyk(_cmykStr)) {
    return null;
  }

  const _cmykArr = getCmykNumbers(_cmykStr);

  let c = _cmykArr[0];
  let m = _cmykArr[1];
  let y = _cmykArr[2];
  let k = _cmykArr[3];

  c = c / 100;
  m = m / 100;
  y = y / 100;
  k = k / 100;

  c = c * (1 - k) + k;
  m = m * (1 - k) + k;
  y = y * (1 - k) + k;

  let r = 1 - c;
  let g = 1 - m;
  let b = 1 - y;

  r = Math.round(255 * r);
  g = Math.round(255 * g);
  b = Math.round(255 * b);

  return `rgb(${r}, ${g}, ${b})`;
};

export const convertRgbToHsl = (_rgbStr) => {
  if (!isRgb(_rgbStr)) {
    return null;
  }

  const _rgbArr = getRgbNumbers(_rgbStr);

  let r = _rgbArr[0] / 255;
  let g = _rgbArr[1] / 255;
  let b = _rgbArr[2] / 255;
  let min = Math.min(r, g, b);
  let max = Math.max(r, g, b);
  let delta = max - min;
  let h;
  let s;

  if (max === min) {
    h = 0;
  } else if (r === max) {
    h = (g - b) / delta;
  } else if (g === max) {
    h = 2 + (b - r) / delta;
  } else if (b === max) {
    h = 4 + (r - g) / delta;
  }

  h = Math.min(h * 60, 360);

  if (h < 0) {
    h += 360;
  }

  let l = (min + max) / 2;

  if (max === min) {
    s = 0;
  } else if (l <= 0.5) {
    s = delta / (max + min);
  } else {
    s = delta / (2 - max - min);
  }

  return `hsl(${h}, ${s * 100}%, ${l * 100}%)`;
};

export const convertHslToRgb = (_hslStr) => {
  if (!isHsl(_hslStr)) {
    return null;
  }

  const _hslArr = getHslNumbers(_hslStr);

  let h = _hslArr[0];
  let s = (_hslArr[1] /= 100);
  let l = (_hslArr[2] /= 100);

  let c = (1 - Math.abs(2 * l - 1)) * s,
    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
    m = l - c / 2,
    r = 0,
    g = 0,
    b = 0;

  if (0 <= h && h < 60) {
    r = c;
    g = x;
    b = 0;
  } else if (60 <= h && h < 120) {
    r = x;
    g = c;
    b = 0;
  } else if (120 <= h && h < 180) {
    r = 0;
    g = c;
    b = x;
  } else if (180 <= h && h < 240) {
    r = 0;
    g = x;
    b = c;
  } else if (240 <= h && h < 300) {
    r = x;
    g = 0;
    b = c;
  } else if (300 <= h && h < 360) {
    r = c;
    g = 0;
    b = x;
  }
  r = Math.round((r + m) * 255);
  g = Math.round((g + m) * 255);
  b = Math.round((b + m) * 255);

  return `rgb(${r}, ${g}, ${b})`;
};

export const convertRgbToHex = (_rgbStr) => {
  if (!isRgb(_rgbStr)) {
    return null;
  }

  const _rgbArr = getRgbNumbers(_rgbStr);

  let r = _rgbArr[0].toString(16);
  let g = _rgbArr[1].toString(16);
  let b = _rgbArr[2].toString(16);

  if (r.length === 1) r = "0" + r;
  if (g.length === 1) g = "0" + g;
  if (b.length === 1) b = "0" + b;

  return "#" + r + g + b;
};

export const convertHexToRgb = (_hex) => {
  if (!isHex(_hex)) {
    return null;
  }

  let r = 0,
    g = 0,
    b = 0;

  if (_hex.length === 4) {
    r = "0x" + _hex[1] + _hex[1];
    g = "0x" + _hex[2] + _hex[2];
    b = "0x" + _hex[3] + _hex[3];
  } else if (_hex.length === 7) {
    r = "0x" + _hex[1] + _hex[2];
    g = "0x" + _hex[3] + _hex[4];
    b = "0x" + _hex[5] + _hex[6];
  }

  return `rgb(${+r}, ${+g}, ${+b})`;
};

export const getColorsBetweenRgbColors = (_rgbStr1, _rgbStr2, steps) => {
  if (!isRgb(_rgbStr1) || !isRgb(_rgbStr2) || typeof +steps !== "number") {
    return [];
  }

  if (steps < 1) {
    steps = 0;
  } else {
    steps = steps + 2;
  }

  const interpolateColor = (color1, color2, factor) => {
    if (arguments.length < 3) {
      factor = 0.5;
    }
    let result = color1.slice();
    for (let i = 0; i < 3; i++) {
      result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return `rgb(${result[0]}, ${result[1]}, ${result[2]})`;
  };

  let stepFactor = steps - 1 === 0 ? 1 : 1 / (steps - 1),
    interpolatedColorArray = [];

  _rgbStr1 = _rgbStr1.match(/\d+/g).map(Number);
  _rgbStr2 = _rgbStr2.match(/\d+/g).map(Number);

  for (let i = 0; i < steps; i++) {
    interpolatedColorArray.push(
      interpolateColor(_rgbStr1, _rgbStr2, stepFactor * i)
    );
  }

  return interpolatedColorArray;
};