diff --git a/app/assets/javascripts/issues/show/components/app.vue b/app/assets/javascripts/issues/show/components/app.vue
index c664135f30e939f09a91eff37e4f929e3c5ce273..bae102796775c0ddeb68ae8519ac2448c6b3c328 100644
--- a/app/assets/javascripts/issues/show/components/app.vue
+++ b/app/assets/javascripts/issues/show/components/app.vue
@@ -89,6 +89,10 @@ export default {
       required: false,
       default: '',
     },
+    initialColor: {
+      type: String,
+      required: true,
+    },
     initialTitleHtml: {
       type: String,
       required: true,
@@ -204,6 +208,7 @@ export default {
     const store = new Store({
       titleHtml: this.initialTitleHtml,
       titleText: this.initialTitleText,
+      color: this.initialColor,
       descriptionHtml: this.initialDescriptionHtml,
       descriptionText: this.initialDescriptionText,
       updatedAt: this.updatedAt,
@@ -240,10 +245,11 @@ export default {
     issueChanged() {
       const {
         store: {
-          formState: { description, title },
+          formState: { description, title, color },
         },
         initialDescriptionText,
         initialTitleText,
+        initialColor,
       } = this;
 
       if (initialDescriptionText || description) {
@@ -254,6 +260,10 @@ export default {
         return initialTitleText !== title;
       }
 
+      if (initialColor || color) {
+        return initialColor !== color;
+      }
+
       return false;
     },
     defaultErrorMessage() {
@@ -348,6 +358,7 @@ export default {
 
     updateFormState(templates = {}) {
       this.setFormState({
+        color: this.state.color,
         title: this.state.titleText,
         description: this.state.descriptionText,
         lock_version: this.state.lock_version,
diff --git a/app/assets/javascripts/issues/show/components/fields/color.vue b/app/assets/javascripts/issues/show/components/fields/color.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56185b13e067a447ff00ab0040309c43a177b97d
--- /dev/null
+++ b/app/assets/javascripts/issues/show/components/fields/color.vue
@@ -0,0 +1,55 @@
+<script>
+import { GlFormInput } from '@gitlab/ui';
+import updateMixin from '../../mixins/update';
+
+export default {
+  components: {
+    GlFormInput,
+  },
+
+  mixins: [updateMixin],
+
+  props: {
+    formState: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      color: this.formState.color,
+    };
+  },
+  watch: {
+    color() {
+      /* eslint-disable vue/no-mutating-props */
+      this.formState.color = this.color;
+      /* eslint-enable vue/no-mutating-props */
+    },
+  },
+  methods: {
+    backgroundColor() {
+      return `background-color:${this.color}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="input-group">
+      <div class="input-group-prepend">
+        <div class="input-group-text color-preview" :style="backgroundColor()">&nbsp;</div>
+      </div>
+      <gl-form-input
+        id="issuable-color"
+        v-model="color"
+        :placeholder="__('Enter a color')"
+        autocomplete="off"
+        data-testid="issuable-color"
+        @keydown.meta.enter="updateIssuable"
+        @keydown.ctrl.enter="updateIssuable"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
index 92817d5fa70640ff506d92fda2ff074d5fb453a7..72f0be0783673fd31efefc1d528cc7170e628b19 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue
@@ -14,9 +14,9 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-align-items-center">
     <span
-      class="dropdown-label-box gl-flex-shrink-0 gl-top-1 gl-mr-0"
+      class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3"
       data-testid="color-item"
       :style="{ backgroundColor: color }"
     ></span>
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
index 6b79883d76ba64f90f30c3617997baaa10a44640..e567040bc510b33d06b2181a3b77a737cf5f7150 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue
@@ -1,4 +1,5 @@
 <script>
+import { isString } from 'lodash';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
@@ -52,13 +53,23 @@ export default {
       required: false,
       default: s__('ColorWidget|Assign epic color'),
     },
+    defaultColor: {
+      type: Object,
+      required: false,
+      validator(value) {
+        return isString(value?.color) && isString(value?.title);
+      },
+      default() {
+        return {
+          color: '',
+          title: '',
+        };
+      },
+    },
   },
   data() {
     return {
-      issuableColor: {
-        color: '',
-        title: '',
-      },
+      issuableColor: this.defaultColor,
       colorUpdateInProgress: false,
       oldIid: null,
       sidebarExpandedOnClick: false,
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js b/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js
index c70785abd1eb78e3a653be68b243589e299559cc..701ac71d755269584bdf85492f33b999276ffa08 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js
@@ -1,4 +1,4 @@
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 
 export const COLOR_WIDGET_COLOR = s__('ColorWidget|Color');
 
@@ -7,7 +7,7 @@ export const DROPDOWN_VARIANT = {
   Embedded: 'embedded',
 };
 
-export const DEFAULT_COLOR = { title: __('SuggestedColors|Blue'), color: '#1068bf' };
+export const DEFAULT_COLOR = { title: s__('SuggestedColors|Blue'), color: '#1068bf' };
 
 export const ISSUABLE_COLORS = [
   DEFAULT_COLOR,
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
index 4eb1d3d08ca190c4867115c5ca942a885224a520..315ae126e3e467304ea9901e25f3c994091e34be 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue
@@ -1,11 +1,13 @@
 <script>
 import { GlDropdown } from '@gitlab/ui';
+import ColorItem from './color_item.vue';
 import DropdownContentsColorView from './dropdown_contents_color_view.vue';
 import DropdownHeader from './dropdown_header.vue';
 import { isDropdownVariantSidebar } from './utils';
 
 export default {
   components: {
+    ColorItem,
     DropdownContentsColorView,
     DropdownHeader,
     GlDropdown,
@@ -42,12 +44,15 @@ export default {
   },
   computed: {
     buttonText() {
-      if (!this.localSelectedColor?.title) {
+      if (!this.hasSelectedColor()) {
         return this.dropdownButtonText;
       }
 
       return this.localSelectedColor.title;
     },
+    hasSelectedColor() {
+      return this.localSelectedColor?.title;
+    },
   },
   watch: {
     localSelectedColor: {
@@ -91,7 +96,15 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown ref="dropdown" :text="buttonText" class="gl-w-full" @hide="handleDropdownHide">
+  <gl-dropdown ref="dropdown" class="gl-w-full" @hide="handleDropdownHide">
+    <template #button-text>
+      <color-item
+        v-if="hasSelectedColor"
+        :color="localSelectedColor.color"
+        :title="localSelectedColor.title"
+      />
+      <span v-else>{{ buttonText }}</span>
+    </template>
     <template #header>
       <dropdown-header
         ref="header"
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue
index 62f4cf59c148f3ad8522cd1e678be19a9c27cd76..91906388049e30bed4701b025e20ae3d97e43bba 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue
@@ -36,8 +36,8 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown-form>
-    <div>
+  <gl-dropdown-form class="js-colors-list">
+    <div data-testid="dropdown-content">
       <gl-dropdown-item
         v-for="color in colors"
         :key="color.color"
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
index 4cba66eefd22a0d12079f77c5d6655428e19ebd0..878d1f7208b176832769a31aed9b8bdaee0e719a 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
@@ -20,6 +20,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    hasColor() {
+      return this.selectedColor.color !== '';
+    },
+  },
 };
 </script>
 
@@ -38,6 +43,15 @@ export default {
       />
     </div>
 
-    <color-item class="hide-collapsed" :color="selectedColor.color" :title="selectedColor.title" />
+    <span v-if="!hasColor" class="no-value hide-collapsed">
+      <slot></slot>
+    </span>
+    <template v-else>
+      <color-item
+        class="hide-collapsed"
+        :color="selectedColor.color"
+        :title="selectedColor.title"
+      />
+    </template>
   </div>
 </template>
diff --git a/app/controllers/concerns/issuable_actions.rb b/app/controllers/concerns/issuable_actions.rb
index 07850acd23db73c7cde048a9f20b6e43413f9200..d1a1844b8462f3efbb595f403a3c5211ba15900f 100644
--- a/app/controllers/concerns/issuable_actions.rb
+++ b/app/controllers/concerns/issuable_actions.rb
@@ -74,6 +74,7 @@ def realtime_changes
     response = {
       title: view_context.markdown_field(issuable, :title),
       title_text: issuable.title,
+      color: issuable.color || '',
       description: view_context.markdown_field(issuable, :description),
       description_text: issuable.description,
       task_status: issuable.task_status,
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index 486d5bb3866d43df28149d3021a38b7b56913fda..55a15631fd9a84801d8f7b82916182e18bd2f18d 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -240,6 +240,7 @@ def issuable_initial_data(issuable)
       lockVersion: issuable.lock_version,
       state: issuable.state,
       issuableTemplateNamesPath: template_names_path(parent, issuable),
+      initialColor: issuable.color || '',
       initialTitleHtml: markdown_field(issuable, :title),
       initialTitleText: issuable.title,
       initialDescriptionHtml: markdown_field(issuable, :description),
diff --git a/ee/app/assets/javascripts/epic/components/epic_body.vue b/ee/app/assets/javascripts/epic/components/epic_body.vue
index c1e018f8c36699a4bd352634ecba00d7b869cd21..5eb800e87597faad367e75a19432255e251265a7 100644
--- a/ee/app/assets/javascripts/epic/components/epic_body.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_body.vue
@@ -22,6 +22,7 @@ export default {
       'canUpdate',
       'canDestroy',
       'canAdmin',
+      'initialColor',
       'initialTitleHtml',
       'initialTitleText',
       'initialDescriptionHtml',
@@ -49,6 +50,7 @@ export default {
         :can-update="canUpdate"
         :can-destroy="canDestroy"
         :show-delete-button="canDestroy"
+        :initial-color="initialColor"
         :initial-title-html="initialTitleHtml"
         :initial-title-text="initialTitleText"
         :lock-version="lockVersion"
diff --git a/ee/app/assets/javascripts/epic/components/epic_form.vue b/ee/app/assets/javascripts/epic/components/epic_form.vue
index 953700cb3fbe9325729e49ae9f38667cd8b7a511..a2151669dab6067df3b977aa0970760a5f0e628e 100644
--- a/ee/app/assets/javascripts/epic/components/epic_form.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_form.vue
@@ -16,25 +16,31 @@ import { visitUrl } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
+import ColorSelectDropdown from '~/vue_shared/components/color_select_dropdown/color_select_root.vue';
 import { LabelType } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
+import { DEFAULT_COLOR } from '~/vue_shared/components/color_select_dropdown/constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import createEpic from '../queries/create_epic.mutation.graphql';
 
 export default {
   components: {
+    ColorSelectDropdown,
     GlButton,
     GlDatepicker,
     GlForm,
     GlFormCheckbox,
-    GlFormInput,
     GlFormGroup,
-    MarkdownField,
+    GlFormInput,
     LabelsSelectWidget,
+    MarkdownField,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['groupPath', 'groupEpicsPath', 'markdownPreviewPath', 'markdownDocsPath'],
   data() {
     return {
       title: '',
       description: '',
+      color: DEFAULT_COLOR,
       confidential: false,
       labels: [],
       startDateFixed: null,
@@ -47,6 +53,9 @@ export default {
     labelIds() {
       return this.labels.map((label) => label.id);
     },
+    isEpicColorEnabled() {
+      return this.glFeatures.epicColorHighlight;
+    },
   },
   i18n: {
     confidentialityLabel: s__(`
@@ -83,24 +92,26 @@ export default {
     save() {
       this.loading = true;
 
+      const input = {
+        addLabelIds: this.labelIds,
+        groupPath: this.groupPath,
+        title: this.title,
+        description: this.description,
+        confidential: this.confidential,
+        startDateFixed: this.startDateFixed ? formatDate(this.startDateFixed, 'yyyy-mm-dd') : null,
+        startDateIsFixed: Boolean(this.startDateFixed),
+        dueDateFixed: this.dueDateFixed ? formatDate(this.dueDateFixed, 'yyyy-mm-dd') : null,
+        dueDateIsFixed: Boolean(this.dueDateFixed),
+      };
+
+      if (this.isEpicColorEnabled && this.color?.color !== '') {
+        input.color = this.color.color;
+      }
+
       return this.$apollo
         .mutate({
           mutation: createEpic,
-          variables: {
-            input: {
-              addLabelIds: this.labelIds,
-              groupPath: this.groupPath,
-              title: this.title,
-              description: this.description,
-              confidential: this.confidential,
-              startDateFixed: this.startDateFixed
-                ? formatDate(this.startDateFixed, 'yyyy-mm-dd')
-                : null,
-              startDateIsFixed: Boolean(this.startDateFixed),
-              dueDateFixed: this.dueDateFixed ? formatDate(this.dueDateFixed, 'yyyy-mm-dd') : null,
-              dueDateIsFixed: Boolean(this.dueDateFixed),
-            },
-          },
+          variables: { input },
         })
         .then(({ data }) => {
           const { errors, epic } = data.createEpic;
@@ -131,6 +142,9 @@ export default {
     handleUpdateSelectedLabels(labels) {
       this.labels = labels.map((label) => ({ ...label, id: getIdFromGraphQLId(label.id) }));
     },
+    handleUpdateSelectedColor(color) {
+      this.color = color;
+    },
   },
 };
 </script>
@@ -189,6 +203,7 @@ export default {
           >{{ $options.i18n.confidentialityLabel }}</gl-form-checkbox
         >
       </gl-form-group>
+
       <gl-form-group :label="__('Labels')">
         <labels-select-widget
           class="block labels js-labels-block"
@@ -220,11 +235,7 @@ export default {
           >{{ __('Clear start date') }}</gl-button
         >
       </gl-form-group>
-      <gl-form-group
-        class="gl-pb-4"
-        :label="__('Due date')"
-        :description="$options.i18n.epicDatesHint"
-      >
+      <gl-form-group :label="__('Due date')" :description="$options.i18n.epicDatesHint">
         <div class="gl-display-inline-block gl-mr-2">
           <gl-datepicker v-model="dueDateFixed" data-testid="epic-due-date" />
         </div>
@@ -238,7 +249,23 @@ export default {
         >
       </gl-form-group>
 
-      <div class="footer-block">
+      <gl-form-group v-if="isEpicColorEnabled" :label="__('Color')" label-for="epic-color">
+        <color-select-dropdown
+          class="block colors js-colors-block"
+          :full-path="groupPath"
+          :attr-workspace-path="groupPath"
+          workspace-type="group"
+          :label-create-type="LabelType.group"
+          :default-color="color"
+          issuable-type="epic"
+          variant="embedded"
+          @updateSelectedColor="handleUpdateSelectedColor($event.color)"
+        >
+          {{ __('Select a color') }}
+        </color-select-dropdown>
+      </gl-form-group>
+
+      <div class="footer-block gl-pt-4">
         <gl-button
           type="submit"
           variant="confirm"
diff --git a/ee/app/assets/javascripts/epic/components/epic_sidebar.vue b/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
index 9bb9b32e37e4576b6e66ff6dcc7dddff3137fe27..a8273b3b8c187b9802c3e8a71782984c6012bd85 100644
--- a/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_sidebar.vue
@@ -15,6 +15,7 @@ import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sideb
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import sidebarEventHub from '~/sidebar/event_hub';
 import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
+import ColorSelectDropdown from '~/vue_shared/components/color_select_dropdown/color_select_root.vue';
 import { LabelType } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -34,6 +35,7 @@ export default {
     SidebarReferenceWidget,
     SidebarTodoWidget,
     LabelsSelectWidget,
+    ColorSelectDropdown,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['iid'],
@@ -87,6 +89,9 @@ export default {
         this.toggleSidebar({ sidebarCollapsed: false });
       }
     },
+    isEpicColorEnabled() {
+      return this.glFeatures.epicColorHighlight;
+    },
   },
 };
 </script>
@@ -145,6 +150,21 @@ export default {
       >
         {{ __('None') }}
       </labels-select-widget>
+
+      <color-select-dropdown
+        v-if="isEpicColorEnabled()"
+        class="block colors js-colors-block"
+        :allow-edit="canUpdate"
+        :iid="String(iid)"
+        :full-path="fullPath"
+        workspace-type="group"
+        issuable-type="epic"
+        variant="sidebar"
+        data-testid="colors-select"
+      >
+        {{ __('None') }}
+      </color-select-dropdown>
+
       <sidebar-confidentiality-widget
         :iid="String(iid)"
         :full-path="fullPath"
diff --git a/ee/app/assets/javascripts/epic/store/state.js b/ee/app/assets/javascripts/epic/store/state.js
index 8971fbb6baf358b5d7f0dda85cb38c1a0a57be26..2ae0bfa65ba051463e19e5f7656f8abfc55bf08f 100644
--- a/ee/app/assets/javascripts/epic/store/state.js
+++ b/ee/app/assets/javascripts/epic/store/state.js
@@ -29,6 +29,7 @@ export default () => ({
   state: '',
   created: '',
   author: null,
+  initialColor: '',
   initialTitleHtml: '',
   initialTitleText: '',
   initialDescriptionHtml: '',
diff --git a/ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js b/ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js
index d3d0b6db24c8b29f9c7b27bf1c63192773c99175..b4c9533997de075bf77b06360151b48635f1795e 100644
--- a/ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js
+++ b/ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js
@@ -53,6 +53,7 @@ export default () => {
         groupName,
         id,
         iid: parseInt(iid, 10),
+        color: initialData.initialColor,
         title: initialData.initialTitleText,
         confidential: initialData.confidential,
         reference: `${initialData.fullPath}${initialData.issuableRef}`,
diff --git a/ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql b/ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql
index 0b37f5d18555833cc82660bff0a25e3b543b8505..680314450a84a1259ccb72f7e45edf9cbea07250 100644
--- a/ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql
+++ b/ee/app/assets/javascripts/roadmap/queries/epic.fragment.graphql
@@ -10,6 +10,8 @@ fragment BaseEpic on Epic {
   hasChildren
   hasParent
   confidential
+  color
+  textColor
   descendantWeightSum {
     closedIssues
     openedIssues
diff --git a/ee/app/assets/javascripts/roadmap/queries/group_epics.query.graphql b/ee/app/assets/javascripts/roadmap/queries/group_epics.query.graphql
index 132ca54e8a36537df2c74e50e4211c61ba013b81..db4aeb05cb4dc9b87e65eb0f14c96f1e867e2aa1 100644
--- a/ee/app/assets/javascripts/roadmap/queries/group_epics.query.graphql
+++ b/ee/app/assets/javascripts/roadmap/queries/group_epics.query.graphql
@@ -38,6 +38,7 @@ query roadmapGroupEpics(
       edges {
         node {
           ...BaseEpic
+          color
           parent {
             id
           }
diff --git a/ee/app/assets/stylesheets/page_bundles/epics.scss b/ee/app/assets/stylesheets/page_bundles/epics.scss
index 0338620e6d49c97b65797fb92c36bcda9dcb2eac..e5c8d49883504e60b6b166910c654e8fcac85076 100644
--- a/ee/app/assets/stylesheets/page_bundles/epics.scss
+++ b/ee/app/assets/stylesheets/page_bundles/epics.scss
@@ -40,6 +40,12 @@
   }
 }
 
+.new-epic-form .epic-color-preview {
+  background-color: #6699cc;
+  border-color: var(--gray-400, $gray-400);
+  max-height: none
+}
+
 .add-item-form-container {
   .select-project-dropdown .gl-new-dropdown-item-text-primary {
     display: flex;
diff --git a/ee/app/controllers/groups/epics_controller.rb b/ee/app/controllers/groups/epics_controller.rb
index 9bb070dba5573d77bf02320c4a6ef4c1252b2b75..b2f6799e33cff708da184dc6b6e0813a36962a65 100644
--- a/ee/app/controllers/groups/epics_controller.rb
+++ b/ee/app/controllers/groups/epics_controller.rb
@@ -19,6 +19,7 @@ class Groups::EpicsController < Groups::ApplicationController
   before_action do
     push_frontend_feature_flag(:confidential_notes, @group, type: :development)
     push_frontend_feature_flag(:realtime_labels, group)
+    push_frontend_feature_flag(:epic_color_highlight)
   end
 
   feature_category :portfolio_management
diff --git a/ee/spec/features/epics/epic_show_spec.rb b/ee/spec/features/epics/epic_show_spec.rb
index fce430261f2bd60f1a42a0d30af1a274eaa77a13..abaaab859c72d9e55ac48a3a8fb33ff94b2ea2ef 100644
--- a/ee/spec/features/epics/epic_show_spec.rb
+++ b/ee/spec/features/epics/epic_show_spec.rb
@@ -45,6 +45,12 @@ def add_existing_item(type)
     end
   end
 
+  def open_colors_dropdown
+    page.within('aside.right-sidebar [data-testid="colors-select"]') do
+      click_button 'Edit'
+    end
+  end
+
   describe 'when sub-epics feature is available' do
     before do
       visit group_epic_path(group, epic)
@@ -302,6 +308,56 @@ def add_existing_item(type)
         end
       end
     end
+
+    describe 'Colors select' do
+      context 'when feature flag is disabled' do
+        before do
+          stub_feature_flags(epic_color_highlight: false)
+          visit group_epic_path(group, epic)
+        end
+
+        it 'does not show the color select dropdown' do
+          expect(page).not_to have_selector('[data-testid="colors-select"]')
+        end
+      end
+
+      context 'when feature flag is enabled' do
+        it 'shows the color select dropdown' do
+          expect(page).to have_selector('[data-testid="colors-select"]')
+        end
+
+        it 'opens dropdown when `Edit` is clicked' do
+          open_colors_dropdown
+
+          expect(page).to have_css('.js-colors-block .js-colors-list')
+        end
+
+        context 'when dropdown is open' do
+          before do
+            open_colors_dropdown
+          end
+
+          it 'shows colors within the color dropdown' do
+            page.within('.js-colors-list [data-testid="dropdown-content"]') do
+              expect(page).to have_selector('li', count: 5)
+            end
+          end
+
+          it 'shows checkmark next to color after a new color has been selected' do
+            page.within('.js-colors-list [data-testid="dropdown-content"]') do
+              find('li', text: 'Green').click
+              wait_for_all_requests
+            end
+
+            open_colors_dropdown
+
+            page.within('.js-colors-list [data-testid="dropdown-content"]') do
+              expect(find('li', text: 'Green')).to have_selector('.gl-icon', visible: true)
+            end
+          end
+        end
+      end
+    end
   end
 
   describe 'epic actions', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/297505' do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 1e32acd7cf65cceb1021322d66779be01370dad9..dca75105314d993d5641695fec75ce2e986e3ae0 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9020,6 +9020,9 @@ msgstr ""
 msgid "Collector hostname"
 msgstr ""
 
+msgid "Color"
+msgstr ""
+
 msgid "ColorWidget|An error occurred while updating color."
 msgstr ""
 
@@ -34737,6 +34740,9 @@ msgstr ""
 msgid "Select a branch to compare"
 msgstr ""
 
+msgid "Select a color"
+msgstr ""
+
 msgid "Select a compliance framework to apply to this project. %{linkStart}How are these added?%{linkEnd}"
 msgstr ""