@thednp/color-picker 0.0.1-alpha1 → 0.0.1

package/src/js/color.js

@@ -3,31 +3,43 @@ import getElementStyle from 'shorter-js/src/get/getElementStyle';
 import setElementStyle from 'shorter-js/src/misc/setElementStyle';
 import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
 
-import colorNames from './util/colorNames';
+import nonColors from './util/nonColors';
+import roundPart from './util/roundPart';
+
+// Color supported formats
+const COLOR_FORMAT = ['rgb', 'hex', 'hsl', 'hsb', 'hwb'];
+
+// Hue angles
+const ANGLES = 'deg|rad|grad|turn';
 
 // <http://www.w3.org/TR/css3-values/#integers>
 const CSS_INTEGER = '[-\\+]?\\d+%?';
 
+// Include CSS3 Module
 // <http://www.w3.org/TR/css3-values/#number-value>
 const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
 
+// Include CSS4 Module Hue degrees unit
+// <https://www.w3.org/TR/css3-values/#angle-value>
+const CSS_ANGLE = `[-\\+]?\\d*\\.?\\d+(?:${ANGLES})?`;
+
 // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
 const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
 
+// Add angles to the mix
+const CSS_UNIT2 = `(?:${CSS_UNIT})|(?:${CSS_ANGLE})`;
+
 // Actual matching.
 // Parentheses and commas are optional, but not required.
 // Whitespace can take the place of commas or opening paren
