diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1358c2498..ce9f88a0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,12 @@
 
 ## Next
 
+- Added `name` prop to `sl-color-picker`
 - Fixed a bug where swapping an animated element wouldn't restart the animation in `sl-animation`
 - Fixed a bug where the cursor was incorrect when `sl-select` was disabled
 - Fixed a bug where `slBlur` and `slFocus` were emitted twice in `sl-select`
 - Fixed a bug where clicking on `sl-menu` wouldn't focus it
+- Fixed a bug where `sl-color-picker` wasn't submitted with forms
 - Improved keyboard logic in `sl-dropdown`, `sl-menu`, and `sl-select`
 - Updated `sl-animation` to stable
 - Updated to Stencil 2.0 (you may need to purge `node_modules` and run `npm install` after pulling)
diff --git a/src/components.d.ts b/src/components.d.ts
index cb5891b3e..bb678c50d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -267,6 +267,10 @@ export namespace Components {
           * Set to true to render the color picker inline rather than inside a dropdown.
          */
         "inline": boolean;
+        /**
+          * The input's name attribute.
+         */
+        "name": string;
         /**
           * Whether to show the opacity slider.
          */
@@ -1650,6 +1654,10 @@ declare namespace LocalJSX {
           * Set to true to render the color picker inline rather than inside a dropdown.
          */
         "inline"?: boolean;
+        /**
+          * The input's name attribute.
+         */
+        "name"?: string;
         /**
           * Emitted after the color picker closes and all transitions are complete.
          */
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index 1867d04de..51bcb8a68 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -61,6 +61,9 @@ export class ColorPicker {
   /** When `inline` is true, this determines the size of the color picker's trigger. */
   @Prop() size: 'small' | 'medium' | 'large' = 'medium';
 
+  /** The input's name attribute. */
+  @Prop({ reflect: true }) name = '';
+
   /** Set to true to disable the color picker. */
   @Prop() disabled = false;
 
@@ -690,6 +693,7 @@ export class ColorPicker {
               part="input"
               size="small"
               type="text"
+              name={this.name}
               pattern="[a-fA-F\d]+"
               value={this.textInputValue}
               disabled={this.disabled}
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index b8fb60244..2ba6e96f6 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -113,6 +113,11 @@ export class Form {
         serialize: (el: HTMLSlCheckboxElement, formData) =>
           el.name && el.checked && !el.disabled ? formData.append(el.name, el.value) : null
       },
+      {
+        tag: 'sl-color-picker',
+        serialize: (el: HTMLSlCheckboxElement, formData) =>
+          el.name && !el.disabled ? formData.append(el.name, el.value) : null
+      },
       {
         tag: 'sl-input',
         serialize: (el: HTMLSlInputElement, formData) =>