diff --git a/docs/components/color-picker.md b/docs/components/color-picker.md
index 1fd0487a7..b3ac54157 100644
--- a/docs/components/color-picker.md
+++ b/docs/components/color-picker.md
@@ -32,7 +32,7 @@ const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
 
 ### Opacity
 
-Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA or HSVA based on `format`.
+Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, HSLA, or HSVA based on `format`.
 
 ```html preview
 <sl-color-picker value="#f5a623ff" opacity label="Select a color"></sl-color-picker>
@@ -46,7 +46,7 @@ const App = () => <SlColorPicker opacity label="Select a color" />;
 
 ### Formats
 
-Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl` and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
+Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, `hsl`, and `hsv`. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
 
 To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
 
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index bcee6845d..356d91b62 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -125,7 +125,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
   @property() label = '';
 
   /**
-   * The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA and HSVA respectively. The color
+   * 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.
    */
   @property() format: 'hex' | 'rgb' | 'hsl' | 'hsv' = 'hex';
@@ -159,7 +159,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
 
   /**
    * An array of predefined color swatches to display. Can include any format the color picker can parse, including
-   * HEX(A), RGB(A), HSL(A), HSV(A) and CSS color names.
+   * HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.
    */
   @property({ attribute: false }) swatches: string[] = [
     '#d0021b',
@@ -518,7 +518,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     }
 
     const hslColor = color.toHsl();
-    // adjust saturation and lightness from 0-1 to 0-100
+    // Adjust saturation and lightness from 0-1 to 0-100
     const hsl = {
       h: hslColor.h,
       s: hslColor.s * 100,
@@ -532,7 +532,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     const hexa = color.toHex8String();
 
     const hsvColor = color.toHsv();
-    // adjust saturation and value from 0-1 to 0-100
+    // Adjust saturation and value from 0-1 to 0-100
     const hsv = {
       h: hsvColor.h,
       s: hsvColor.s * 100,