diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue
index 512709914276a96aad35d6077398a95ee25395d5..c93d73ac8469db737b0480e54af2b93a91ba26ce 100644
--- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue
@@ -148,7 +148,11 @@ export default {
         data-testid="label-title-input"
       />
     </div>
-    <sidebar-color-picker v-model.trim="selectedColor" class="gl-px-3" />
+    <sidebar-color-picker
+      v-model.trim="selectedColor"
+      :suggested-colors="suggestedColors"
+      class="gl-px-4 gl-py-2"
+    />
     <div class="dropdown-actions gl-display-flex gl-justify-content-space-between gl-pt-3 gl-px-3">
       <gl-button
         :disabled="disableCreate"
diff --git a/app/assets/javascripts/sidebar/components/sidebar_color_picker.vue b/app/assets/javascripts/sidebar/components/sidebar_color_picker.vue
index 26a769585d76b2603e73d397af715e1188b82a60..83ea8edd63cdbb05354886031f7334a5b8c19287 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_color_picker.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_color_picker.vue
@@ -15,12 +15,13 @@ export default {
       required: false,
       default: '',
     },
+    suggestedColors: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
-    suggestedColors() {
-      const colorsMap = gon.suggested_label_colors;
-      return Object.keys(colorsMap).map((color) => ({ [color]: colorsMap[color] }));
-    },
     selectedColor: {
       get() {
         return this.value;
@@ -49,12 +50,13 @@ export default {
 };
 </script>
 <template>
-  <div class="dropdown-content">
-    <div class="suggest-colors suggest-colors-dropdown gl-mt-0!">
+  <div>
+    <div class="suggested-colors gl-display-flex gl-flex-wrap gl-gap-2 gl-mb-3">
       <gl-link
         v-for="(color, index) in suggestedColors"
         :key="index"
         v-gl-tooltip:tooltipcontainer
+        class="gl-display-block color-swatch"
         :style="getStyle(color)"
         :title="getColorName(color)"
         @click.prevent="handleColorClick(getColorCode(color))"
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index c93d589d339df96dd927059cda2209423f333a4d..e0d7ad0d0d691c6178ac2e3a81f51766982ea107 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -329,3 +329,20 @@ export const CHILD_ITEMS_ANCHOR = 'childitems';
 export const TASKS_ANCHOR = 'tasks';
 
 export const ISSUABLE_EPIC = 'issue-type-epic';
+
+export const EPIC_COLORS = [
+  { '#E9BE74': s__('WorkItem|Apricot') },
+  { '#D99530': s__('WorkItem|Copper') },
+  { '#C17D10': s__('WorkItem|Rust') },
+  { '#F57F6C': s__('WorkItem|Pink') },
+  { '#EC5941': s__('WorkItem|Vermilion') },
+  { '#DD2B0E': s__('WorkItem|Red') },
+  { '#C91C00': s__('WorkItem|Dark red') },
+  { '#52B87A': s__('WorkItem|Teal') },
+  { '#2DA160': s__('WorkItem|Green') },
+  { '#108548': s__('WorkItem|Forest green') },
+  { '#63A6E9': s__('WorkItem|Sky blue') },
+  { '#428FDC': s__('WorkItem|Royal blue') },
+  { '#1F75CB': s__('WorkItem|Blue') },
+  { '#1068BF': s__('WorkItem|Midnight blue') },
+];
diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss
index 5d3053a33b1f22a9f372e1c025797b427af24580..63823d4851291c3e71d5e2d571c07bbcaf3a3ef2 100644
--- a/app/assets/stylesheets/pages/colors.scss
+++ b/app/assets/stylesheets/pages/colors.scss
@@ -78,3 +78,11 @@
     }
   }
 }
+
+.suggested-colors {
+  .color-swatch {
+    width: 28px;
+    height: 28px;
+    border-radius: 2px;
+  }
+}
diff --git a/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue b/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue
index 40f138a0cd13fa5519d8dfa9f60446e92738679d..3568d0ad9ec9489686e7d6e49bdf28aacd0aec62 100644
--- a/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue
+++ b/ee/app/assets/javascripts/work_items/components/work_item_color_inline.vue
@@ -7,6 +7,7 @@ import {
   sprintfWorkItem,
   WIDGET_TYPE_COLOR,
   TRACKING_CATEGORY_SHOW,
+  EPIC_COLORS,
 } from '~/work_items/constants';
 import { DEFAULT_COLOR } from '~/vue_shared/components/color_select_dropdown/constants';
 import SidebarColorView from '~/sidebar/components/sidebar_color_view.vue';
