diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts
index be29edd93..300d4e2e0 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -428,6 +428,9 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
   }
 
   private _renderColorPicker() {
+    const previewColor = this.value
+      ? `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
+      : 'transparent';
     return html`
       <div
         class=${classMap({
@@ -478,11 +481,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
             class="color-picker__preview color-picker__transparent-bg"
             title="Copy"
             aria-label="Copy"
-            style=${styleMap({
-              '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${
-                this.lightness
-              }%, ${this.alpha / 100})`,
-            })}
+            style=${styleMap({ '--preview-color': previewColor })}
             @click=${this.handleCopy}></button>
         </div>
         <div class="color-picker__user-input" aria-live="polite">
@@ -547,6 +546,9 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
   }
 
   private _renderPreviewButton() {
+    const previewColor = this.value
+      ? `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
+      : 'transparent';
     return html`<button
         type="button"
         part="trigger"
@@ -559,11 +561,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
           'color-dropdown__trigger--large': this.size === 'large',
           'color-picker__transparent-bg': true,
         })}
-        style=${styleMap({
-          '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${
-            this.lightness
-          }%, ${this.alpha / 100})`,
-        })}
+        style=${styleMap({ '--preview-color': previewColor })}
         ?disabled=${this.disabled}
         aria-haspopup="true"
         aria-expanded="false"
diff --git a/packages/uui-color-picker/lib/uui-color-picker.story.ts b/packages/uui-color-picker/lib/uui-color-picker.story.ts
index 7ca23d0bf..e8026212f 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.story.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.story.ts
@@ -92,7 +92,7 @@ export const Inline: Story = {
 export const Opacity: Story = {
   args: {
     opacity: true,
-    value: undefined,
+    value: swatchesTransparent[8],
     inline: true,
   },
 };
@@ -100,6 +100,7 @@ export const Opacity: Story = {
 export const Readonly: Story = {
   args: {
     readonly: true,
+    value: 'rgb(75, 145, 226)',
   },
 };
 
diff --git a/packages/uui-color-slider/lib/uui-color-slider.element.ts b/packages/uui-color-slider/lib/uui-color-slider.element.ts
index 543e0c373..ed8afc755 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.element.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.element.ts
@@ -81,7 +81,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
    * @attr
    * @default 0
    */
-  @property() value = 0;
+  @property({ type: Number }) value = 0;
 
   /**
    * Sets the color slider to readonly mode.
@@ -258,7 +258,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
   }
 
   render() {
-    return html` <div
+    return html`<div
         part="slider"
         id="color-slider"
         role="slider"
diff --git a/packages/uui-color-slider/lib/uui-color-slider.story.ts b/packages/uui-color-slider/lib/uui-color-slider.story.ts
index b5ee5a7e9..045a12660 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.story.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.story.ts
@@ -72,6 +72,7 @@ export const Advanced: Story = {
         value: 0,
         min: 0,
         max: 360,
+        precision: 1,
       },
       {
         label: 'S',
@@ -80,6 +81,7 @@ export const Advanced: Story = {
         value: 100,
         min: 0,
         max: 100,
+        precision: 1,
       },
       {
         label: 'L',
@@ -88,6 +90,7 @@ export const Advanced: Story = {
         value: 50,
         min: 0,
         max: 100,
+        precision: 1,
       },
       {
         label: 'A',
@@ -192,10 +195,12 @@ export const Advanced: Story = {
               .value=${slider.value}
               .min=${slider.min}
               .max=${slider.max}
-              .color=${slider.type !== 'hue'
-                ? getHexString(value.h, value.s, value.l)
-                : undefined}
-              ?precision=${ifDefined(slider.precision)}
+              color=${ifDefined(
+                slider.type !== 'hue'
+                  ? getHexString(value.h, value.s, value.l)
+                  : undefined,
+              )}
+              .precision=${slider.precision}
               @change=${(e: Event) => handleSliderChange(e, slider)}
               style=${styleMap({
                 '--uui-slider-background-image':