diff --git a/protocol-designer/src/components/ColorPicker/ColorPicker.css b/protocol-designer/src/components/ColorPicker/ColorPicker.css
index f4b4f28c75f..61e30efd289 100644
--- a/protocol-designer/src/components/ColorPicker/ColorPicker.css
+++ b/protocol-designer/src/components/ColorPicker/ColorPicker.css
@@ -3,7 +3,8 @@
   cursor: pointer;
 }
 
-.swatch:hover {
+.swatch:hover,
+.swatch_enabled {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.41);
 }
 
diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx
index e63112ca3c7..99b470ce2a8 100644
--- a/protocol-designer/src/components/ColorPicker/index.tsx
+++ b/protocol-designer/src/components/ColorPicker/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import cx from 'classnames'
 import { ColorResult, TwitterPicker } from 'react-color'
 import { COLORS } from '@opentrons/components'
 
@@ -15,10 +16,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
   return (
     <div>
       <div
-        className={styles.swatch}
-        style={
-          showColorPicker ? { boxShadow: '0 2px 4px rgba(0, 0, 0, 0.41)' } : {}
-        }
+        className={cx(styles.swatch, {
+          [styles.swatch_enabled]: showColorPicker,
+        })}
         onClick={() => setShowColorPicker(showColorPicker => !showColorPicker)}
       >
         <div