diff --git a/addons/stock/report/report_stock_reception.xml b/addons/stock/report/report_stock_reception.xml
index d1413a30dc0..da29ac41954 100644
--- a/addons/stock/report/report_stock_reception.xml
+++ b/addons/stock/report/report_stock_reception.xml
@@ -50,7 +50,7 @@
                                 <a href="#" t-att-res-model="doc_model" view-type="form" t-att-res-id="doc.id">
                                     <t t-esc="doc.display_name"/>
                                 </a>
-                                <span t-field="doc.state" t-attf-class="badge rounded-pill #{'bg-success-light' if doc.state == 'done' else 'bg-info-light'}"/>
+                                <span t-field="doc.state" t-attf-class="badge rounded-pill bg-opacity-50 #{'bg-success' if doc.state == 'done' else 'bg-info'}"/>
                             </div>
                         </t>
                     </t>
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
index 5122972e5e5..d6d6b4e3312 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
@@ -19,7 +19,7 @@ odoo.define('web.basic_fields_owl', function (require) {
      */
     class FieldBadge extends AbstractField {
         _getClassFromDecoration(decoration) {
-            return `bg-${decoration.split('-')[1]}-light`;
+            return `bg-${decoration.split('-')[1]}`;
         }
     }
     FieldBadge.description = _lt("Badge");
diff --git a/addons/web/static/src/legacy/xml/fields.xml b/addons/web/static/src/legacy/xml/fields.xml
index da4ba247467..2eacd76eb79 100644
--- a/addons/web/static/src/legacy/xml/fields.xml
+++ b/addons/web/static/src/legacy/xml/fields.xml
@@ -7,7 +7,7 @@
     </t>
 
     <t t-name="web.FieldBadge" owl="1">
-        <span class="badge rounded-pill o_field_badge" t-esc="_formatValue(value)"/>
+        <span class="badge rounded-pill o_field_badge bg-opacity-50" t-esc="_formatValue(value)"/>
     </t>
 
 </templates>
diff --git a/addons/web/static/src/libs/bootstrap/utilities_custom.scss b/addons/web/static/src/libs/bootstrap/utilities_custom.scss
index 852315bd0d3..02bd76ac428 100644
--- a/addons/web/static/src/libs/bootstrap/utilities_custom.scss
+++ b/addons/web/static/src/libs/bootstrap/utilities_custom.scss
@@ -114,6 +114,11 @@ $utilities: map-merge(
             property: cursor,
             values: default pointer,
         ),
+        "bg-opacity": (
+            css-var: true,
+            class: bg-opacity,
+            values: $utilities-opacity,
+        ),
         "flex-basis": (
             responsive: true,
             property: flex-basis,
diff --git a/addons/web/static/src/views/fields/badge/badge_field.js b/addons/web/static/src/views/fields/badge/badge_field.js
index 08c5077bdb4..a1c176634fd 100644
--- a/addons/web/static/src/views/fields/badge/badge_field.js
+++ b/addons/web/static/src/views/fields/badge/badge_field.js
@@ -18,7 +18,7 @@ export class BadgeField extends Component {
     get classFromDecoration() {
         for (const decorationName in this.props.decorations) {
             if (this.props.decorations[decorationName]) {
-                return `bg-${decorationName}-light`;
+                return `bg-${decorationName}`;
             }
         }
         return "";
diff --git a/addons/web/static/src/views/fields/badge/badge_field.xml b/addons/web/static/src/views/fields/badge/badge_field.xml
index bfd48b173c5..7dab21d1af4 100644
--- a/addons/web/static/src/views/fields/badge/badge_field.xml
+++ b/addons/web/static/src/views/fields/badge/badge_field.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="web.BadgeField" owl="1">
-        <span t-if="props.value" class="badge rounded-pill" t-att-class="classFromDecoration" t-esc="formattedValue" />
+        <span t-if="props.value" class="badge rounded-pill bg-opacity-50" t-att-class="classFromDecoration" t-esc="formattedValue" />
     </t>
 
 </templates>
diff --git a/addons/web/static/tests/legacy/fields/basic_fields_tests.js b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
index 44cb9bb3980..3fd0d843acc 100644
--- a/addons/web/static/tests/legacy/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
@@ -9275,14 +9275,14 @@ QUnit.module('Legacy basic_fields', {
         });
 
         assert.containsN(list, '.o_field_badge[name="foo"]', 5);
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger-light');
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning-light');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning.bg-opacity-50');
 
         await list.reload();
 
         assert.containsN(list, '.o_field_badge[name="foo"]', 5);
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger-light');
-        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning-light');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-danger.bg-opacity-50');
+        assert.containsOnce(list, '.o_field_badge[name="foo"].bg-warning.bg-opacity-50');
 
         list.destroy();
     });
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
index 8af27dc2df6..d1d7f9a2519 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
@@ -9908,14 +9908,14 @@ QUnit.module('Legacy fields', {}, function () {
             });
 
             assert.containsN(form, '.o_data_row', 2);
-            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning-light');
+            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning');
 
             await testUtils.dom.click(form.$('.o_data_row .o_data_cell:first'));
             await testUtils.owlCompatibilityExtraNextTick();
             await testUtils.fields.editInput(form.$('.o_selected_row .o_field_integer'), '44');
             await testUtils.owlCompatibilityExtraNextTick();
 
-            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning-light');
+            assert.hasClass(form.$('.o_data_row:nth(1) .o_field_badge'), 'bg-warning');
 
             form.destroy();
         });
diff --git a/addons/web/static/tests/views/fields/badge_field_tests.js b/addons/web/static/tests/views/fields/badge_field_tests.js
index 069c3063777..e1fc962565a 100644
--- a/addons/web/static/tests/views/fields/badge_field_tests.js
+++ b/addons/web/static/tests/views/fields/badge_field_tests.js
@@ -124,7 +124,7 @@ QUnit.module("Fields", (hooks) => {
         });
 
         assert.containsN(target, '.o_field_badge[name="display_name"]', 4);
-        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-danger-light');
-        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-warning-light');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-danger');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-warning');
     });
 });
diff --git a/addons/web/static/tests/views/fields/one2many_field_tests.js b/addons/web/static/tests/views/fields/one2many_field_tests.js
index 2925976ba7c..404ed1c3e35 100644
--- a/addons/web/static/tests/views/fields/one2many_field_tests.js
+++ b/addons/web/static/tests/views/fields/one2many_field_tests.js
@@ -10855,7 +10855,7 @@ QUnit.module("Fields", (hooks) => {
         assert.containsN(target, ".o_data_row", 2);
         assert.hasClass(
             target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
-            "bg-warning-light"
+            "bg-warning"
         );
 
         await click(target.querySelector(".o_data_row .o_data_cell"));
@@ -10863,7 +10863,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.hasClass(
             target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
-            "bg-warning-light"
+            "bg-warning"
         );
     });