diff --git a/docs/docs/components/color-picker.md b/docs/docs/components/color-picker.md
index c9e5854ae..d8d12acb1 100644
--- a/docs/docs/components/color-picker.md
+++ b/docs/docs/components/color-picker.md
@@ -67,36 +67,10 @@ Use the `size` attribute to change the color picker's trigger size.
 <wa-color-picker size="large" label="Select a color"></wa-color-picker>
 ```
 
-### Inline
-
-The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.
-
-```html {.example}
-<wa-color-picker inline label="Select a color"></wa-color-picker>
-```
-
 ### Disabled
 
 The color picker can be rendered as disabled.
 
 ```html {.example}
 <wa-color-picker disabled label="Select a color"></wa-color-picker>
-```
-
-### Changing label placement (start)
-
-You can change where to display the label to be either at the "start" or "end" of the color picker. The default is "top". "bottom" is omitted because it will generally interfere with the dropdown for the color picker.
-
-Here is a color picker with a "start" label-placement.
-
-```html {.example}
-<wa-color-picker label="Select a color" label-placement="start"></wa-color-picker>
-```
-
-### Changing label placement (end)
-
-You can change where to display the label to be either at the "start" or "end" of the color picker. The default is "top". "bottom" is omitted because it will generally interfere with the dropdown for the color picker.
-
-```html {.example}
-<wa-color-picker label="Select a color" label-placement="end"></wa-color-picker>
 ```
\ No newline at end of file
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 1dd6d7706..da3aef446 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -162,11 +162,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
    */
   @property() label = '';
 
-  /**
-   * Where to place the label in relation to the color picker. The default is "top" (showing above the color picker) but can be configured to show next to the color picker. Note, "bottom" is not supported because it generally interferes with the "popup"
-   */
-  @property({ attribute: "label-placement" }) labelPlacement: "top" | "start" | "end" = "top"
-
   /**
    * The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
    * picker will accept user input in any format (including CSS color names) and convert it to the desired format.
@@ -1038,17 +1033,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
       </div>
     `;
 
-    const buttonLabel = html`
-      <!-- Ideally this should be a <label> but it causes click event to fire twice causing the popup to open then close. -->
-      <div
-        id="trigger-label"
-        part="trigger-label"
-        class="color-dropdown__label"
-      >
-        <slot name="label">${this.label}</slot>
-      </div>
-    `
-
     // Render as a dropdown
     return html`
       <wa-dropdown
@@ -1061,9 +1045,15 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         @wa-after-hide=${this.handleAfterHide}
       >
         <div class="color-dropdown__container" part="trigger-container" slot="trigger">
-          ${when(this.labelPlacement === "top" || this.labelPlacement === "start",
-            () => buttonLabel
-          )}
+          <!-- Ideally this should be a <label> but it causes click event to fire twice causing the popup to open then close. -->
+          <div
+            id="trigger-label"
+            part="trigger-label"
+            class="color-dropdown__label"
+          >
+            <slot name="label">${this.label}</slot>
+          </div>
+
           <button
             id="trigger"
             part="trigger"