diff --git a/docs/components/color-picker.md b/docs/components/color-picker.md
index c3283d7ad..890772294 100644
--- a/docs/components/color-picker.md
+++ b/docs/components/color-picker.md
@@ -25,7 +25,7 @@ Set the color picker's format with the `format` attribute. Valid options include
 ```html preview
 <sl-color-picker format="hex" value="#4a90e2"></sl-color-picker>
 <sl-color-picker format="rgb" value="rgb(80, 227, 194)"></sl-color-picker>
-<sl-color-picker format="hsl" value="hsl(90, 69%, 72%)"></sl-color-picker>
+<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)"></sl-color-picker>
 ```
 
 ### Inline
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index be3b71272..e4d65eacc 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -421,6 +421,8 @@ export class ColorPicker {
 
       if (rgba[3] && rgba[3].indexOf('%') > -1) {
         rgba[3] = (Number(rgba[3].replace(/%/g, '')) / 100).toString();
+      } else {
+        rgba[3] = '1';
       }
 
       return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3]})`;
@@ -435,6 +437,8 @@ export class ColorPicker {
 
       if (hsla[3] && hsla[3].indexOf('%') > -1) {
         hsla[3] = (Number(hsla[3].replace(/%/g, '')) / 100).toString();
+      } else {
+        hsla[3] = '1';
       }
 
       return `hsla(${hsla[0]}, ${hsla[1]}, ${hsla[2]}, ${hsla[3]})`;