diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md
index cd7b40d85..f85bc2154 100644
--- a/docs/components/progress-ring.md
+++ b/docs/components/progress-ring.md
@@ -5,7 +5,7 @@
 Progress rings are used to show the progress of a determinate operation in a circular fashion.
 
 ```html preview
-<sl-progress-ring percentage="50"></sl-progress-ring><br>
+<sl-progress-ring percentage="50"></sl-progress-ring>
 ```
 
 ## Examples
@@ -15,7 +15,7 @@ Progress rings are used to show the progress of a determinate operation in a cir
 Use the `size` attribute to set the diameter of the progress ring.
 
 ```html preview
-<sl-progress-ring percentage="50" size="200"></sl-progress-ring><br>
+<sl-progress-ring percentage="50" size="200"></sl-progress-ring>
 ```
 
 ### Stroke Width
@@ -23,7 +23,18 @@ Use the `size` attribute to set the diameter of the progress ring.
 Use the `stroke-width` attribute to set the width of the progress ring's indicator.
 
 ```html preview
-<sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring><br>
+<sl-progress-ring percentage="50" stroke-width="10"></sl-progress-ring>
+```
+
+### Colors
+
+To change the color, use the `--track-color` and `--indicator-color` custom properties.
+
+```html preview
+<sl-progress-ring 
+  percentage="50" 
+  style="--track-color: #ffe2c6; --indicator-color: tomato;"
+></sl-progress-ring>
 ```
 
 ### Labels
diff --git a/src/components/progress-ring/progress-ring.scss b/src/components/progress-ring/progress-ring.scss
index dfb663e0f..d8c5f57bd 100644
--- a/src/components/progress-ring/progress-ring.scss
+++ b/src/components/progress-ring/progress-ring.scss
@@ -1,7 +1,14 @@
 @import 'component';
 
+/**
+ * @prop --track-color: The track color.
+ * @prop --indicator-color: The indicator color.
+ */
 :host {
   display: inline-flex;
+
+  --track-color: var(--sl-color-gray-90);
+  --indicator-color: var(--sl-color-primary-50);
 }
 
 .progress-ring {
@@ -12,11 +19,11 @@
 }
 
 .progress-ring__track {
-  stroke: var(--sl-color-gray-90);
+  stroke: var(--track-color);
 }
 
 .progress-ring__indicator {
-  stroke: var(--sl-color-primary-50);
+  stroke: var(--indicator-color);
   transition: 0.35s stroke-dashoffset, 0.35s stroke;
   transform: rotate(-90deg);
   transform-origin: 50% 50%;