diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index fcca61ad8c..cb8f3c3dce 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -13,8 +13,8 @@ import {
 
 export function colorRamp(color: Color): Scale {
   let endColor = color.desaturate(1).brighten(5);
-  let startColor = color.desaturate(1).darken(5);
-  return chroma.scale([startColor, color, endColor]).mode("hsl");
+  let startColor = color.desaturate(1).darken(4);
+  return chroma.scale([startColor, color, endColor]).mode("lab");
 }
 
 export function createColorScheme(