diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index 3cc6739222e2f4015938257e95902dc34d62937c..0ec24078008d49f53bf88688ff487a6e64d2aed3 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin/ui/controls/parameters.tsx
@@ -248,7 +248,10 @@ export class ColorControl extends SimpleParam<PD.Color> {
     }
 
     renderControl() {
-        return <select value={this.props.value} onChange={this.onChange} style={{ borderLeft: `16px solid ${Color.toStyle(this.props.value)}` }}>
+        let rgb: any[] = Color.toStyle(this.props.value).replace('rgb(', '').split(', ');
+        rgb = rgb.map(c => parseInt(c)); 
+        let secondArg = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.0)`;
+        return <select value={this.props.value} onChange={this.onChange} style={{background: `linear-gradient(90deg, ${Color.toStyle(this.props.value)}, ${secondArg})`}}>
             {ColorValueOption(this.props.value)}
             {ColorOptions()}
         </select>;