Don't change opacity of gradient in opacity-slider as value change and value itself may contain alpha

Author: bjarnef

packages/uui-color-picker/lib/uui-color-picker.element.ts

@@ -560,6 +560,23 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     return this.uppercase ? string.toUpperCase() : string.toLowerCase();
   }
 
+  /** Generates a hex string from HSL values. Hue must be 0-360. All other arguments must be 0-100. */
+  private getHexString(
+    hue: number,
+    saturation: number,
+    lightness: number,
+    alpha = 100
+  ) {
+    const color = colord(
+      `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
+    );
+    if (!color.isValid()) {
+      return '';
+    }
+
+    return color.toHex();
+  }
+
   private _syncValues() {
     this.inputValue = this.getFormattedValue(this.format);
     this.value = this.inputValue;
@@ -595,7 +612,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
                     class="opacity-slider"
                     .value=${Math.round(this.alpha)}
                     type="opacity"
-                    .color=${this.value}
+                    .color=${this.getHexString(this.hue, this.saturation, this.lightness)}
                     @change=${this.handleAlphaChange}>
                   </uui-color-slider>
                 `