diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
index e6574e1ccc9..10976050610 100644
--- a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
+++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
@@ -20,6 +20,7 @@ export class ProgressBarField extends Component {
         isCurrentValueEditable: { type: Boolean, optional: true },
         isMaxValueEditable: { type: Boolean, optional: true },
         title: { type: String, optional: true },
+        overflowClass: { type: String, optional: true },
     };
 
     setup() {
@@ -155,6 +156,7 @@ export const progressBarField = {
         isCurrentValueEditable: options.editable && !options.edit_max_value,
         isMaxValueEditable: options.editable && options.edit_max_value,
         title: attrs.title,
+        overflowClass: options.overflow_class || 'bg-secondary',
     }),
 };
 
diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
index 73c855dc17b..caeda54fd5d 100644
--- a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
+++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
@@ -5,7 +5,7 @@
         <div class="o_progressbar w-100 d-flex align-items-center" t-ref="numpadDecimal">
             <div t-if="props.title" class="o_progressbar_title text-nowrap pe-1"><t t-esc="props.title"/></div>
             <div class="o_progress align-middle overflow-hidden" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
-                <div t-attf-class="{{ state.currentValue > state.maxValue ? 'bg-secondary' : 'bg-primary' }} h-100" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
+                <div t-attf-class="{{ state.currentValue > state.maxValue ? props.overflowClass : 'bg-primary' }} h-100" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
             </div>
             <div class="o_progressbar_value d-flex">
                 <t t-if="isPercentage">
diff --git a/addons/web/static/tests/views/fields/progress_bar_field_tests.js b/addons/web/static/tests/views/fields/progress_bar_field_tests.js
index 3a75eb39612..3ac95b6777a 100644
--- a/addons/web/static/tests/views/fields/progress_bar_field_tests.js
+++ b/addons/web/static/tests/views/fields/progress_bar_field_tests.js
@@ -538,4 +538,26 @@ QUnit.module("Fields", (hooks) => {
             assert.verifySteps(["Show error message"], "The error message was shown correctly");
         }
     );
+
+    QUnit.test(
+        "ProgressBarField: color is correctly set when value > max value",
+        async function (assert) {
+            serverData.models.partner.records[0].float_field = 101;
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="float_field" widget="progressbar" options="{'overflow_class': 'bg-warning'}"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsOnce(
+                target, ".o_progressbar .bg-warning",
+                "As the value has excedded the max value, the color should be set to bg-warning"
+            );
+        }
+    );
 });