function isColor(col) {

  const cache = isColor[col]

  if (cache != null) {

    console.log('- reading cache')

    return cache

  }

  isColor.el.style = ''

  isColor.el.style.color = col

  return isColor[col] = !!isColor.el.style.color

}

isColor.el = document.createElement('div')

console.log('is "red" a color?', isColor('red'))

console.log('from the cache: ', isColor('red'))

console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))

console.log('is "#0f0" a color?', isColor('#0f0'))

console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))

console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))

console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',

  isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))

console.log('is "snippetZone" ?', isColor('snippetZone'))

document.body.style.background = 'gray';

const canvas = document.createElement('canvas');

const c = canvas.getContext('2d');

canvas.width = 300;

canvas.height = 300;

c.fillStyle='rgba(255, 0, 0, 0.8)'

c.fillRect(0, 0, canvas.width, canvas.height);

c.globalCompositeOperation = 'destination-out';

c.fillStyle = 'black';

c.fillRect(100, 100, 150, 50);

document.body.appendChild(canvas);

const { assign } = Object

const { min, max, floor, round, abs } = Math

// `hslToRgb` and `rgbToHsl` functions from the amazing Raphael library

// by Dmitry Baranovskiy

// https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.js

export function hslToRgb({ h, s, l, a }) {

  let H = h

  let S = s

  let L = l

  s /= 100

  l /= 100

  let r, g, b, x, c

  h = (h % 360) / 60

  c = 2 * s * (l < .5 ? l : 1 - l)

  x = c * (1 - abs(h % 2 - 1))

  r = g = b = l - c / 2;

  h = floor(h)

  r += [c, x, 0, 0, x, c][h]

  g += [x, c, c, x, 0, 0][h]

  b += [0, 0, x, c, c, x][h]

  r *= 255; g *= 255; b *= 255

  r = round(r)

  g = round(g)

  b = round(b)

  return { r, g, b, h: H, s: S, l: L, a }

}

export function rgbToHsl({ r, g, b, a }) {

  let R = r

  let G = g

  let B = b

  r /= 255

  g /= 255

  b /= 255

  let h, s, l, w, m, c;

  w = max(r, g, b);

  m = min(r, g, b);

  c = w - m;

  h = (c == 0 ? null :

        w == r ? (g - b) / c :

        w == g ? (b - r) / c + 2 :

                 (r - g) / c + 4)

  h = ((h + 360) % 6) * 60 / 360;

  l = (w + m) / 2;

  s = (c == 0 ? 0 : l < .5 ?

    c / (2 * l) :

    c / (2 - 2 * l));

  h *= 360

  s *= 100

  l *= 100

  h = round(h)

  s = round(s)

  l = round(l);

  return { h, s, l, r: R, g: G, b: B, a }

}

const fromDec = dec => ({

  r: dec >> 16,

  g: dec >> 8 & 255,

  b: dec & 255

})

const fromHex = hex =>

  fromDec(Number('0x' + hex.slice(1)))

const components = def =>

  def.match(/[0-9\.]+/g).map(parseFloat)

const fromRgb = rgb => {

  const [r, g, b, a] = components(rgb)

  return { r, g, b, a: a ?? 1 }

}

const fromHsl = hsl => {

  const [h, s, l, a] = components(hsl)

  return { h, s, l, a: a ?? 1 }

}

const utils = {

  hex: (def, o) => assign(o, rgbToHsl(

    fromHex(def)), { a: o.a ?? 1 }

  ),

  rgb: (def, o) => assign(o, rgbToHsl(fromRgb(def))),

  hsl: (def, o) => assign(o, hslToRgb(fromHsl(def))),

  prop: (def, o) => {

    const name = Object.keys(def)[0]

    o[name] = def[name]

    if (name.match(/[rgb]/)) assign(o, rgbToHsl(o))

    if (name.match(/[hsl]/)) assign(o, hslToRgb(o))

    return o

  }

}

const types = { '#': 'hex', r: 'rgb', h: 'hsl', '[': 'prop' }

const type = str => types[str[0]]

const hx = c => {

  const chan = (+c).toString(16)

  if (chan.length === 0) return '00'

  if (chan.length === 1) return '0' + chan

  return chan

};

export function shade(def) {

  const o = {

    set(def) {

      const method = utils[type(String(def))]

      if (method != null) method(def, o)

    },

    hsl: _ => `hsla(${o.h}, ${o.s}%, ${o.l}%, ${o.a})`,

    rgb: _ => `rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,

    hex: _ => `#${hx(o.r)}${hx(o.g)}${hx(o.b)}`

  }

  o.set(def)

  return o;

}

// Safari and Firefox only... no Chrome support at time of this post

Object.assign(document.body.style, { 

  margin: 0,

  display: 'grid',

  'grid-template-columns': '1fr 1fr 1fr',

});

const hwbBlock = () => {

  const hue = Math.round(Math.random() * 360)

  const white = Math.round(

    Math.random() * Math.random() * 100)

  const black = Math.round(

    Math.random() * Math.random() * 100)

  const col = `hwb(${hue} ${white}% ${black}%)`

  document.body.innerHTML += `

    <div 

      style="

        width: 100%;

        height: 4em;

        font-family: sans-serif;

        text-align: center;

        line-height: 2.3;

        color: white;

        text-shadow: 1px 1px 5px black;

        background:${col}">${col}</div>

  `

}

Array(102).fill(0).map(hwbBlock);

const hsl2rgb = (h, s, l, o) => {

  if (h > 1 || s > 1 || l > 1) {

      h /= 360;

      s /= 100;

      l /= 100;

  }

  h *= 360;

  let R, G, B, X, C;

  h = (h % 360) / 60;

  C = 2 * s * (l < .5 ? l : 1 - l);

  X = C * (1 - Math.abs(h % 2 - 1));

  R = G = B = l - C / 2;

  h = ~~h;

  R += [C, X, 0, 0, X, C][h];

  G += [X, C, C, X, 0, 0][h];

  B += [0, 0, X, C, C, X][h];

  return `rgba(${~~(R * 255)}, ${~~(G * 255)}, ${~~(B * 255)}, ${o})`;

};

console.log(hsl2rgb(122, 50, 50, .5));