diff --git a/src/postcss/mixins.js b/src/postcss/mixins.js
index c6ee150..31befe4 100644
--- a/src/postcss/mixins.js
+++ b/src/postcss/mixins.js
@@ -6,7 +6,7 @@ const postcssMixins = {
   // TODO - untest
   defineHSL(mixin, name, hue, sat, light) {
     const obj = {};
-    obj[name] = name;
+    obj[name] = `hsl(${hue}, ${sat}, ${light})`;
     // need to ensure hue is a string otherwise postcss (is it postcss?) appends
     // 'px' to the property's value.
     obj[`${name}__h`] = hue.toString();