diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 5cd242af91d..1b52a6a8e71 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -84,25 +84,25 @@
   }
 }
 
-$theme-charcoal: #3d454d;
-$theme-charcoal-light: #485157;
-$theme-charcoal-dark: #383f45;
-$theme-charcoal-text: #b9bbbe;
+$theme-charcoal-light: #b9bbbe;
+$theme-charcoal: #485157;
+$theme-charcoal-dark: #3d454d;
+$theme-charcoal-darker: #383f45;
 
 $theme-blue-light: #becde9;
 $theme-blue: #2980b9;
 $theme-blue-dark: #1970a9;
 $theme-blue-darker: #096099;
 
-$theme-graphite-lighter: #ccc;
-$theme-graphite-light: #777;
-$theme-graphite: #666;
-$theme-graphite-dark: #555;
+$theme-graphite-light: #ccc;
+$theme-graphite: #777;
+$theme-graphite-dark: #666;
+$theme-graphite-darker: #555;
 
-$theme-gray-light: #979797;
-$theme-gray: #373737;
-$theme-gray-dark: #272727;
-$theme-gray-darker: #222;
+$theme-black-light: #979797;
+$theme-black: #373737;
+$theme-black-dark: #272727;
+$theme-black-darker: #222;
 
 $theme-green-light: #adc;
 $theme-green: #019875;
@@ -120,15 +120,15 @@ body {
   }
 
   &.ui_charcoal {
-    @include gitlab-theme($theme-charcoal-text, $theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark);
+    @include gitlab-theme($theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark, $theme-charcoal-darker);
   }
 
   &.ui_graphite {
-    @include gitlab-theme($theme-graphite-lighter, $theme-graphite-light, $theme-graphite, $theme-graphite-dark);
+    @include gitlab-theme($theme-graphite-light, $theme-graphite, $theme-graphite-dark, $theme-graphite-darker);
   }
 
-  &.ui_gray {
-    @include gitlab-theme($theme-gray-light, $theme-gray, $theme-gray-dark, $theme-gray-darker);
+  &.ui_black {
+    @include gitlab-theme($theme-black-light, $theme-black, $theme-black-dark, $theme-black-darker);
   }
 
   &.ui_green {
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index f8da0983b77..100ace41f2a 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -22,8 +22,8 @@
         background: $theme-graphite;
       }
 
-      &.ui_gray {
-        background: $theme-gray;
+      &.ui_black {
+        background: $theme-black;
       }
 
       &.ui_green {
diff --git a/changelogs/unreleased/issues-8081.yml b/changelogs/unreleased/issues-8081.yml
new file mode 100644
index 00000000000..82f746937bc
--- /dev/null
+++ b/changelogs/unreleased/issues-8081.yml
@@ -0,0 +1,4 @@
+---
+title: change 'gray' color theme name to 'black' to match the actual color
+merge_request: 7908
+author: BM5k
diff --git a/lib/gitlab/themes.rb b/lib/gitlab/themes.rb
index d4020af76f9..19ab76ae80f 100644
--- a/lib/gitlab/themes.rb
+++ b/lib/gitlab/themes.rb
@@ -15,7 +15,7 @@ module Gitlab
       Theme.new(1, 'Graphite', 'ui_graphite'),
       Theme.new(2, 'Charcoal', 'ui_charcoal'),
       Theme.new(3, 'Green',    'ui_green'),
-      Theme.new(4, 'Gray',     'ui_gray'),
+      Theme.new(4, 'Black',    'ui_black'),
       Theme.new(5, 'Violet',   'ui_violet'),
       Theme.new(6, 'Blue',     'ui_blue')
     ].freeze