Easy Color

See: https://stackoverflow.com/a/54014428/1762224

by MrPolywhirl

HTML

<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/color -->

JavaScript

// input: h in [0,360] and s,v in [0,1] - output: r,g,b in [0,1]
function hsl2rgb(h, s, l) {
  let a = s * Math.min(l, 1 - l);
  let f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
  return [f(0), f(8), f(4)];
}

class EasyColor {
  static parse(input) {
    if (Number.isInteger(input)) {
      return input;
    } else if (typeof input === 'string') {
      return EasyColor.__parseString(input);
    }
    throw new Error('input format is unknown');
  }
  static __parseString(input) {
    if (input.startsWith('#')) {
      return parseInt(input.replace(/^#([\da-f])([\da-f])([\da-f])$/i, '#$1$1$2$2$3$3').substring(1), 16)
    } else if (input.startsWith('rgba')) {
      const [r, g, b, a] = input.match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d\.?\d*)\)$/).slice(1);
      const [r1, g1, b1] = [r, g, b].map(v => parseInt(v, 10) & 0xFF);
      const a1 = Math.floor(parseFloat(a) * 255);
      return Math.abs((r1 << 24) + (g1 << 26) + (b1 << 8) + a1) - 1;
    } else if (input.startsWith('hsl')) {
      const [h, s, l] = input.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/).slice(1).map(v => parseInt(v, 10));
      const [r, g, b] = hsl2rgb(h, s / 100, l / 100).map(v => Math.floor(v * 255));
      return (r << 16) + (g << 8) + b;
    } else if (input.startsWith('rgb')) {
      const [r, g, b] = input.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v, 10));
      return (r << 16) + (g << 8) + b;
    }
  }
}

console.log(EasyColor.parse('#F00').toString(16));
console.log(EasyColor.parse('#FF0000').toString(16));
console.log(EasyColor.parse('rgb(255, 0, 0)').toString(16));
console.log(EasyColor.parse('hsl(0, 100%, 50%)').toString(16));
console.log(EasyColor.parse('rgba(255, 0, 0, 1.0)').toString(16));