diff --git a/app/assets/javascripts/pipelines/pipelines_charts.js b/app/assets/javascripts/pipelines/pipelines_charts.js
index 001faf4be33..821aa7e229f 100644
--- a/app/assets/javascripts/pipelines/pipelines_charts.js
+++ b/app/assets/javascripts/pipelines/pipelines_charts.js
@@ -6,16 +6,16 @@ document.addEventListener('DOMContentLoaded', () => {
     const data = {
       labels: chartScope.labels,
       datasets: [{
-        fillColor: '#7f8fa4',
-        strokeColor: '#7f8fa4',
-        pointColor: '#7f8fa4',
+        fillColor: '#707070',
+        strokeColor: '#707070',
+        pointColor: '#707070',
         pointStrokeColor: '#EEE',
         data: chartScope.totalValues,
       },
       {
-        fillColor: '#44aa22',
-        strokeColor: '#44aa22',
-        pointColor: '#44aa22',
+        fillColor: '#1aaa55',
+        strokeColor: '#1aaa55',
+        pointColor: '#1aaa55',
         pointStrokeColor: '#fff',
         data: chartScope.successValues,
       },
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 05c1033c5f7..dffde736e24 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -993,3 +993,11 @@ button.mini-pipeline-graph-dropdown-toggle {
   font-weight: $gl-font-weight-normal;
   line-height: 1.5;
 }
+
+.legend-all {
+  color: $gl-text-color-secondary;
+}
+
+.legend-success {
+  color: $green-500;
+}
diff --git a/app/views/projects/pipelines/charts/_pipelines.haml b/app/views/projects/pipelines/charts/_pipelines.haml
index 7a100843f5e..41dc2f6cf9d 100644
--- a/app/views/projects/pipelines/charts/_pipelines.haml
+++ b/app/views/projects/pipelines/charts/_pipelines.haml
@@ -4,11 +4,11 @@
 %h4= _("Pipelines charts")
 %p
    
-  %span.cgreen
+  %span.legend-success
     = icon("circle")
     = s_("Pipeline|success")
    
-  %span.cgray
+  %span.legend-all
     = icon("circle")
     = s_("Pipeline|all")