@@ -66,6 +67,9 @@ export default {
         property: `type_${this.workItemType}`,
       };
     },
+    suggestedColors() {
+      return EPIC_COLORS;
+    },
   },
   created() {
     this.currentColor = this.color;
@@ -161,7 +165,11 @@ export default {
         </gl-button>
       </template>
       <gl-disclosure-dropdown-item>
-        <sidebar-color-picker v-model="currentColor" class="gl-px-2" />
+        <sidebar-color-picker
+          v-model="currentColor"
+          :suggested-colors="suggestedColors"
+          class="gl-px-3 gl-py-2"
+        />
       </gl-disclosure-dropdown-item>
     </gl-disclosure-dropdown>
   </gl-form-group>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index d5ab5389916fa31a4a60fb8c8c2ccfa53dc31bbe..04abd211ba94e8e8ca99601652b5b365697f3dec 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -56446,6 +56446,9 @@ msgstr ""
 msgid "WorkItem|Ancestor"
 msgstr ""
 
+msgid "WorkItem|Apricot"
+msgstr ""
+
 msgid "WorkItem|Are you sure you want to cancel editing?"
 msgstr ""
 
@@ -56466,6 +56469,9 @@ msgstr ""
 msgid "WorkItem|Blocking"
 msgstr ""
 
+msgid "WorkItem|Blue"
+msgstr ""
+
 msgid "WorkItem|Cancel"
 msgstr ""
 
@@ -56493,6 +56499,9 @@ msgstr ""
 msgid "WorkItem|Converted to task"
 msgstr ""
 
+msgid "WorkItem|Copper"
+msgstr ""
+
 msgid "WorkItem|Copy %{workItemType} email address"
 msgstr ""
 
@@ -56502,6 +56511,9 @@ msgstr ""
 msgid "WorkItem|Create work item"
 msgstr ""
 
+msgid "WorkItem|Dark red"
+msgstr ""
+
 msgid "WorkItem|Dates"
 msgstr ""
 
@@ -56526,6 +56538,12 @@ msgstr ""
 msgid "WorkItem|Existing task"
 msgstr ""
 
+msgid "WorkItem|Forest green"
+msgstr ""
+
+msgid "WorkItem|Green"
+msgstr ""
+
 msgid "WorkItem|History only"
 msgstr ""
 
@@ -56556,6 +56574,9 @@ msgstr ""
 msgid "WorkItem|Mark as done"
 msgstr ""
 
+msgid "WorkItem|Midnight blue"
+msgstr ""
+
 msgid "WorkItem|Milestone"
 msgstr ""
 
@@ -56619,9 +56640,15 @@ msgstr ""
 msgid "WorkItem|Parent"
 msgstr ""
 
+msgid "WorkItem|Pink"
+msgstr ""
+
 msgid "WorkItem|Promoted to objective."
 msgstr ""
 
+msgid "WorkItem|Red"
+msgstr ""
+
 msgid "WorkItem|Related to"
 msgstr ""
 
@@ -56631,6 +56658,12 @@ msgstr ""
 msgid "WorkItem|Requirements"
 msgstr ""
 
+msgid "WorkItem|Royal blue"
+msgstr ""
+
+msgid "WorkItem|Rust"
+msgstr ""
+
 msgid "WorkItem|Save and overwrite"
 msgstr ""
 
@@ -56646,6 +56679,9 @@ msgstr ""
 msgid "WorkItem|Show labels"
 msgstr ""
 
+msgid "WorkItem|Sky blue"
+msgstr ""
+
 msgid "WorkItem|Someone edited the description at the same time you did. If you save it will overwrite their changes. Please confirm you'd like to save your edits."
 msgstr ""
 
@@ -56742,6 +56778,9 @@ msgstr ""
 msgid "WorkItem|Tasks"
 msgstr ""
 
+msgid "WorkItem|Teal"
+msgstr ""
+
 msgid "WorkItem|Test case"
 msgstr ""
 
@@ -56775,6 +56814,9 @@ msgstr ""
 msgid "WorkItem|Undo"
 msgstr ""
 
+msgid "WorkItem|Vermilion"
+msgstr ""
+
 msgid "WorkItem|View current version"
 msgstr ""