diff --git a/src/vs/editor/contrib/colorPicker/browser/colorPickerWidget.ts b/src/vs/editor/contrib/colorPicker/browser/colorPickerWidget.ts
index 2474d37d32268730305659083ceb80d52e18423d..c7d2936cbc8391cb24d000f9fe27d045581e8758 100644
--- a/src/vs/editor/contrib/colorPicker/browser/colorPickerWidget.ts
+++ b/src/vs/editor/contrib/colorPicker/browser/colorPickerWidget.ts
@@ -180,6 +180,7 @@ class SaturationBox extends Disposable {
 
 		const whiteGradient = ctx.createLinearGradient(0, 0, this.canvas.width, 0);
 		whiteGradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
+		whiteGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
 		whiteGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
 
 		const blackGradient = ctx.createLinearGradient(0, 0, 0, this.canvas.height);