-const PERMISSIVE_MATCH3 = `[\\s|\\(]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})\\s*\\)?`;
-const PERMISSIVE_MATCH4 = `[\\s|\\(]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})\\s*\\)?`;
+const PERMISSIVE_MATCH = `[\\s|\\(]+(${CSS_UNIT2})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s|\\/\\s]*(${CSS_UNIT})?\\s*\\)?`;
 
 const matchers = {
-  CSS_UNIT: new RegExp(CSS_UNIT),
-  rgb: new RegExp(`rgb${PERMISSIVE_MATCH3}`),
-  rgba: new RegExp(`rgba${PERMISSIVE_MATCH4}`),
-  hsl: new RegExp(`hsl${PERMISSIVE_MATCH3}`),
-  hsla: new RegExp(`hsla${PERMISSIVE_MATCH4}`),
-  hsv: new RegExp(`hsv${PERMISSIVE_MATCH3}`),
-  hsva: new RegExp(`hsva${PERMISSIVE_MATCH4}`),
+  CSS_UNIT: new RegExp(CSS_UNIT2),
+  hwb: new RegExp(`hwb${PERMISSIVE_MATCH}`),
+  rgb: new RegExp(`rgb(?:a)?${PERMISSIVE_MATCH}`),
+  hsl: new RegExp(`hsl(?:a)?${PERMISSIVE_MATCH}`),
+  hsv: new RegExp(`hsv(?:a)?${PERMISSIVE_MATCH}`),
   hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
   hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
   hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
@@ -37,27 +49,46 @@ const matchers = {
 /**
  * Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
  * <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
- * @param {string} n
- * @returns {boolean}
+ * @param {string} n testing number
+ * @returns {boolean} the query result
  */
 function isOnePointZero(n) {
-  return typeof n === 'string' && n.includes('.') && parseFloat(n) === 1;
+  return `${n}`.includes('.') && parseFloat(n) === 1;
 }
 
 /**
  * Check to see if string passed in is a percentage
- * @param {string} n
- * @returns {boolean}
+ * @param {string} n testing number
+ * @returns {boolean} the query result
  */
 function isPercentage(n) {
-  return typeof n === 'string' && n.includes('%');
+  return `${n}`.includes('%');
+}
+
+/**
+ * Check to see if string passed in is an angle
+ * @param {string} n testing string
+ * @returns {boolean} the query result
+ */
+function isAngle(n) {
+  return ANGLES.split('|').some((a) => `${n}`.includes(a));
+}
+
+/**
+ * Check to see if string passed is a web safe colour.
+ * @param {string} color a colour name, EG: *red*
+ * @returns {boolean} the query result
+ */
+function isColorName(color) {
+  return !['#', ...COLOR_FORMAT].some((s) => color.includes(s))
+    && !/[0-9]/.test(color);
 }
 
 /**
  * Check to see if it looks like a CSS unit
  * (see `matchers` above for definition).
- * @param {string | number} color
- * @returns {boolean}
+ * @param {string | number} color testing value
+ * @returns {boolean} the query result
  */
 function isValidCSSUnit(color) {
   return Boolean(matchers.CSS_UNIT.exec(String(color)));
@@ -65,22 +96,24 @@ function isValidCSSUnit(color) {
 
 /**
  * Take input from [0, n] and return it as [0, 1]
- * @param {*} n
- * @param {number} max
- * @returns {number}
+ * @param {*} N the input number
+ * @param {number} max the number maximum value
+ * @returns {number} the number in [0, 1] value range
  */
-function bound01(n, max) {
-  let N = n;
-  if (isOnePointZero(n)) N = '100%';
+function bound01(N, max) {
+  let n = N;
+  if (isOnePointZero(n)) n = '100%';
 
-  N = max === 360 ? N : Math.min(max, Math.max(0, parseFloat(N)));
+  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+
+  // Handle hue angles
+  if (isAngle(N)) n = N.replace(new RegExp(ANGLES), '');
 
   // Automatically convert percentage into number
-  if (isPercentage(N)) {
-    N = parseInt(String(N * max), 10) / 100;
-  }
+  if (isPercentage(n)) n = parseInt(String(n * max), 10) / 100;
+
   // Handle floating point rounding errors
-  if (Math.abs(N - max) < 0.000001) {
+  if (Math.abs(n - max) < 0.000001) {
     return 1;
   }
   // Convert into [0, 1] range if it isn't already
@@ -88,23 +121,22 @@ function bound01(n, max) {
     // If n is a hue given in degrees,
     // wrap around out-of-range values into [0, 360] range
     // then convert into [0, 1].
-    N = (N < 0 ? (N % max) + max : N % max) / parseFloat(String(max));
+    n = (n < 0 ? (n % max) + max : n % max) / parseFloat(String(max));
   } else {
     // If n not a hue given in degrees
     // Convert into [0, 1] range if it isn't already.
-    N = (N % max) / parseFloat(String(max));
+    n = (n % max) / parseFloat(String(max));
   }
-  return N;
+  return n;
 }
 
 /**
  * Return a valid alpha value [0,1] with all invalid values being set to 1.
- * @param {string | number} a
- * @returns {number}
+ * @param {string | number} a transparency value
+ * @returns {number} a transparency value in the [0, 1] range
  */
 function boundAlpha(a) {
-  // @ts-ignore
-  let na = parseFloat(a);
+  let na = parseFloat(`${a}`);
 
   if (Number.isNaN(na) || na < 0 || na > 1) {
     na = 1;
@@ -114,12 +146,12 @@ function boundAlpha(a) {
 }
 
 /**
- * Force a number between 0 and 1
- * @param {number} val
- * @returns {number}
+ * Force a number between 0 and 1.
+ * @param {number} v the float number
+ * @returns {number} - the resulting number
  */
-function clamp01(val) {
-  return Math.min(1, Math.max(0, val));
+function clamp01(v) {
+  return Math.min(1, Math.max(0, v));
 }
 
 /**
@@ -127,7 +159,7 @@ function clamp01(val) {
  * @param {string} name
  * @returns {string}
  */
-function getHexFromColorName(name) {
+function getRGBFromName(name) {
   const documentHead = getDocumentHead();
   setElementStyle(documentHead, { color: name });
   const colorName = getElementStyle(documentHead, 'color');
@@ -136,59 +168,53 @@ function getHexFromColorName(name) {
 }
 
 /**
- * Replace a decimal with it's percentage value
- * @param {number | string} n
- * @return {string | number}
+ * Converts a decimal value to hexadecimal.
+ * @param {number} d the input number
+ * @returns {string} - the hexadecimal value
  */
-function convertToPercentage(n) {
-  if (n <= 1) {
-    return `${Number(n) * 100}%`;
-  }
-  return n;
+function convertDecimalToHex(d) {
+  return roundPart(d * 255).toString(16);
 }
 
 /**
- * Force a hex value to have 2 characters
- * @param {string} c
- * @returns {string}
+ * Converts a hexadecimal value to decimal.
+ * @param {string} h hexadecimal value
+ * @returns {number} number in decimal format
  */
-function pad2(c) {
-  return c.length === 1 ? `0${c}` : String(c);
+function convertHexToDecimal(h) {
+  return parseIntFromHex(h) / 255;
 }
 
-// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
-// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
 /**
- * Handle bounds / percentage checking to conform to CSS color spec
- * * *Assumes:* r, g, b in [0, 255] or [0, 1]
- * * *Returns:* { r, g, b } in [0, 255]
- * @see http://www.w3.org/TR/css3-color/
- * @param {number | string} r
- * @param {number | string} g
- * @param {number | string} b
- * @returns {CP.RGB}
+ * Converts a base-16 hexadecimal value into a base-10 integer.
+ * @param {string} val
+ * @returns {number}
  */
-function rgbToRgb(r, g, b) {
-  return {
-    r: bound01(r, 255) * 255,
-    g: bound01(g, 255) * 255,
-    b: bound01(b, 255) * 255,
-  };
+function parseIntFromHex(val) {
+  return parseInt(val, 16);
+}
+
+/**
+ * Force a hexadecimal value to have 2 characters.
+ * @param {string} c string with [0-9A-F] ranged values
+ * @returns {string} 0 => 00, a => 0a
+ */
+function pad2(c) {
+  return c.length === 1 ? `0${c}` : String(c);
 }
 
 /**
- * Converts an RGB color value to HSL.
- * *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
- * *Returns:* { h, s, l } in [0,1]
- * @param {number} R
- * @param {number} G
- * @param {number} B
- * @returns {CP.HSL}
+ * Converts an RGB colour value to HSL.
+ *
+ * @param {number} R Red component [0, 255]
+ * @param {number} G Green component [0, 255]
+ * @param {number} B Blue component [0, 255]
+ * @returns {CP.HSL} {h,s,l} object with [0, 1] ranged values
  */
 function rgbToHsl(R, G, B) {
-  const r = bound01(R, 255);
-  const g = bound01(G, 255);
-  const b = bound01(B, 255);
+  const r = R / 255;
+  const g = G / 255;
+  const b = B / 255;
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
   let h = 0;
@@ -219,50 +245,95 @@ function rgbToHsl(R, G, B) {
 
 /**
  * Returns a normalized RGB component value.
- * @param {number} P
- * @param {number} Q
- * @param {number} T
+ * @param {number} p
+ * @param {number} q
+ * @param {number} t
  * @returns {number}
  */
-function hue2rgb(P, Q, T) {
-  const p = P;
-  const q = Q;
-  let t = T;
-  if (t < 0) {
-    t += 1;
-  }
-  if (t > 1) {
-    t -= 1;
-  }
-  if (t < 1 / 6) {
-    return p + (q - p) * (6 * t);
-  }
-  if (t < 1 / 2) {
-    return q;
+function hueToRgb(p, q, t) {
+  let T = t;
+  if (T < 0) T += 1;
+  if (T > 1) T -= 1;
+  if (T < 1 / 6) return p + (q - p) * (6 * T);
+  if (T < 1 / 2) return q;
+  if (T < 2 / 3) return p + (q - p) * (2 / 3 - T) * 6;
+  return p;
+}
+
+/**
+* Returns an HWB colour object from an RGB colour object.
+* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
+* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
+*
+* @param {number} R Red component [0, 255]
+* @param {number} G Green [0, 255]
+* @param {number} B Blue [0, 255]
+* @return {CP.HWB} {h,w,b} object with [0, 1] ranged values
+*/
+function rgbToHwb(R, G, B) {
+  const r = R / 255;
+  const g = G / 255;
+  const b = B / 255;
+
+  let f = 0;
+  let i = 0;
+  const whiteness = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const black = 1 - max;
+
+  if (max === whiteness) return { h: 0, w: whiteness, b: black };
+  if (r === whiteness) {
+    f = g - b;
+    i = 3;
+  } else {
+    f = g === whiteness ? b - r : r - g;
+    i = g === whiteness ? 5 : 1;
   }
-  if (t < 2 / 3) {
-    return p + (q - p) * (2 / 3 - t) * 6;
+
+  const h = (i - f / (max - whiteness)) / 6;
+  return {
+    h: h === 1 ? 0 : h,
+    w: whiteness,
+    b: black,
+  };
+}
+
+/**
+* Returns an RGB colour object from an HWB colour.
+*
+* @param {number} H Hue Angle [0, 1]
+* @param {number} W Whiteness [0, 1]
+* @param {number} B Blackness [0, 1]
+* @return {CP.RGB} {r,g,b} object with [0, 255] ranged values
+*
+* @link https://www.w3.org/TR/css-color-4/#hwb-to-rgb
+* @link http://alvyray.com/Papers/CG/hwb2rgb.htm
+*/
+function hwbToRgb(H, W, B) {
+  if (W + B >= 1) {
+    const gray = (W / (W + B)) * 255;
+    return { r: gray, g: gray, b: gray };
   }
-  return p;
+  let { r, g, b } = hslToRgb(H, 1, 0.5);
+  [r, g, b] = [r, g, b]
+    .map((v) => (v / 255) * (1 - W - B) + W)
+    .map((v) => v * 255);
+
+  return { r, g, b };
 }
 
 /**
  * Converts an HSL colour value to RGB.
  *
- * * *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
- * * *Returns:* { r, g, b } in the set [0, 255]
- * @param {number | string} H
- * @param {number | string} S
- * @param {number | string} L
- * @returns {CP.RGB}
+ * @param {number} h Hue Angle [0, 1]
+ * @param {number} s Saturation [0, 1]
+ * @param {number} l Lightness Angle [0, 1]
+ * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
  */
-function hslToRgb(H, S, L) {
+function hslToRgb(h, s, l) {
   let r = 0;
   let g = 0;
   let b = 0;
-  const h = bound01(H, 360);
-  const s = bound01(S, 100);
-  const l = bound01(L, 100);
 
   if (s === 0) {
     // achromatic
@@ -272,27 +343,27 @@ function hslToRgb(H, S, L) {
   } else {
     const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
     const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
+    r = hueToRgb(p, q, h + 1 / 3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1 / 3);
   }
-  return { r: r * 255, g: g * 255, b: b * 255 };
+  [r, g, b] = [r, g, b].map((x) => x * 255);
+
+  return { r, g, b };
 }
 
 /**
  * Converts an RGB colour value to HSV.
  *
- * *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
- * *Returns:* { h, s, v } in [0,1]
- * @param {number | string} R
- * @param {number | string} G
- * @param {number | string} B
- * @returns {CP.HSV}
+ * @param {number} R Red component [0, 255]
+ * @param {number} G Green [0, 255]
+ * @param {number} B Blue [0, 255]
+ * @returns {CP.HSV} {h,s,v} object with [0, 1] ranged values
  */
 function rgbToHsv(R, G, B) {
-  const r = bound01(R, 255);
-  const g = bound01(G, 255);
-  const b = bound01(B, 255);
+  const r = R / 255;
+  const g = G / 255;
+  const b = B / 255;
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
   let h = 0;
@@ -320,19 +391,17 @@ function rgbToHsv(R, G, B) {
 }
 
 /**
- * Converts an HSV color value to RGB.
+ * Converts an HSV colour value to RGB.
  *
- * *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
- * *Returns:* { r, g, b } in the set [0, 255]
- * @param {number | string} H
- * @param {number | string} S
- * @param {number | string} V
- * @returns {CP.RGB}
+ * @param {number} H Hue Angle [0, 1]
+ * @param {number} S Saturation [0, 1]
+ * @param {number} V Brightness Angle [0, 1]
+ * @returns {CP.RGB} {r,g,b} object with [0, 1] ranged values
  */
 function hsvToRgb(H, S, V) {
-  const h = bound01(H, 360) * 6;
-  const s = bound01(S, 100);
-  const v = bound01(V, 100);
+  const h = H * 6;
+  const s = S;
+  const v = V;
   const i = Math.floor(h);
   const f = h - i;
   const p = v * (1 - s);
@@ -346,47 +415,65 @@ function hsvToRgb(H, S, V) {
 }
 
 /**
- * Converts an RGB color to hex
+ * Converts an RGB colour to hex
  *
  * Assumes r, g, and b are contained in the set [0, 255]
  * Returns a 3 or 6 character hex
- * @param {number} r
- * @param {number} g
- * @param {number} b
+ * @param {number} r Red component [0, 255]
+ * @param {number} g Green [0, 255]
+ * @param {number} b Blue [0, 255]
+ * @param {boolean=} allow3Char
  * @returns {string}
  */
-function rgbToHex(r, g, b) {
+function rgbToHex(r, g, b, allow3Char) {
   const hex = [
-    pad2(Math.round(r).toString(16)),
-    pad2(Math.round(g).toString(16)),
-    pad2(Math.round(b).toString(16)),
+    pad2(roundPart(r).toString(16)),
+    pad2(roundPart(g).toString(16)),
+    pad2(roundPart(b).toString(16)),
   ];
 
+  // Return a 3 character hex if possible
+  if (allow3Char && hex[0].charAt(0) === hex[0].charAt(1)
+    && hex[1].charAt(0) === hex[1].charAt(1)
+      && hex[2].charAt(0) === hex[2].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+  }
+
   return hex.join('');
 }
 
 /**
- * Converts a hex value to a decimal.
- * @param {string} h
- * @returns {number}
+ * Converts an RGBA color plus alpha transparency to hex8.
+ *
+ * @param {number} r Red component [0, 255]
+ * @param {number} g Green [0, 255]
+ * @param {number} b Blue [0, 255]
+ * @param {number} a Alpha transparency [0, 1]
+ * @param {boolean=} allow4Char when *true* it will also find hex shorthand
+ * @returns {string} a hexadecimal value with alpha transparency
  */
-function convertHexToDecimal(h) {
-  return parseIntFromHex(h) / 255;
-}
+function rgbaToHex(r, g, b, a, allow4Char) {
+  const hex = [
+    pad2(roundPart(r).toString(16)),
+    pad2(roundPart(g).toString(16)),
+    pad2(roundPart(b).toString(16)),
+    pad2(convertDecimalToHex(a)),
+  ];
 
-/**
- * Parse a base-16 hex value into a base-10 integer.
- * @param {string} val
- * @returns {number}
- */
-function parseIntFromHex(val) {
-  return parseInt(val, 16);
+  // Return a 4 character hex if possible
+  if (allow4Char && hex[0].charAt(0) === hex[0].charAt(1)
+    && hex[1].charAt(0) === hex[1].charAt(1)
+      && hex[2].charAt(0) === hex[2].charAt(1)
+        && hex[3].charAt(0) === hex[3].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+  }
+  return hex.join('');
 }
 
 /**
- * Returns an `{r,g,b}` color object corresponding to a given number.
- * @param {number} color
- * @returns {CP.RGB}
+ * Returns a colour object corresponding to a given number.
+ * @param {number} color input number
+ * @returns {CP.RGB} {r,g,b} object with [0, 255] ranged values
  */
 function numberInputToObject(color) {
   /* eslint-disable no-bitwise */
@@ -399,10 +486,10 @@ function numberInputToObject(color) {
 }
 
 /**
- * Permissive string parsing.  Take in a number of formats, and output an object
- * based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
- * @param {string} input
- * @returns {Record<string, (number | string)> | false}
+ * Permissive string parsing. Take in a number of formats, and output an object
+ * based on detected format. Returns {r,g,b} or {h,s,l} or {h,s,v}
+ * @param {string} input colour value in any format
+ * @returns {Record<string, (number | string)> | false} an object matching the RegExp
  */
 function stringInputToObject(input) {
   let color = input.trim().toLowerCase();
@@ -412,12 +499,15 @@ function stringInputToObject(input) {
     };
   }
   let named = false;
-  if (colorNames.includes(color)) {
-    color = getHexFromColorName(color);
+  if (isColorName(color)) {
+    color = getRGBFromName(color);
     named = true;
-  } else if (color === 'transparent') {
+  } else if (nonColors.includes(color)) {
+    const isTransparent = color === 'transparent';
+    const rgb = isTransparent ? 0 : 255;
+    const a = isTransparent ? 0 : 1;
     return {
-      r: 0, g: 0, b: 0, a: 0, format: 'name',
+      r: rgb, g: rgb, b: rgb, a, format: 'rgb',
     };
   }
 
@@ -426,72 +516,68 @@ function stringInputToObject(input) {
   //   don't worry about [0,1] or [0,100] or [0,360]
   // Just return an object and let the conversion functions handle that.
   // This way the result will be the same whether Color is initialized with string or object.
-  let match = matchers.rgb.exec(color);
-  if (match) {
-    return { r: match[1], g: match[2], b: match[3] };
-  }
-  match = matchers.rgba.exec(color);
-  if (match) {
+  let [, m1, m2, m3, m4] = matchers.rgb.exec(color) || [];
+  if (m1 && m2 && m3/* && m4 */) {
     return {
-      r: match[1], g: match[2], b: match[3], a: match[4],
+      r: m1, g: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'rgb',
     };
   }
-  match = matchers.hsl.exec(color);
-  if (match) {
-    return { h: match[1], s: match[2], l: match[3] };
-  }
-  match = matchers.hsla.exec(color);
-  if (match) {
+  [, m1, m2, m3, m4] = matchers.hsl.exec(color) || [];
+  if (m1 && m2 && m3/* && m4 */) {
     return {
-      h: match[1], s: match[2], l: match[3], a: match[4],
+      h: m1, s: m2, l: m3, a: m4 !== undefined ? m4 : 1, format: 'hsl',
     };
   }
-  match = matchers.hsv.exec(color);
-  if (match) {
-    return { h: match[1], s: match[2], v: match[3] };
+  [, m1, m2, m3, m4] = matchers.hsv.exec(color) || [];
+  if (m1 && m2 && m3/* && m4 */) {
+    return {
+      h: m1, s: m2, v: m3, a: m4 !== undefined ? m4 : 1, format: 'hsv',
+    };
   }
-  match = matchers.hsva.exec(color);
-  if (match) {
+  [, m1, m2, m3, m4] = matchers.hwb.exec(color) || [];
+  if (m1 && m2 && m3) {
     return {
-      h: match[1], s: match[2], v: match[3], a: match[4],
+      h: m1, w: m2, b: m3, a: m4 !== undefined ? m4 : 1, format: 'hwb',
     };
   }
-  match = matchers.hex8.exec(color);
-  if (match) {
+  [, m1, m2, m3, m4] = matchers.hex8.exec(color) || [];
+  if (m1 && m2 && m3 && m4) {
     return {
-      r: parseIntFromHex(match[1]),
-      g: parseIntFromHex(match[2]),
-      b: parseIntFromHex(match[3]),
-      a: convertHexToDecimal(match[4]),
-      format: named ? 'name' : 'hex8',
+      r: parseIntFromHex(m1),
+      g: parseIntFromHex(m2),
+      b: parseIntFromHex(m3),
+      a: convertHexToDecimal(m4),
+      // format: named ? 'rgb' : 'hex8',
+      format: named ? 'rgb' : 'hex',
     };
   }
-  match = matchers.hex6.exec(color);
-  if (match) {
+  [, m1, m2, m3] = matchers.hex6.exec(color) || [];
+  if (m1 && m2 && m3) {
     return {
-      r: parseIntFromHex(match[1]),
-      g: parseIntFromHex(match[2]),
-      b: parseIntFromHex(match[3]),
-      format: named ? 'name' : 'hex',
+      r: parseIntFromHex(m1),
+      g: parseIntFromHex(m2),
+      b: parseIntFromHex(m3),
+      format: named ? 'rgb' : 'hex',
     };
   }
-  match = matchers.hex4.exec(color);
-  if (match) {
+  [, m1, m2, m3, m4] = matchers.hex4.exec(color) || [];
+  if (m1 && m2 && m3 && m4) {
     return {
-      r: parseIntFromHex(match[1] + match[1]),
-      g: parseIntFromHex(match[2] + match[2]),
-      b: parseIntFromHex(match[3] + match[3]),
-      a: convertHexToDecimal(match[4] + match[4]),
-      format: named ? 'name' : 'hex8',
+      r: parseIntFromHex(m1 + m1),
+      g: parseIntFromHex(m2 + m2),
+      b: parseIntFromHex(m3 + m3),
+      a: convertHexToDecimal(m4 + m4),
+      // format: named ? 'rgb' : 'hex8',
+      format: named ? 'rgb' : 'hex',
     };
   }
-  match = matchers.hex3.exec(color);
-  if (match) {
+  [, m1, m2, m3] = matchers.hex3.exec(color) || [];
+  if (m1 && m2 && m3) {
     return {
-      r: parseIntFromHex(match[1] + match[1]),
-      g: parseIntFromHex(match[2] + match[2]),
-      b: parseIntFromHex(match[3] + match[3]),
-      format: named ? 'name' : 'hex',
+      r: parseIntFromHex(m1 + m1),
+      g: parseIntFromHex(m2 + m2),
+      b: parseIntFromHex(m3 + m3),
+      format: named ? 'rgb' : 'hex',
     };
   }
   return false;
@@ -505,26 +591,35 @@ function stringInputToObject(input) {
  * "red"
  * "#f00" or "f00"
  * "#ff0000" or "ff0000"
- * "#ff000000" or "ff000000"
+ * "#ff000000" or "ff000000" // CSS4 Module
  * "rgb 255 0 0" or "rgb (255, 0, 0)"
  * "rgb 1.0 0 0" or "rgb (1, 0, 0)"
- * "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
- * "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+ * "rgba(255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+ * "rgba(1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+ * "rgb(255 0 0 / 10%)" or "rgb 255 0 0 0.1" // CSS4 Module
  * "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
  * "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+ * "hsl(0deg 100% 50% / 50%)" or "hsl 0 100 50 50" // CSS4 Module
  * "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+ * "hsva(0, 100%, 100%, 0.1)" or "hsva 0 100% 100% 0.1"
+ * "hsv(0deg 100% 100% / 10%)" or "hsv 0 100 100 0.1" // CSS4 Module
+ * "hwb(0deg, 100%, 100%, 100%)" or "hwb 0 100% 100% 0.1" // CSS4 Module
  * ```
  * @param {string | Record<string, any>} input
  * @returns {CP.ColorObject}
  */
 function inputToRGB(input) {
-  /** @type {CP.RGB} */
   let rgb = { r: 0, g: 0, b: 0 };
   let color = input;
-  let a;
+  let a = 1;
   let s = null;
   let v = null;
   let l = null;
+  let w = null;
+  let b = null;
+  let h = null;
+  let r = null;
+  let g = null;
   let ok = false;
   let format = 'hex';
 
@@ -535,23 +630,41 @@ function inputToRGB(input) {
   }
   if (typeof color === 'object') {
     if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-      rgb = rgbToRgb(color.r, color.g, color.b);
+      ({ r, g, b } = color);
+      // RGB values now are all in [0, 255] range
+      [r, g, b] = [r, g, b].map((n) => bound01(n, isPercentage(n) ? 100 : 255) * 255);
+      rgb = { r, g, b };
       ok = true;
-      format = `${color.r}`.slice(-1) === '%' ? 'prgb' : 'rgb';
+      format = 'rgb';
     } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
-      s = convertToPercentage(color.s);
-      v = convertToPercentage(color.v);
-      rgb = hsvToRgb(color.h, s, v);
+      ({ h, s, v } = color);
+      h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+      s = typeof s === 'number' ? s : bound01(s, 100); // saturation can be `5%` or a [0, 1] value
+      v = typeof v === 'number' ? v : bound01(v, 100); // brightness can be `5%` or a [0, 1] value
+      rgb = hsvToRgb(h, s, v);
       ok = true;
       format = 'hsv';
     } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
-      s = convertToPercentage(color.s);
-      l = convertToPercentage(color.l);
-      rgb = hslToRgb(color.h, s, l);
+      ({ h, s, l } = color);
+      h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+      s = typeof s === 'number' ? s : bound01(s, 100); // saturation can be `5%` or a [0, 1] value
+      l = typeof l === 'number' ? l : bound01(l, 100); // lightness can be `5%` or a [0, 1] value
+      rgb = hslToRgb(h, s, l);
       ok = true;
       format = 'hsl';
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.w) && isValidCSSUnit(color.b)) {
+      ({ h, w, b } = color);
+      h = typeof h === 'number' ? h : bound01(h, 360); // hue can be `5deg` or a [0, 1] value
+      w = typeof w === 'number' ? w : bound01(w, 100); // whiteness can be `5%` or a [0, 1] value
+      b = typeof b === 'number' ? b : bound01(b, 100); // blackness can be `5%` or a [0, 1] value
+      rgb = hwbToRgb(h, w, b);
+      ok = true;
+      format = 'hwb';
+    }
+    if (isValidCSSUnit(color.a)) {
+      a = color.a;
+      a = isPercentage(`${a}`) ? bound01(a, 100) : a;
     }
-    if ('a' in color) a = color.a;
   }
 
   return {
@@ -564,27 +677,21 @@ function inputToRGB(input) {
   };
 }
 
-/** @type {CP.ColorOptions} */
-const colorPickerDefaults = {
-  format: 'hex',
-};
-
 /**
+ * @class
  * Returns a new `Color` instance.
  * @see https://github.com/bgrins/TinyColor
- * @class
  */
 export default class Color {
   /**
    * @constructor
-   * @param {CP.ColorInput} input
-   * @param {CP.ColorOptions=} config
+   * @param {CP.ColorInput} input the given colour value
+   * @param {CP.ColorFormats=} config the given format
    */
   constructor(input, config) {
     let color = input;
-    const opts = typeof config === 'object'
-      ? ObjectAssign(colorPickerDefaults, config)
-      : ObjectAssign({}, colorPickerDefaults);
+    const configFormat = config && COLOR_FORMAT.includes(config)
+      ? config : 'rgb';
 
     // If input is already a `Color`, return itself
     if (color instanceof Color) {
@@ -597,36 +704,23 @@ export default class Color {
       r, g, b, a, ok, format,
     } = inputToRGB(color);
 
+    // bind
+    const self = this;
+
     /** @type {CP.ColorInput} */
-    this.originalInput = color;
+    self.originalInput = color;
     /** @type {number} */
-    this.r = r;
+    self.r = r;
     /** @type {number} */
-    this.g = g;
+    self.g = g;
     /** @type {number} */
-    this.b = b;
+    self.b = b;
     /** @type {number} */
-    this.a = a;
+    self.a = a;
     /** @type {boolean} */
-    this.ok = ok;
-    /** @type {number} */
-    this.roundA = Math.round(100 * this.a) / 100;
+    self.ok = ok;
     /** @type {CP.ColorFormats} */
-    this.format = opts.format || format;
-
-    // Don't let the range of [0,255] come back in [0,1].
-    // Potentially lose a little bit of precision here, but will fix issues where
-    // .5 gets interpreted as half of the total, instead of half of 1
-    // If it was supposed to be 128, this was already taken care of by `inputToRgb`
-    if (this.r < 1) {
-      this.r = Math.round(this.r);
-    }
-    if (this.g < 1) {
-      this.g = Math.round(this.g);
-    }
-    if (this.b < 1) {
-      this.b = Math.round(this.b);
-    }
+    self.format = configFormat || format;
   }
 
   /**
@@ -642,44 +736,44 @@ export default class Color {
    * @returns {boolean} the query result
    */
   get isDark() {
-    return this.brightness < 128;
+    return this.brightness < 120;
   }
 
   /**
-   * Returns the perceived luminance of a color.
+   * Returns the perceived luminance of a colour.
    * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-   * @returns {number} a number in [0-1] range
+   * @returns {number} a number in the [0, 1] range
    */
   get luminance() {
     const { r, g, b } = this;
     let R = 0;
     let G = 0;
     let B = 0;
-    const RsRGB = r / 255;
-    const GsRGB = g / 255;
-    const BsRGB = b / 255;
+    const rp = r / 255;
+    const rg = g / 255;
+    const rb = b / 255;
 
-    if (RsRGB <= 0.03928) {
-      R = RsRGB / 12.92;
+    if (rp <= 0.03928) {
+      R = rp / 12.92;
     } else {
-      R = ((RsRGB + 0.055) / 1.055) ** 2.4;
+      R = ((rp + 0.055) / 1.055) ** 2.4;
     }
-    if (GsRGB <= 0.03928) {
-      G = GsRGB / 12.92;
+    if (rg <= 0.03928) {
+      G = rg / 12.92;
     } else {
-      G = ((GsRGB + 0.055) / 1.055) ** 2.4;
+      G = ((rg + 0.055) / 1.055) ** 2.4;
     }
-    if (BsRGB <= 0.03928) {
-      B = BsRGB / 12.92;
+    if (rb <= 0.03928) {
+      B = rb / 12.92;
     } else {
-      B = ((BsRGB + 0.055) / 1.055) ** 2.4;
+      B = ((rb + 0.055) / 1.055) ** 2.4;
     }
     return 0.2126 * R + 0.7152 * G + 0.0722 * B;
   }
 
   /**
-   * Returns the perceived brightness of the color.
-   * @returns {number} a number in [0-255] range
+   * Returns the perceived brightness of the colour.
+   * @returns {number} a number in the [0, 255] range
    */
   get brightness() {
     const { r, g, b } = this;
@@ -687,123 +781,287 @@ export default class Color {
   }
 
   /**
-   * Returns the color as a RGBA object.
-   * @returns {CP.RGBA}
+   * Returns the colour as an RGBA object.
+   * @returns {CP.RGBA} an {r,g,b,a} object with [0, 255] ranged values
    */
   toRgb() {
+    const {
+      r, g, b, a,
+    } = this;
+
     return {
-      r: Math.round(this.r),
-      g: Math.round(this.g),
-      b: Math.round(this.b),
-      a: this.a,
+      r, g, b, a: roundPart(a * 100) / 100,
     };
   }
 
   /**
-   * Returns the RGBA values concatenated into a string.
-   * @returns {string} the CSS valid color in RGB/RGBA format
+   * Returns the RGBA values concatenated into a CSS3 Module string format.
+   * * rgb(255,255,255)
+   * * rgba(255,255,255,0.5)
+   * @returns {string} the CSS valid colour in RGB/RGBA format
    */
   toRgbString() {
-    const r = Math.round(this.r);
-    const g = Math.round(this.g);
-    const b = Math.round(this.b);
-    return this.a === 1
-      ? `rgb(${r},${g},${b})`
-      : `rgba(${r},${g},${b},${this.roundA})`;
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+    const [R, G, B] = [r, g, b].map(roundPart);
+
+    return a === 1
+      ? `rgb(${R}, ${G}, ${B})`
+      : `rgba(${R}, ${G}, ${B}, ${a})`;
+  }
+
+  /**
+   * Returns the RGBA values concatenated into a CSS4 Module string format.
+   * * rgb(255 255 255)
+   * * rgb(255 255 255 / 50%)
+   * @returns {string} the CSS valid colour in CSS4 RGB format
+   */
+  toRgbCSS4String() {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+    const [R, G, B] = [r, g, b].map(roundPart);
+    const A = a === 1 ? '' : ` / ${roundPart(a * 100)}%`;
+
+    return `rgb(${R} ${G} ${B}${A})`;
+  }
+
+  /**
+   * Returns the hexadecimal value of the colour. When the parameter is *true*
+   * it will find a 3 characters shorthand of the decimal value.
+   *
+   * @param {boolean=} allow3Char when `true` returns shorthand HEX
+   * @returns {string} the hexadecimal colour format
+   */
+  toHex(allow3Char) {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+
+    return a === 1
+      ? rgbToHex(r, g, b, allow3Char)
+      : rgbaToHex(r, g, b, a, allow3Char);
+  }
+
+  /**
+   * Returns the CSS valid hexadecimal vaue of the colour. When the parameter is *true*
+   * it will find a 3 characters shorthand of the value.
+   *
+   * @param {boolean=} allow3Char when `true` returns shorthand HEX
+   * @returns {string} the CSS valid colour in hexadecimal format
+   */
+  toHexString(allow3Char) {
+    return `#${this.toHex(allow3Char)}`;
   }
 
   /**
-   * Returns the HEX value of the color.
-   * @returns {string} the hexadecimal color format
+   * Returns the HEX8 value of the colour.
+   * @param {boolean=} allow4Char when `true` returns shorthand HEX
+   * @returns {string} the CSS valid colour in hexadecimal format
    */
-  toHex() {
-    return rgbToHex(this.r, this.g, this.b);
+  toHex8(allow4Char) {
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+
+    return rgbaToHex(r, g, b, a, allow4Char);
   }
 
   /**
-   * Returns the HEX value of the color.
-   * @returns {string} the CSS valid color in hexadecimal format
+   * Returns the HEX8 value of the colour.
+   * @param {boolean=} allow4Char  when `true` returns shorthand HEX
+   * @returns {string} the CSS valid colour in hexadecimal format
    */
-  toHexString() {
-    return `#${this.toHex()}`;
+  toHex8String(allow4Char) {
+    return `#${this.toHex8(allow4Char)}`;
   }
 
   /**
-   * Returns the color as a HSVA object.
-   * @returns {CP.HSVA} the `{h,s,v,a}` object
+   * Returns the colour as a HSVA object.
+   * @returns {CP.HSVA} the `{h,s,v,a}` object with [0, 1] ranged values
    */
   toHsv() {
-    const { h, s, v } = rgbToHsv(this.r, this.g, this.b);
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+    const { h, s, v } = rgbToHsv(r, g, b);
+
     return {
-      h: h * 360, s, v, a: this.a,
+      h, s, v, a,
     };
   }
 
   /**
-   * Returns the color as a HSLA object.
-   * @returns {CP.HSLA}
+   * Returns the colour as an HSLA object.
+   * @returns {CP.HSLA} the `{h,s,l,a}` object with [0, 1] ranged values
    */
   toHsl() {
-    const { h, s, l } = rgbToHsl(this.r, this.g, this.b);
+    const {
+      r, g, b, a,
+    } = this.toRgb();
+    const { h, s, l } = rgbToHsl(r, g, b);
+
     return {
-      h: h * 360, s, l, a: this.a,
+      h, s, l, a,
     };
   }
 
   /**
-   * Returns the HSLA values concatenated into a string.
-   * @returns {string} the CSS valid color in HSL/HSLA format
+   * Returns the HSLA values concatenated into a CSS3 Module format string.
+   * * `hsl(150, 100%, 50%)`
+   * * `hsla(150, 100%, 50%, 0.5)`
+   * @returns {string} the CSS valid colour in HSL/HSLA format
    */
   toHslString() {
-    const hsl = this.toHsl();
-    const h = Math.round(hsl.h);
-    const s = Math.round(hsl.s * 100);
-    const l = Math.round(hsl.l * 100);
-    return this.a === 1
-      ? `hsl(${h},${s}%,${l}%)`
-      : `hsla(${h},${s}%,${l}%,${this.roundA})`;
+    let {
+      h, s, l, a,
+    } = this.toHsl();
+    h = roundPart(h * 360);
+    s = roundPart(s * 100);
+    l = roundPart(l * 100);
+    a = roundPart(a * 100) / 100;
+
+    return a === 1
+      ? `hsl(${h}, ${s}%, ${l}%)`
+      : `hsla(${h}, ${s}%, ${l}%, ${a})`;
+  }
+
+  /**
+   * Returns the HSLA values concatenated into a CSS4 Module format string.
+   * * `hsl(150deg 100% 50%)`
+   * * `hsl(150deg 100% 50% / 50%)`
+   * @returns {string} the CSS valid colour in CSS4 HSL format
+   */
+  toHslCSS4String() {
+    let {
+      h, s, l, a,
+    } = this.toHsl();
+    h = roundPart(h * 360);
+    s = roundPart(s * 100);
+    l = roundPart(l * 100);
+    a = roundPart(a * 100);
+    const A = a < 100 ? ` / ${roundPart(a)}%` : '';
+
+    return `hsl(${h}deg ${s}% ${l}%${A})`;
+  }
+
+  /**
+   * Returns the colour as an HWBA object.
+   * @returns {CP.HWBA} the `{h,w,b,a}` object with [0, 1] ranged values
+   */
+  toHwb() {
+    const {
+      r, g, b, a,
+    } = this;
+    const { h, w, b: bl } = rgbToHwb(r, g, b);
+    return {
+      h, w, b: bl, a,
+    };
+  }
+
+  /**
+   * Returns the HWBA values concatenated into a string.
+   * @returns {string} the CSS valid colour in HWB format
+   */
+  toHwbString() {
+    let {
+      h, w, b, a,
+    } = this.toHwb();
+    h = roundPart(h * 360);
+    w = roundPart(w * 100);
+    b = roundPart(b * 100);
+    a = roundPart(a * 100);
+    const A = a < 100 ? ` / ${roundPart(a)}%` : '';
+
+    return `hwb(${h}deg ${w}% ${b}%${A})`;
   }
 
   /**
-   * Sets the alpha value on the current color.
-   * @param {number} alpha a new alpha value in [0-1] range.
-   * @returns {Color} a new `Color` instance
+   * Sets the alpha value of the current colour.
+   * @param {number} alpha a new alpha value in the [0, 1] range.
+   * @returns {Color} the `Color` instance
    */
   setAlpha(alpha) {
-    this.a = boundAlpha(alpha);
-    this.roundA = Math.round(100 * this.a) / 100;
-    return this;
+    const self = this;
+    self.a = boundAlpha(alpha);
+    return self;
   }
 
   /**
-   * Saturate the color with a given amount.
-   * @param {number=} amount a value in [0-100] range
-   * @returns {Color} a new `Color` instance
+   * Saturate the colour with a given amount.
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
    */
   saturate(amount) {
-    if (!amount) return this;
-    const hsl = this.toHsl();
-    hsl.s += amount / 100;
-    hsl.s = clamp01(hsl.s);
-    return new Color(hsl);
+    const self = this;
+    if (typeof amount !== 'number') return self;
+    const { h, s, l } = self.toHsl();
+    const { r, g, b } = hslToRgb(h, clamp01(s + amount / 100), l);
+
+    ObjectAssign(self, { r, g, b });
+    return self;
   }
 
   /**
-   * Desaturate the color with a given amount.
-   * @param {number=} amount a value in [0-100] range
-   * @returns {Color} a new `Color` instance
+   * Desaturate the colour with a given amount.
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
    */
   desaturate(amount) {
-    return amount ? this.saturate(-amount) : this;
+    return typeof amount === 'number' ? this.saturate(-amount) : this;
   }
 
   /**
-   * Completely desaturates a color into greyscale.
+   * Completely desaturates a colour into greyscale.
    * Same as calling `desaturate(100)`
-   * @returns {Color} a new `Color` instance
+   * @returns {Color} the `Color` instance
    */
   greyscale() {
-    return this.desaturate(100);
+    return this.saturate(-100);
+  }
+
+  /**
+   * Increase the colour lightness with a given amount.
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
+   */
+  lighten(amount) {
+    const self = this;
+    if (typeof amount !== 'number') return self;
+
+    const { h, s, l } = self.toHsl();
+    const { r, g, b } = hslToRgb(h, s, clamp01(l + amount / 100));
+
+    ObjectAssign(self, { r, g, b });
+    return self;
+  }
+
+  /**
+   * Decrease the colour lightness with a given amount.
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
+   */
+  darken(amount) {
+    return typeof amount === 'number' ? this.lighten(-amount) : this;
+  }
+
+  /**
+   * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+   * Values outside of this range will be wrapped into this range.
+   *
+   * @param {number=} amount a value in the [0, 100] range
+   * @returns {Color} the `Color` instance
+   */
+  spin(amount) {
+    const self = this;
+    if (typeof amount !== 'number') return self;
+
+    const { h, s, l } = self.toHsl();
+    const { r, g, b } = hslToRgb(clamp01(((h * 360 + amount) % 360) / 360), s, l);
+
+    ObjectAssign(self, { r, g, b });
+    return self;
   }
 
   /** Returns a clone of the current `Color` instance. */
@@ -812,49 +1070,54 @@ export default class Color {
   }
 
   /**
-   * Returns the color value in CSS valid string format.
-   * @returns {string}
+   * Returns the colour value in CSS valid string format.
+   * @param {boolean=} allowShort when *true*, HEX values can be shorthand
+   * @returns {string} the CSS valid colour in the configured format
    */
-  toString() {
-    const { format } = this;
+  toString(allowShort) {
+    const self = this;
+    const { format } = self;
 
-    if (format === 'rgb') {
-      return this.toRgbString();
-    }
-    if (format === 'hsl') {
-      return this.toHslString();
-    }
-    return this.toHexString();
+    if (format === 'hex') return self.toHexString(allowShort);
+    if (format === 'hsl') return self.toHslString();
+    if (format === 'hwb') return self.toHwbString();
+
+    return self.toRgbString();
   }
 }
 
 ObjectAssign(Color, {
-  colorNames,
+  ANGLES,
+  CSS_ANGLE,
   CSS_INTEGER,
   CSS_NUMBER,
   CSS_UNIT,
-  PERMISSIVE_MATCH3,
-  PERMISSIVE_MATCH4,
+  CSS_UNIT2,
+  PERMISSIVE_MATCH,
   matchers,
   isOnePointZero,
   isPercentage,
   isValidCSSUnit,
+  pad2,
+  clamp01,
   bound01,
   boundAlpha,
-  clamp01,
-  getHexFromColorName,
-  convertToPercentage,
+  getRGBFromName,
   convertHexToDecimal,
-  pad2,
-  rgbToRgb,
+  convertDecimalToHex,
   rgbToHsl,
   rgbToHex,
   rgbToHsv,
+  rgbToHwb,
+  rgbaToHex,
   hslToRgb,
   hsvToRgb,
-  hue2rgb,
+  hueToRgb,
+  hwbToRgb,
   parseIntFromHex,
   numberInputToObject,
   stringInputToObject,
   inputToRGB,
+  roundPart,
+  ObjectAssign,
 });