diff --git a/app/assets/javascripts/lib/utils/color_utils.js b/app/assets/javascripts/lib/utils/color_utils.js
index 3d8df4fde0589591349c20427c161efe9943585f..a9f4257e28bf8cab315155a2d4769172d17487d3 100644
--- a/app/assets/javascripts/lib/utils/color_utils.js
+++ b/app/assets/javascripts/lib/utils/color_utils.js
@@ -8,7 +8,7 @@ const colorValidatorEl = document.createElement('div');
  * element’s color property. If the color expression is valid,
  * the DOM API will accept the value.
  *
- * @param {String} color color expression rgba, hex, hsla, etc.
+ * @param {String} colorExpression color expression rgba, hex, hsla, etc.
  */
 export const isValidColorExpression = (colorExpression) => {
   colorValidatorEl.style.color = '';
@@ -17,32 +17,6 @@ export const isValidColorExpression = (colorExpression) => {
   return colorValidatorEl.style.color.length > 0;
 };
 
-/**
- * Convert hex color to rgb array
- *
- * @param hex string
- * @returns array|null
- */
-export const hexToRgb = (hex) => {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  const fullHex = hex.replace(shorthandRegex, (_m, r, g, b) => r + r + g + g + b + b);
-
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
-  return result
-    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
-    : null;
-};
-
-export const textColorForBackground = (backgroundColor) => {
-  const [r, g, b] = hexToRgb(backgroundColor);
-
-  if (r + g + b > 500) {
-    return '#333333';
-  }
-  return '#FFFFFF';
-};
-
 /**
  * Check whether a color matches the expected hex format
  *
diff --git a/app/assets/javascripts/monitoring/components/charts/anomaly.vue b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
index a995497ab9c7e393e0fab3abcac667540308e6e4..b6eb1a23f87bccdc79c06e21e12e5922b83a3296 100644
--- a/app/assets/javascripts/monitoring/components/charts/anomaly.vue
+++ b/app/assets/javascripts/monitoring/components/charts/anomaly.vue
@@ -1,8 +1,9 @@
 <script>
 import { GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
+import { hexToRgba } from '@gitlab/ui/dist/utils/utils';
+
 import produce from 'immer';
 import { flattenDeep, isNumber } from 'lodash';
-import { hexToRgb } from '~/lib/utils/color_utils';
 import { roundOffFloat } from '~/lib/utils/common_utils';
 import { areaOpacityValues, symbolSizes, colorValues, panelTypes } from '../../constants';
 import { graphDataValidatorForAnomalyValues } from '../../utils';
@@ -20,7 +21,7 @@ const LOWER = 2;
  */
 const AREA_COLOR = colorValues.anomalyAreaColor;
 const AREA_OPACITY = areaOpacityValues.default;
-const AREA_COLOR_RGBA = `rgba(${hexToRgb(AREA_COLOR).join(',')},${AREA_OPACITY})`;
+const AREA_COLOR_RGBA = hexToRgba(AREA_COLOR, AREA_OPACITY);
 
 /**
  * The anomaly component highlights when a metric shows
diff --git a/app/assets/javascripts/profile/preferences/components/diffs_colors.vue b/app/assets/javascripts/profile/preferences/components/diffs_colors.vue
index 1992819ab82560ff607d9972981e2fe27e48354c..5a87ed7996e981ef9dc00764dd7ae30916402e8c 100644
--- a/app/assets/javascripts/profile/preferences/components/diffs_colors.vue
+++ b/app/assets/javascripts/profile/preferences/components/diffs_colors.vue
@@ -1,7 +1,9 @@
 <script>
-import { validateHexColor, hexToRgb } from '~/lib/utils/color_utils';
+import { hexToRgba } from '@gitlab/ui/dist/utils/utils';
+
 import { s__ } from '~/locale';
 import { getCssVariable } from '~/lib/utils/css_utils';
+import { validateHexColor } from '~/lib/utils/color_utils';
 import ColorPicker from '~/vue_shared/components/color_picker/color_picker.vue';
 import DiffsColorsPreview from './diffs_colors_preview.vue';
 
@@ -48,17 +50,15 @@ export default {
     previewStyle() {
       let style = {};
       if (this.isValidColor(this.deletionColor)) {
-        const colorRgb = hexToRgb(this.deletionColor).join();
         style = {
           ...style,
-          '--diff-deletion-color': `rgba(${colorRgb},0.2)`,
+          '--diff-deletion-color': hexToRgba(this.deletionColor, 0.2),
         };
       }
       if (this.isValidColor(this.additionColor)) {
-        const colorRgb = hexToRgb(this.additionColor).join();
         style = {
           ...style,
-          '--diff-addition-color': `rgba(${colorRgb},0.2)`,
+          '--diff-addition-color': hexToRgba(this.additionColor, 0.2),
         };
       }
       return style;
diff --git a/ee/spec/models/epic_spec.rb b/ee/spec/models/epic_spec.rb
index 79ee8dacdae1509df079e52b9a67a162498bac22..5b05cc2f2df917c0b989c021d346ba83c715c740 100644
--- a/ee/spec/models/epic_spec.rb
+++ b/ee/spec/models/epic_spec.rb
@@ -1005,7 +1005,7 @@ def as_item(item)
 
     where(:epic_color, :expected_text_color) do
       ::EE::Epic::DEFAULT_COLOR | ::Gitlab::Color.of('#FFFFFF')
-      ::Gitlab::Color.of('#FFFFFF') | ::Gitlab::Color.of('#333333')
+      ::Gitlab::Color.of('#FFFFFF') | ::Gitlab::Color.of('#1F1E24')
       ::Gitlab::Color.of('#000000') | ::Gitlab::Color.of('#FFFFFF')
     end
 
diff --git a/lib/gitlab/color.rb b/lib/gitlab/color.rb
index 7d9280ddba25b806f2f0ac180fa16810794487ed..c31c8cb587605836fe288da859cf700bcecf05bf 100644
--- a/lib/gitlab/color.rb
+++ b/lib/gitlab/color.rb
@@ -9,7 +9,7 @@ def initialize(value)
     end
 
     module Constants
-      DARK = Color.new('#333333')
+      DARK = Color.new('#1F1E24')
       LIGHT = Color.new('#FFFFFF')
 
       COLOR_NAME_TO_HEX = {
@@ -194,8 +194,43 @@ def valid?
       PATTERN.match?(@value)
     end
 
+    # Implementation should match
+    # https://gitlab.com/gitlab-org/gitlab-ui/-/blob/6245128c7256e3d8db164b92e9580c79d47e9183/src/utils/utils.js#L52-55
+    def to_srgb(value)
+      normalized = value / 255.0
+      normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055)**2.4
+    end
+
+    # Implementation should match
+    # https://gitlab.com/gitlab-org/gitlab-ui/-/blob/6245128c7256e3d8db164b92e9580c79d47e9183/src/utils/utils.js#L57-64
+    def relative_luminance(rgb)
+      # WCAG 2.1 formula: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+      # -
+      # WCAG 3.0 will use APAC
+      # Using APAC would be the ultimate goal, but was dismissed by engineering as of now
+      # See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3418#note_1370107090
+      (0.2126 * to_srgb(rgb[0])) + (0.7152 * to_srgb(rgb[1])) + (0.0722 * to_srgb(rgb[2]))
+    end
+
+    # Implementation should match
+    # https://gitlab.com/gitlab-org/gitlab-ui/-/blob/6245128c7256e3d8db164b92e9580c79d47e9183/src/utils/utils.js#L66-91
     def light?
-      valid? && rgb.sum > 500
+      return false unless valid?
+
+      luminance = relative_luminance(rgb)
+      light_luminance = relative_luminance([255, 255, 255])
+      dark_luminance = relative_luminance([31, 30, 36])
+
+      contrast_light = (light_luminance + 0.05) / (luminance + 0.05)
+      contrast_dark = (luminance + 0.05) / (dark_luminance + 0.05)
+
+      # Using a threshold contrast of 2.4 instead of 3
+      # as this will solve weird color combinations in the mid tones
+      #
+      # Note that this is the negated condition from GitLab UI,
+      # because the GitLab UI implementation returns the text color,
+      # while this defines whether a background color is light
+      !(contrast_light >= 2.4 || contrast_light > contrast_dark)
     end
 
     def luminosity
diff --git a/spec/frontend/lib/utils/color_utils_spec.js b/spec/frontend/lib/utils/color_utils_spec.js
index a5580a3d8d68bbdaa526a185354482400138d40a..92ac66c19f0c23f6eac7e960419596a30575acb0 100644
--- a/spec/frontend/lib/utils/color_utils_spec.js
+++ b/spec/frontend/lib/utils/color_utils_spec.js
@@ -1,44 +1,6 @@
-import {
-  isValidColorExpression,
-  textColorForBackground,
-  hexToRgb,
-  validateHexColor,
-  darkModeEnabled,
-} from '~/lib/utils/color_utils';
+import { isValidColorExpression, validateHexColor, darkModeEnabled } from '~/lib/utils/color_utils';
 
 describe('Color utils', () => {
-  describe('Converting hex code to rgb', () => {
-    it('convert hex code to rgb', () => {
-      expect(hexToRgb('#000000')).toEqual([0, 0, 0]);
-      expect(hexToRgb('#ffffff')).toEqual([255, 255, 255]);
-    });
-
-    it('convert short hex code to rgb', () => {
-      expect(hexToRgb('#000')).toEqual([0, 0, 0]);
-      expect(hexToRgb('#fff')).toEqual([255, 255, 255]);
-    });
-
-    it('handle conversion regardless of the characters case', () => {
-      expect(hexToRgb('#f0F')).toEqual([255, 0, 255]);
-    });
-  });
-
-  describe('Getting text color for given background', () => {
-    // following tests are being ported from `text_color_for_bg` section in labels_helper_spec.rb
-    it('uses light text on dark backgrounds', () => {
-      expect(textColorForBackground('#222E2E')).toEqual('#FFFFFF');
-    });
-
-    it('uses dark text on light backgrounds', () => {
-      expect(textColorForBackground('#EEEEEE')).toEqual('#333333');
-    });
-
-    it('supports RGB triplets', () => {
-      expect(textColorForBackground('#FFF')).toEqual('#333333');
-      expect(textColorForBackground('#000')).toEqual('#FFFFFF');
-    });
-  });
-
   describe('Validate hex color', () => {
     it.each`
       color        | output
diff --git a/spec/frontend/profile/preferences/components/diffs_colors_spec.js b/spec/frontend/profile/preferences/components/diffs_colors_spec.js
index e80851d062951b486f267e1b324961a203d8b1f9..28fc01654b9dd6bda57956379e250b722edc0b7c 100644
--- a/spec/frontend/profile/preferences/components/diffs_colors_spec.js
+++ b/spec/frontend/profile/preferences/components/diffs_colors_spec.js
@@ -60,9 +60,12 @@ describe('DiffsColors component', () => {
     });
 
     it.each([
-      [{}, '--diff-deletion-color: rgba(255,0,0,0.2); --diff-addition-color: rgba(0,255,0,0.2);'],
-      [{ addition: null }, '--diff-deletion-color: rgba(255,0,0,0.2);'],
-      [{ deletion: null }, '--diff-addition-color: rgba(0,255,0,0.2);'],
+      [
+        {},
+        '--diff-deletion-color: rgba(255, 0, 0, 0.2); --diff-addition-color: rgba(0, 255, 0, 0.2);',
+      ],
+      [{ addition: null }, '--diff-deletion-color: rgba(255, 0, 0, 0.2);'],
+      [{ deletion: null }, '--diff-addition-color: rgba(0, 255, 0, 0.2);'],
     ])('should set correct CSS variables', (provide, expectedStyle) => {
       createComponent(provide);
 
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/color_item_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/color_item_spec.js
index 700556edfd5291e92dd27308f1869100168bed52..0c9bdc1848d1f1c4cc731f22d3f780961309bd43 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/color_item_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/color_item_spec.js
@@ -1,5 +1,5 @@
+import { rgbFromHex } from '@gitlab/ui/dist/utils/utils';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { hexToRgb } from '~/lib/utils/color_utils';
 import ColorItem from '~/vue_shared/components/color_select_dropdown/color_item.vue';
 import { color } from './mock_data';
 
@@ -25,7 +25,9 @@ describe('ColorItem', () => {
   });
 
   it('renders the correct background color for the color item', () => {
-    const convertedColor = hexToRgb(propsData.color).join(', ');
-    expect(findColorItem().attributes('style')).toBe(`background-color: rgb(${convertedColor});`);
+    const colorAsRGB = rgbFromHex(propsData.color);
+    expect(findColorItem().attributes('style')).toBe(
+      `background-color: rgb(${colorAsRGB.join(', ')});`,
+    );
   });
 });
diff --git a/spec/helpers/labels_helper_spec.rb b/spec/helpers/labels_helper_spec.rb
index 600131270c608157502ae18d5f53b6643f793c4e..b45496308133a861695676588d4f1acd066c033c 100644
--- a/spec/helpers/labels_helper_spec.rb
+++ b/spec/helpers/labels_helper_spec.rb
@@ -126,11 +126,11 @@
     end
 
     it 'uses dark text on light backgrounds' do
-      expect(text_color_for_bg('#EEEEEE')).to be_color('#333333')
+      expect(text_color_for_bg('#EEEEEE')).to be_color('#1F1E24')
     end
 
     it 'supports RGB triplets' do
-      expect(text_color_for_bg('#FFF')).to be_color '#333333'
+      expect(text_color_for_bg('#FFF')).to be_color '#1F1E24'
       expect(text_color_for_bg('#000')).to be_color '#FFFFFF'
     end
   end
diff --git a/spec/lib/gitlab/color_spec.rb b/spec/lib/gitlab/color_spec.rb
index 28719aa61993b12833e714a859666a5715f197c7..45815bb6e53ed68d0cb5d585b287ec78309c0db4 100644
--- a/spec/lib/gitlab/color_spec.rb
+++ b/spec/lib/gitlab/color_spec.rb
@@ -125,12 +125,12 @@
       expect(described_class.new('#fff')).to be_light
     end
 
-    specify '#a7a7a7 is light' do
-      expect(described_class.new('#a7a7a7')).to be_light
+    specify '#c2c2c2 is light' do
+      expect(described_class.new('#c2c2c2')).to be_light
     end
 
-    specify '#a6a7a7 is dark' do
-      expect(described_class.new('#a6a7a7')).not_to be_light
+    specify '#868686 is dark' do
+      expect(described_class.new('#868686')).not_to be_light
     end
 
     specify '#000 is dark' do
@@ -145,7 +145,7 @@
   describe '#contrast' do
     context 'with light colors' do
       it 'is dark' do
-        %w[#fff #fefefe #a7a7a7].each do |hex|
+        %w[#fff #fefefe #c2c2c2].each do |hex|
           expect(described_class.new(hex)).to have_attributes(
             contrast: described_class::Constants::DARK,
             luminosity: :light