fixes #704

src/components/color-picker/color-picker.test.ts

@@ -38,4 +38,11 @@ describe('<sl-color-picker>', () => {
 
     expect(opacitySlider).to.exist;
   });
+
+  it('should display a color when an initial value is provided', async () => {
+    const el = await fixture<SlColorPicker>(html` <sl-color-picker value="#000"></sl-color-picker> `);
+    const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="trigger"]');
+
+    expect(trigger?.style.color).to.equal('rgb(0, 0, 0)');
+  });
 });

src/components/color-picker/color-picker.ts

@@ -164,7 +164,9 @@ export default class SlColorPicker extends LitElement {
   /** The locale to render the component in. */
   @property() lang: string;
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     if (!this.setColor(this.value)) {
       this.setColor(`#ffff`);
     }