diff --git a/lib/colorStops.js b/lib/colorStops.js
index 0b40e89..1a96d1e 100644
--- a/lib/colorStops.js
+++ b/lib/colorStops.js
@@ -15,7 +15,12 @@ module.exports = (colors, coordinates, alphaDecimals = 5, colorMode = 'lrgb') =>
   coordinates.forEach(coordinate => {
     const ammount = coordinate.y
     const percent = coordinate.x * 100
-    let color = chroma.mix(colors[0], colors[1], ammount, colorMode).css('hsl')
+    let color = chroma.mix(
+      helpers.chromaDegreesWorkaround(colors[0]),
+      helpers.chromaDegreesWorkaround(colors[1]),
+      ammount,
+      colorMode
+    ).css('hsl')
     color = helpers.roundHslAlpha(color, alphaDecimals)
     if (Number(coordinate.x) !== 0 && Number(coordinate.x) !== 1) {
       colorStops.push(`${color} ${+percent.toFixed(2)}%`)
diff --git a/lib/helpers.js b/lib/helpers.js
index 3cc2b0b..c399b8c 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -84,6 +84,28 @@ exports.roundHslAlpha = (color, alphaDecimals) => {
   return color
 }
 
+/**
+ * Chroma.js 'deg' unit workaround.
+ *
+ * Chroma.js doesn't yet support hsl()/hsla() colors that have the 'deg' unit,
+ * so this strips the unit out to prevent Chroma.js throwing an error. If no
+ * unit is specified for the hue value, the CSS spec says that it must be
+ * interpreted as degrees for backward compatibility.
+ *
+ * @param {String} color A CSS color value.
+ *
+ * @return {String} The color parameter with any 'deg' unit stripped from the
+ * hue.
+ *
+ * @see https://github.com/gka/chroma.js/issues/297
+ *   Open Chroma.js issue regarding the newer color formats.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
+ */
+exports.chromaDegreesWorkaround = (color) => {
+  return color.replaceAll(/(hsla?\(\s*\d+)deg([,\s].+)$/gm, '$1$2');
+}
+
 /**
  * Wrap a string telling the user we couldn't parse it
  * @param {String} input A string