diff --git a/packages/clay-color-picker/package.json b/packages/clay-color-picker/package.json
index 852e9a9087..b67466615e 100644
--- a/packages/clay-color-picker/package.json
+++ b/packages/clay-color-picker/package.json
@@ -30,6 +30,7 @@
 		"@clayui/form": "^3.9.0",
 		"@clayui/icon": "^3.0.5",
 		"@clayui/shared": "^3.2.0",
+		"classnames": "^2.2.6",
 		"tinycolor2": "^1.4.1"
 	},
 	"peerDependencies": {
diff --git a/packages/clay-color-picker/src/Splotch.tsx b/packages/clay-color-picker/src/Splotch.tsx
index f30c6c7ea8..7c98d709cc 100644
--- a/packages/clay-color-picker/src/Splotch.tsx
+++ b/packages/clay-color-picker/src/Splotch.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import classNames from 'classnames';
 import React from 'react';
 import tinycolor from 'tinycolor2';
 
@@ -33,13 +34,12 @@ const ClayColorPickerSplotch = React.forwardRef<HTMLButtonElement, IProps>(
 		return (
 			<button
 				{...otherProps}
-				className={`btn clay-color-btn ${className ? className : ''}`}
+				className={classNames('btn clay-color-btn', className, {
+					active,
+					'clay-color-btn-bordered': requireBorder,
+				})}
 				ref={ref}
 				style={{
-					...(active ? {outline: 'auto 3px #55ADFF'} : {}),
-					...(requireBorder
-						? {border: '1px solid #E7E7ED'}
-						: {borderWidth: 0}),
 					background: `#${value}`,
 					height: size,
 					width: size,