diff --git a/plugins/woocommerce-admin/packages/components/src/chart/constants.js b/plugins/woocommerce-admin/packages/components/src/chart/constants.js
index afdb8c112aa..081962e7aae 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/constants.js
+++ b/plugins/woocommerce-admin/packages/components/src/chart/constants.js
@@ -7,7 +7,7 @@ export const colorScales = [
 	[],
 	[ 0.5 ],
 	[ 0.333, 0.667 ],
-	[ 0.25, 0.50, 0.75 ],
-	[ 0.20, 0.40, 0.60, 0.80 ],
-	[ 0.16, 0.32, 0.48, 0.64, 0.80 ],
+	[ 0.2, 0.50, 0.8 ],
+	[ 0.12, 0.375, 0.625, 0.88 ],
+	[ 0, 0.25, 0.5, 0.75, 1 ],
 ];
diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.js b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.js
index 523243ec9ee..1f99bee3bb5 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.js
+++ b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.js
@@ -114,7 +114,7 @@ class D3Legend extends Component {
 											'woocommerce-legend__item-checkmark-checked': row.visible,
 										} ) }
 										id={ row.key }
-										style={ { color: getColor( keys, colorScheme )( row.key ) } }
+										style={ row.visible ? { color: getColor( keys, colorScheme )( row.key ) } : null }
 									/>
 									<span className="woocommerce-legend__item-title" id={ row.key }>
 										{ row.key }