diff --git a/src/components/color-picker/color-picker.test.ts b/src/components/color-picker/color-picker.test.ts
index e2bbb167d..1273a58ee 100644
--- a/src/components/color-picker/color-picker.test.ts
+++ b/src/components/color-picker/color-picker.test.ts
@@ -46,6 +46,16 @@ describe('<sl-color-picker>', () => {
     expect(trigger?.style.color).to.equal('rgb(0, 0, 0)');
   });
 
+  it('should display a color with opacity when an initial value with opacity is provided', async () => {
+    const el = await fixture<SlColorPicker>(html` <sl-color-picker opacity value="#ff000050"></sl-color-picker> `);
+    const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="trigger"]');
+    const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="preview"]');
+    const previewColor = getComputedStyle(previewButton!).getPropertyValue('--preview-color');
+
+    expect(trigger!.style.color).to.equal('rgba(255, 0, 0, 0.314)');
+    expect(previewColor.startsWith('hsla(0deg, 100%, 50%, 0.31')).to.be.true;
+  });
+
   describe('when resetting a form', () => {
     it('should reset the element to its initial value', async () => {
       const form = await fixture<HTMLFormElement>(html`