diff --git a/ColorPicker/ColorPicker.js b/ColorPicker/ColorPicker.js
index da6d196762..a838431265 100644
--- a/ColorPicker/ColorPicker.js
+++ b/ColorPicker/ColorPicker.js
@@ -1,181 +1,244 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 /**
- * Sandstone component to allow the user to choose a color.
+ * Sandstone component that allows the user to choose a color
+ * either from a grid, a spectrum, or RGB/HSL color sliders.
  *
  * @example
  * <ColorPicker
- *	 color={'#FF00FF'}
- *	 colorHandler={setColor}
- *	 presetColors={['#FF0000', '#00FF00', '#0000FF']}
- *	 text={'Color Picker'}
+ *     open
  * />
  *
  * @module sandstone/ColorPicker
  * @exports ColorPicker
  * @exports ColorPickerBase
- * @exports ColorPickerDecorator
- * @private
+ * @public
  */
-
-import kind from '@enact/core/kind';
 import Spottable from '@enact/spotlight/Spottable';
-import {Cell, Column, Row} from '@enact/ui/Layout';
-import Toggleable from '@enact/ui/Toggleable';
+import {Cell, Row} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
-import compose from 'ramda/src/compose';
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 
-import BodyText from '../BodyText';
-import Button, {ButtonBase} from '../Button';
+import {ButtonBase} from '../Button';
 import Icon from '../Icon';
-import Item from '../Item';
 import Popup from '../Popup';
 import Skinnable from '../Skinnable';
-import Slider from '../Slider';
+import TabGroup from '../TabLayout/TabGroup';
 
-import {hexToHSL, HSLToHex} from './utils';
+import ColorPickerGrid from './ColorPickerGrid';
+import ColorPickerSlider from './ColorPickerSlider';
+import ColorPickerSpectrum from './ColorPickerSpectrum';
+import {generateOppositeColor} from './utils';
 
 import componentCss from './ColorPicker.module.less';
 
 const SpottableButton = Spottable(ButtonBase);
 
+const defaultColors = ['#eb4034', '#32a852', '#3455eb'];
+
 /**
- * A component that contains the content for the {@link sandstone/ColorPicker|ColorPicker} popup.
+ * The favorite colors component.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link sandstone/ColorPicker|ColorPicker}.
  *
- * @class PopupContent
+ * @class FavoriteColors
  * @memberof sandstone/ColorPicker
  * @ui
  * @private
  */
-const PopupContent = ({color, colorHandler, css, presetColors}) => {
-	const [hue, setHue] = useState(0);
-	const [saturation, setSaturation] = useState(0);
-	const [lightness, setLightness] = useState(0);
-
-	useEffect(() => {
-		let {h, s, l} = hexToHSL(color);
-
-		setHue(h);
-		setSaturation(s);
-		setLightness(l);
-	}, [color]);
+const FavoriteColors = ({disabled, favoriteColors = [], favoriteColorsHandler, selectedColor = '#3455eb', selectedColorHandler}) => {
+	const [clickEnabled, setClickEnabled] = useState(true);
+	const [editEnabled, setEditEnabled] = useState(false);
+
+	const shakeEffectRef = useRef(null);
+	const timerRef = useRef(null);
+
+	const addNewFavoriteColor = useCallback(() => {
+		if (disabled) return;
+		if (favoriteColors.includes(selectedColor)) return;
+		favoriteColorsHandler(() => {
+			const colorsState = [...favoriteColors, selectedColor];
+			if (colorsState.length > 8) colorsState.shift();
+
+			return colorsState;
+		});
+	}, [disabled, favoriteColors, favoriteColorsHandler, selectedColor]);
+
+	const onAddNewFavoriteColor = useCallback(() => {
+		if (disabled) return;
+		if (editEnabled) {
+			setEditEnabled(false);
+			return;
+		}
+		addNewFavoriteColor();
+	}, [addNewFavoriteColor, disabled, editEnabled]);
+
+	const onSelectFavoriteColor = useCallback((ev) => {
+		if (disabled) return;
+		if (!clickEnabled) return;
+		const targetId = ev.target.offsetParent.id || ev.target.id;
+		const [buttonColor, buttonIndex] = targetId.split('-');
+
+		if (editEnabled && clickEnabled) {
+			const filteredColors = favoriteColors.filter((color, index) => {
+				return 	!(color === buttonColor && index === Number(buttonIndex));
+			});
+
+			favoriteColorsHandler(filteredColors);
+			selectedColorHandler(selectedColor);
+			return;
+		}
 
-	const changeHue = useCallback((ev) => {
-		setHue(ev.value);
-	}, []);
+		favoriteColorsHandler(favoriteColors);
+		selectedColorHandler(buttonColor);
+	}, [clickEnabled, disabled, editEnabled, favoriteColors, favoriteColorsHandler, selectedColor, selectedColorHandler]);
+
+	const onPressHandler = useCallback((ev) => {
+		if (disabled) return;
+		if (editEnabled) return;
+		if (ev.type === 'pointerdown' || (ev.type === 'keydown' && ev.keyCode === 13)) {
+			const target = ev.target.id ? ev.target : ev.target.offsetParent;
+
+			shakeEffectRef.current = setTimeout(() => {
+				target.classList.add(componentCss.shakeFavoriteColor);
+			}, 300);
+
+			timerRef.current = setTimeout(() => {
+				setEditEnabled(true);
+				setClickEnabled(false);
+				target.classList.remove(componentCss.shakeFavoriteColor);
+			}, 1000);
+		}
+	}, [disabled, editEnabled]);
 
-	const changeLightness = useCallback((ev) => {
-		setLightness(ev.value);
-	}, []);
+	const onReleaseHandler = useCallback((ev) => {
+		const target = ev.target.id ? ev.target : ev.target.offsetParent;
+		target.classList.remove(componentCss.shakeFavoriteColor);
 
-	const changeSaturation = useCallback((ev) => {
-		setSaturation(ev.value);
+		clearTimeout(shakeEffectRef.current);
+		clearTimeout(timerRef.current);
+		setTimeout(() => {
+			setClickEnabled(true);
+		}, 100);
 	}, []);
 
-	const handleClick = useCallback((ev) => {
-		colorHandler(ev.target.offsetParent.id);
-	}, [colorHandler]);
-
-	const onSliderValueChange = useCallback(() => {
-		colorHandler(HSLToHex(hue, saturation, lightness));
-	}, [colorHandler, hue, lightness, saturation]);
-
 	return (
-		<Cell className={css.colorPicker}>
-			<Row className={css.colorsRow} wrap>
-				{presetColors?.map((presetColor, presetColorIndex) => {
-
-					return (
-						<Cell key={presetColor + '-' + presetColorIndex} size="25%">
+		<div>
+			<Row className={componentCss.favoriteColorsRow}>
+				<Cell align="end">
+					{favoriteColors.slice(4, 8).map((color, index) => {
+						return (
 							<SpottableButton
-								className={css.coloredButton}
-								id={presetColor}
+								className={componentCss.favoriteColor}
+								id={`${color}-${index + 4}`}
+								key={`${color}_${index + 4}`}
 								minWidth={false}
-								onClick={handleClick}
-								style={{backgroundColor: presetColor}}
-								type="color"
-							/>
-						</Cell>
-					);
-				})}
+								onClick={onSelectFavoriteColor}
+								onKeyDown={onPressHandler}
+								onKeyUp={onReleaseHandler}
+								onPointerDown={onPressHandler}
+								onPointerUp={onReleaseHandler}
+								size="small"
+								spotlightDisabled={disabled}
+								style={{
+									backgroundColor: color,
+									borderColor: generateOppositeColor(color),
+									color: generateOppositeColor(color)
+								}}
+							>
+								{editEnabled && <Icon className={componentCss.deleteButton} size="tiny">trash</Icon>}
+							</SpottableButton>
+						);
+					})}
+				</Cell>
+				<Cell align="end">
+					{favoriteColors.slice(0, 4).map((color, index) => {
+						return (
+							<SpottableButton
+								className={componentCss.favoriteColor}
+								id={`${color}-${index}`}
+								key={`${color}_${index}`}
+								minWidth={false}
+								onClick={onSelectFavoriteColor}
+								onKeyDown={onPressHandler}
+								onKeyUp={onReleaseHandler}
+								onPointerDown={onPressHandler}
+								onPointerUp={onReleaseHandler}
+								size="small"
+								spotlightDisabled={disabled}
+								style={{
+									backgroundColor: color,
+									borderColor: generateOppositeColor(color),
+									color: generateOppositeColor(color)
+								}}
+							>
+								{editEnabled && <Icon className={componentCss.deleteButton} size="tiny">trash</Icon>}
+							</SpottableButton>
+						);
+					})}
+				</Cell>
 			</Row>
-			<div>
-				<Column className={css.colorPickerSliders}>
-					<BodyText className={css.colorSliderText} css={css}>Hue {hue}</BodyText>
-					<Slider
-						className={css.colorSlider}
-						max={356}
-						min={0}
-						onBlur={onSliderValueChange}
-						onClick={onSliderValueChange}
-						onChange={changeHue}
-						value={hue}
-					/>
-					<BodyText className={css.colorSliderText} css={css}>Saturation {saturation}%</BodyText>
-					<Slider
-						className={css.colorSlider}
-						max={100}
-						min={0}
-						onBlur={onSliderValueChange}
-						onClick={onSliderValueChange}
-						onChange={changeSaturation}
-						value={saturation}
-					/>
-					<BodyText className={css.colorSliderText} css={css}>Lightness {lightness}%</BodyText>
-					<Slider
-						className={css.colorSlider}
-						max={100}
-						min={0}
-						onBlur={onSliderValueChange}
-						onClick={onSliderValueChange}
-						onChange={changeLightness}
-						value={lightness}
-					/>
-				</Column>
-				<div className={css.coloredDiv} style={{backgroundColor: `hsl(${hue} ,${saturation}%, ${lightness}%)`}} />
-			</div>
-		</Cell>
+			<Row className={componentCss.selectedColorContainer}>
+				<SpottableButton
+					className={componentCss.selectedColor}
+					minWidth={false}
+					onClick={onAddNewFavoriteColor}
+					spotlightDisabled={disabled}
+					style={{
+						backgroundColor: selectedColor,
+						borderColor: generateOppositeColor(selectedColor),
+						color: generateOppositeColor(selectedColor)
+					}}
+				>
+					<Icon className={componentCss.selectedColorIcon} size="large">{editEnabled ? 'check' : 'plus'}</Icon>
+				</SpottableButton>
+			</Row>
+		</div>
 	);
 };
 
-PopupContent.propTypes = {
+FavoriteColors.displayName = 'FavoriteColors';
+
+FavoriteColors.propTypes = {
 	/**
-	 * Indicates the color.
+	 * Applies a disabled style and prevents interacting with the component.
 	 *
-	 * @type {String}
+	 * @type {Boolean}
+	 * @default false
 	 * @private
 	 */
-	color: PropTypes.string,
+	disabled: PropTypes.bool,
 
 	/**
-	 * Called when color is modified.
+	 * Contains an array with the favorite colors.
 	 *
-	 * @type {Function}
+	 * @type {Array}
 	 * @private
 	 */
-	colorHandler: PropTypes.func,
+	favoriteColors: PropTypes.array,
 
 	/**
-	 * Customizes the component by mapping the supplied collection of CSS class names to the
-	 * corresponding internal elements and states of this component.
-	 *
-	 * The following classes are supported:
+	 * Called when the favorite colors array is modified.
 	 *
-	 * `colorPicker` - The root class name
-	 * `coloredDiv`  - A class name used for a single div
+	 * @type {Function}
+	 * @private
+	 */
+	favoriteColorsHandler: PropTypes.func,
+
+	/**
+	 * Indicates the selected color.
 	 *
-	 * @type {Object}
+	 * @type {String}
 	 * @private
 	 */
-	css: PropTypes.object,
+	selectedColor: PropTypes.string,
 
 	/**
-	 * Contains an array with a couple of possible preset colors.
+	 * Called when the selected color is modified.
 	 *
-	 * @type {Array}
+	 * @type {Function}
 	 * @private
 	 */
-	presetColors: PropTypes.array
+	selectedColorHandler: PropTypes.func
 };
 
 /**
@@ -187,161 +250,178 @@ PopupContent.propTypes = {
  * @class ColorPickerBase
  * @memberof sandstone/ColorPicker
  * @ui
- * @private
+ * @public
  */
-const ColorPickerBase = kind({
-	name: 'ColorPicker',
-
-	functional: true,
-
-	propTypes: /** @lends sandstone/ColorPicker.ColorPickerBase.prototype */ {
-		/**
-		 * Indicates the color.
-		 *
-		 * @type {String}
-		 * @public
-		 */
-		color: PropTypes.string,
-
-		/**
-		 * Called when the color is modified.
-		 *
-		 * @type {Function}
-		 * @public
-		 */
-		colorHandler: PropTypes.func,
-
-		/**
-		 * Customizes the component by mapping the supplied collection of CSS class names to the
-		 * corresponding internal elements and states of this component.
-		 *
-		 * The following classes are supported:
-		 *
-		 * `colorPicker` - The root class name
-		 * `coloredDiv`  - A class name used for a single div
-		 *
-		 * @type {Object}
-		 * @public
-		 */
-		css: PropTypes.object,
-
-		/**
-		 * Applies the `disabled` class.
-		 *
-		 * When `true`, the color picker is shown as disabled.
-		 *
-		 * @type {Boolean}
-		 * @default false
-		 * @public
-		 */
-		disabled: PropTypes.bool,
-
-		/**
-		 * Called to open or close the color picker.
-		 *
-		 * @type {Function}
-		 * @public
-		 */
-		onTogglePopup: PropTypes.func,
-
-		/**
-		 * Indicates if the color picker is open.
-		 *
-		 * When `true`, contextual popup opens.
-		 *
-		 * @type {Boolean}
-		 * @default false
-		 * @private
-		 */
-		popupOpen: PropTypes.bool,
-
-		/**
-		 * Contains an array with a couple of possible preset colors.
-		 *
-		 * @type {Array}
-		 * @public
-		 */
-		presetColors: PropTypes.array,
-
-		/**
-		 * Contains the text that shows near color picker.
-		 *
-		 * @type {String}
-		 * @public
-		 */
-		text: PropTypes.string
-	},
-
-	handlers: {
-		handleClosePopup: (ev, {onTogglePopup}) => {
-			onTogglePopup();
-		},
-		handleOpenPopup: (ev, {disabled, onTogglePopup}) => {
-			if (!disabled) {
-				onTogglePopup();
-			}
+const ColorPickerBase = ({color = '#eb4034', colors = defaultColors, disabled, onChangeColor, open, type = 'grid', ...rest}) => {
+	const [favoriteColors, setFavoriteColors] = useState(colors);
+	const [selectedColor, setSelectedColor] = useState(color);
+	const [tabLayoutIndex, setTabLayoutIndex] = useState(0);
+
+	useEffect(() => {
+		setFavoriteColors(colors);
+		setSelectedColor(color);
+
+		switch (type) {
+			case 'grid':
+				setTabLayoutIndex(0);
+				return;
+			case 'spectrum':
+				setTabLayoutIndex(1);
+				return;
+			case 'sliders':
+				setTabLayoutIndex(2);
+				return;
+			default:
+				setTabLayoutIndex(0);
+		}
+	}, [color, colors, type]);
+
+	const handleFavouriteColors = useCallback(favColors => {
+		const parameterType = typeof (favColors);
+		let newFavouriteColors = {};
+
+		switch (parameterType) {
+			case 'function':
+				newFavouriteColors = favColors();
+				break;
+			case 'object':
+				newFavouriteColors = favColors;
+				break;
+			default:
+				break;
 		}
-	},
-
-	styles: {
-		css: componentCss,
-		publicClassNames: true
-	},
-
-	render: ({color, colorHandler, css, disabled = false, handleClosePopup, handleOpenPopup, popupOpen = false, presetColors, text, ...rest}) => {
-		delete rest.onTogglePopup;
-
-		const CloseIcon = useCallback((props) => <Icon {...props} css={css} />, [css]);
-		const slotAfter = <SpottableButton
-			className={css.coloredButton}
-			disabled={disabled}
-			onClick={handleOpenPopup}
-			style={{backgroundColor: color}}
-			type="color"
-		/>;
-
-		return (
-			<Cell shrink className={css.colorPicker}>
-				<Item disabled={disabled} onClick={handleOpenPopup} slotAfter={slotAfter} {...rest}>
-					{text}
-				</Item>
-				<Popup
-					className={css.colorPopup}
-					css={css}
-					noAnimation
-					onClose={handleClosePopup}
-					open={disabled ? false : popupOpen}
-					position="left"
-					scrimType="transparent"
-				>
-					<Row>
-						<Cell align="center">
-							<BodyText className={css.colorPopupHeader} css={css} noWrap>{text}</BodyText>
-						</Cell>
-						<Cell align="right" shrink>
-							<Button className={css.closeButton} css={css} iconComponent={CloseIcon} icon="closex" onClick={handleClosePopup} size="small" />
-						</Cell>
-					</Row>
-					<PopupContent color={color} colorHandler={colorHandler} css={css} presetColors={presetColors} />
-				</Popup>
-			</Cell>
-		);
-	}
-});
 
-/**
- * Applies Sandstone specific behaviors to {@link sandstone/ColorPicker.ColorPickerBase|ColorPicker} components.
- *
- * @hoc
- * @memberof sandstone/ColorPicker
- * @mixes sandstone/Skinnable.Skinnable
- * @mixes ui/Toggleable.Toggleable
- * @private
- */
-const ColorPickerDecorator = compose(
-	Skinnable,
-	Toggleable({prop: 'popupOpen', toggle: 'onTogglePopup'})
-);
+		setFavoriteColors(newFavouriteColors);
+		if (onChangeColor) onChangeColor({selectedColor, favoriteColors: newFavouriteColors});
+	}, [onChangeColor, selectedColor]);
+
+	const handleGridClick = useCallback(() => {
+		if (disabled) return;
+		setTabLayoutIndex(0);
+	}, [disabled, setTabLayoutIndex]);
+
+	const handleSelectedColor = useCallback(newColor => {
+		setSelectedColor((actualColor) => {
+			if (actualColor === newColor)  return actualColor;
+			if (onChangeColor) onChangeColor({selectedColor: newColor, favoriteColors});
+
+			return newColor;
+		});
+	}, [onChangeColor, favoriteColors]);
+
+	const handleSlidersClick = useCallback(() => {
+		if (disabled) return;
+		setTabLayoutIndex(2);
+	}, [disabled, setTabLayoutIndex]);
+
+	const handleSpectrumClick = useCallback(() => {
+		if (disabled) return;
+		setTabLayoutIndex(1);
+	}, [disabled, setTabLayoutIndex]);
+
+	const renderContent = () => {
+		if (tabLayoutIndex === 0) {
+			return (
+				<ColorPickerGrid disabled={disabled} selectedColorHandler={handleSelectedColor} />
+			);
+		} else if (tabLayoutIndex === 1) {
+			return (
+				<ColorPickerSpectrum disabled={disabled} selectedColor={selectedColor} selectedColorHandler={handleSelectedColor} />
+			);
+		} else if (tabLayoutIndex === 2) {
+			return (
+				<ColorPickerSlider disabled={disabled} selectedColor={selectedColor} selectedColorHandler={handleSelectedColor} />
+			);
+		}
+	};
+
+	return (
+		<Popup disabled={disabled} open={open} position="center" {...rest}>
+			<Row>
+				<Cell size="75%">
+					<TabGroup
+						className={componentCss.pickerTabGroup}
+						tabs={[
+							{title: 'Grid', onTabClick: handleGridClick},
+							{title: 'Spectrum', onTabClick: handleSpectrumClick},
+							{title: 'Sliders', onTabClick: handleSlidersClick}
+						]}
+						orientation="horizontal"
+					/>
+					<div className={componentCss.colorPicker}>
+						{renderContent()}
+					</div>
+				</Cell>
+				<Cell align="end" size="25%">
+					<FavoriteColors
+						disabled={disabled}
+						favoriteColors={favoriteColors}
+						favoriteColorsHandler={handleFavouriteColors}
+						selectedColor={selectedColor}
+						selectedColorHandler={handleSelectedColor}
+					/>
+				</Cell>
+			</Row>
+		</Popup>
+	);
+};
+
+ColorPickerBase.displayName = 'ColorPicker';
+
+ColorPickerBase.propTypes = {/** @lends sandstone/ColorPicker.ColorPickerBase.prototype */
+	/**
+	 * Indicates the selected color.
+	 *
+	 * @type {String}
+	 * @public
+	 */
+	color: PropTypes.string,
+
+	/**
+	 * Contains an array with colors.
+	 *
+	 * @type {Array}
+	 * @public
+	 */
+	colors: PropTypes.array,
+
+	/**
+	 * Applies a disabled style and prevents interacting with the component.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @public
+	 */
+	disabled: PropTypes.bool,
+
+	/**
+	 * Called when the selected color is modified.
+	 *
+	 * @type {Function}
+	 * @public
+	 */
+	onChangeColor: PropTypes.func,
+
+	/**
+	 * Controls the visibility of the ColorPicker.
+	 *
+	 * By default, the ColorPicker and its contents are not rendered until `open`.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @public
+	 */
+	open: PropTypes.bool,
+
+	/**
+	 * Set the type of color picker to use.
+	 *
+	 * @type {('grid'|'spectrum'|'sliders')}
+	 * @default 'grid'
+	 * @public
+	 */
+	type: PropTypes.oneOf(['grid', 'spectrum', 'sliders'])
+};
 
 /**
  * A color picker component, ready to use in Sandstone applications.
@@ -349,15 +429,14 @@ const ColorPickerDecorator = compose(
  * @class ColorPicker
  * @memberof sandstone/ColorPicker
  * @extends sandstone/ColorPicker.ColorPickerBase
- * @mixes sandstone/ColorPicker.ColorPickerDecorator
  * @ui
- * @private
+ * @public
  */
-const ColorPicker = ColorPickerDecorator(ColorPickerBase);
+const ColorPicker = Skinnable(ColorPickerBase);
 
 export default ColorPicker;
 export {
 	ColorPicker,
 	ColorPickerBase,
-	ColorPickerDecorator
+	FavoriteColors
 };
diff --git a/ColorPicker/ColorPicker.module.less b/ColorPicker/ColorPicker.module.less
index 5b02bda3f3..d8ee756e24 100644
--- a/ColorPicker/ColorPicker.module.less
+++ b/ColorPicker/ColorPicker.module.less
@@ -1,93 +1,74 @@
 // ColorPicker.module.less
 //
-@import '../styles/colors.less';
-@import '../styles/mixins.less';
-@import '../styles/variables.less';
-
-.colorPicker {
-	align-items: center;
-	justify-content: space-between;
-
-	.colorsRow {
-		width: 522px;
-		padding-top: 9px;
-	}
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
+
+@keyframes shakeColor {
+	0% { transform: translateX(0) }
+	25% { transform: translateX(3px) }
+	50% { transform: translateX(-3px) }
+	75% { transform: translateX(3px) }
+	100% { transform: translateX(0) }
+}
 
-	.coloredButton {
-		border-radius: 72px;
-		border: 3px solid #ffffff;
-		height: 120px;
-		margin-left: 0;
-		min-width: 120px;
-		padding: 0;
-		transform: none;
+.pickerTabGroup {
+	min-width: @sand-colorpicker-tabgroup-width;
+	padding-bottom: @sand-colorpicker-padding;
+}
 
-		.focus({
-			transform: scale(1.1);
-		});
+.colorPicker {
+	display: flex;
+	height: @sand-colorpicker-height;
+	justify-content: center;
+	padding: @sand-colorpicker-padding;
+}
 
-		.disabled({
-			opacity: @sand-disabled-opacity;
-		})
-	}
+.favoriteColorsRow {
+	text-align: center;
 
-	.coloredDiv,
-	.coloredInput {
-		border-radius: 24px;
-	}
+	.favoriteColor {
+		border-radius: 50%;
+		border: @sand-colorpicker-border-medium solid;
+		transition: transform .2s;
 
-	.coloredDiv {
-		display: block;
-		height: 81px;
-		border: 3px solid #ffffff;
-
-		&.button, &.focusExpand {
-			margin: 24px;
+		.deleteButton {
+			position: absolute;
+			z-index: -2;
 		}
 
 		.focus({
+			box-shadow: 0 0 12px 3px inset;
 			transform: scale(1.1);
 		});
 	}
 
-	.coloredInput {
-		opacity: 0;
-
-		&:hover {
-			cursor: pointer;
-		}
+	.shakeFavoriteColor {
+		animation: shakeColor 0.2s;
+		animation-iteration-count: infinite;
 	}
 }
 
-.colorPopup {
-	height: max-content;
+.selectedColorContainer {
+	justify-content: center;
+	margin-top: @sand-colorpicker-selectedcolor-margin;
 
-	.colorPopupHeader {
-		font-size: 66px;
-		text-transform: capitalize;
-		margin: 0 0 0 15px;
-	}
-
-	.closeButton {
-		&.button, &.focusExpand {
-			margin: 0;
-		}
+	.selectedColor {
+		border-radius: @sand-colorpicker-selectedcolor-border-radius;
+		border: @sand-colorpicker-border-medium solid;
+		height: @sand-colorpicker-selectedcolor-height;
+		margin-inline: 0;
+		transition: transform .2s;
 
-		.icon {
-			font-size: 48px;
+		.selectedColorIcon {
+			transition: transform .2s;
 		}
-	}
-
-	.colorPickerSliders {
-		padding: 45px 0;
 
-		.colorSlider {
-			margin: 0 27px;
-		}
+		.focus({
+			box-shadow: 0 0 12px 6px inset;
 
-		.colorSliderText {
-			font-size: 54px;
-			margin: 0 24px;
-		}
+			.selectedColorIcon {
+				transform: scale(1.2);
+			}
+		});
 	}
 }
diff --git a/ColorPicker/ColorPickerGrid.js b/ColorPicker/ColorPickerGrid.js
new file mode 100644
index 0000000000..be1820590b
--- /dev/null
+++ b/ColorPicker/ColorPickerGrid.js
@@ -0,0 +1,116 @@
+/**
+ * Sandstone component to allow the user to choose a color from a grid.
+ *
+ * @example
+ * <ColorPickerGrid
+ * 	 selectedColor="#FF00FF"
+ * 	 selectedColorHandler={setSelectedColor}
+ * />
+ *
+ * @exports ColorPickerGrid
+ * @exports ColorPickerGridBase
+ * @private
+ */
+import Spottable from '@enact/spotlight/Spottable';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import {useCallback} from 'react';
+
+import Skinnable from '../Skinnable';
+
+import {generateOppositeColor, rgbStringToHex} from './utils';
+
+import componentCss from './ColorPickerGrid.module.less';
+
+const SpottableDiv = Spottable('div');
+
+const colors = [
+	['#ffffff', '#00374a', '#004d65', '#016e8f', '#008cb4', '#00a1d8', '#01c7fc', '#52d6fc', '#93e3fd', '#cbf0ff'],
+	['#ebebeb', '#011d57', '#012f7b', '#0042a9', '#0056d6', '#0061fe', '#3a87fe', '#74a7ff', '#a7c6ff', '#d3e2ff'],
+	['#d6d6d6', '#11053b', '#1a0a52', '#2c0977', '#371a94', '#4d22b2', '#5e30eb', '#864ffe', '#b18cfe', '#d9c9fe'],
+	['#c2c2c2', '#2e063d', '#450d59', '#61187c', '#7a219e', '#982abc', '#be38f3', '#d357fe', '#e292fe', '#efcaff'],
+	['#adadad', '#3c071b', '#551029', '#791a3d', '#99244f', '#b92d5d', '#e63b7a', '#ee719e', '#f4a4c0', '#f9d3e0'],
+	['#999999', '#5c0701', '#831100', '#b51a00', '#e22400', '#ff4015', '#ff6250', '#ff8c82', '#ffb5af', '#ffdbd8'],
+	['#858585', '#5a1c00', '#7b2900', '#ad3e00', '#da5100', '#ff6a00', '#ff8648', '#ffa57d', '#ffc5ab', '#ffe2d6'],
+	['#707070', '#583300', '#7a4a00', '#a96800', '#d38301', '#ffab01', '#feb43f', '#ffc777', '#ffd9a8', '#ffecd4'],
+	['#5c5c5c', '#563d00', '#785800', '#a67b01', '#d19d01', '#fdc700', '#fecb3e', '#ffd977', '#fee4a8', '#fff2d5'],
+	['#474747', '#666100', '#8d8602', '#c4bc00', '#f5ec00', '#fefb41', '#fff76b', '#fff994', '#fffbb9', '#fefcdd'],
+	['#333333', '#4f5504', '#6f760a', '#9ba50e', '#c3d117', '#d9ec37', '#e4ef65', '#eaf28f', '#f2f7b7', '#f7fadb'],
+	['#000000', '#263e0f', '#38571a', '#4e7a27', '#669d34', '#76bb40', '#96d35f', '#b1dd8b', '#cde8b5', '#dfeed4']
+];
+
+/**
+ * The color picker base component which sets-up the component's structure.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link sandstone/ColorPickerGrid|ColorPickerGrid}.
+ *
+ * @class ColorPickerGridBase
+ * @memberof sandstone/ColorPicker
+ * @ui
+ * @private
+ */
+const ColorPickerGridBase = (props) => {
+	const {className, disabled, selectedColorHandler, ...rest} = props;
+
+	const handleClick = useCallback((e) => {
+		if (disabled) return;
+		selectedColorHandler(rgbStringToHex(e.target.style.backgroundColor));
+	}, [disabled, selectedColorHandler]);
+
+	return (
+		<div className={classnames(componentCss.colorPicker, className)} {...rest} >
+			{
+				colors.map((row, rowIndex) => {
+					return (
+						<div key={rowIndex}>
+							{
+								colors[rowIndex].map((color, colorIndex) => {
+									return <SpottableDiv className={componentCss.colorBlock} spotlightDisabled={disabled} onClick={handleClick} style={{backgroundColor: color, '--sand-colorpicker-grid-focus-border-color': generateOppositeColor(color)}} key={colorIndex} />;
+								})
+							}
+						</div>
+					);
+				})
+			}
+		</div>
+	);
+};
+
+ColorPickerGridBase.displayName = 'ColorPickerGridBase';
+
+ColorPickerGridBase.propTypes = {/** @lends sandstone/ColorPicker.ColorPickerGridBase.prototype */
+	/**
+	 * Applies a disabled style and prevents interacting with the component.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @private
+	 */
+	disabled: PropTypes.bool,
+
+	/**
+	 * A function to run when the current color changes.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	selectedColorHandler: PropTypes.func
+};
+
+/**
+ * A color picker component, ready to use in Sandstone applications.
+ *
+ * @class ColorPickerGrid
+ * @memberof sandstone/ColorPicker
+ * @extends sandstone/ColorPicker.ColorPickerGridBase
+ * @ui
+ * @private
+ */
+const ColorPickerGrid = Skinnable(ColorPickerGridBase);
+
+export default ColorPickerGrid;
+export {
+	ColorPickerGrid,
+	ColorPickerGridBase
+};
diff --git a/ColorPicker/ColorPickerGrid.module.less b/ColorPicker/ColorPickerGrid.module.less
new file mode 100644
index 0000000000..8ff91059fb
--- /dev/null
+++ b/ColorPicker/ColorPickerGrid.module.less
@@ -0,0 +1,20 @@
+// ColorPickerGrid.module.less
+//
+@import "../styles/colors.less";
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
+
+.colorPicker {
+	display: flex;
+
+	.colorBlock {
+		border: @sand-colorpicker-border-large solid @sand-colorpicker-colorblock-border-color;
+		height: @sand-colorpicker-grid-colorblock-size;
+		width: @sand-colorpicker-grid-colorblock-size;
+
+		.focus({
+			border-color: var(--sand-colorpicker-grid-focus-border-color);
+			box-shadow: 0 0 12px 3px inset;
+		})
+	}
+}
diff --git a/ColorPicker/ColorPickerSlider.js b/ColorPicker/ColorPickerSlider.js
new file mode 100644
index 0000000000..5349c3799e
--- /dev/null
+++ b/ColorPicker/ColorPickerSlider.js
@@ -0,0 +1,525 @@
+/**
+ * Sandstone component that allows the user to choose a color by using an RGB or an HSL color slider.
+ *
+ * @example
+ * <ColorPickerSlider
+ *	 selectedColor="#FF00FF"
+ *	 selectedColorHandler={setSelectedColor}
+ * />
+ *
+ * @exports ColorPickerSlider
+ * @exports ColorPickerSliderRGB
+ * @exports ColorPickerSliderHSL
+ * @private
+ */
+import Layout, {Cell, Row} from '@enact/ui/Layout';
+import PropTypes from 'prop-types';
+import {useCallback, useEffect, useState} from 'react';
+
+import Dropdown from '../Dropdown';
+import {InputField} from '../Input';
+import Slider from '../Slider';
+
+import {checkHex, generateOppositeColor, hexToHSL, hexToRGB, hslToHex, hslToRGBString, rgbObjectToHex} from './utils';
+
+import componentCss from './ColorPickerSlider.module.less';
+
+const hueGradient = (saturation, lightness) => {
+	return `linear-gradient(to right, 
+	hsla(0, ${saturation}%, ${lightness}%, 1),
+	hsla(10, ${saturation}%, ${lightness}%, 1),
+	hsla(20, ${saturation}%, ${lightness}%, 1),
+	hsla(30, ${saturation}%, ${lightness}%, 1),
+	hsla(40, ${saturation}%, ${lightness}%, 1),
+	hsla(50, ${saturation}%, ${lightness}%, 1),
+	hsla(60, ${saturation}%, ${lightness}%, 1),
+	hsla(70, ${saturation}%, ${lightness}%, 1),
+	hsla(80, ${saturation}%, ${lightness}%, 1),
+	hsla(90, ${saturation}%, ${lightness}%, 1),
+	hsla(100, ${saturation}%, ${lightness}%, 1),
+	hsla(110, ${saturation}%, ${lightness}%, 1),
+	hsla(120, ${saturation}%, ${lightness}%, 1),
+	hsla(130, ${saturation}%, ${lightness}%, 1),
+	hsla(140, ${saturation}%, ${lightness}%, 1),
+	hsla(150, ${saturation}%, ${lightness}%, 1),
+	hsla(160, ${saturation}%, ${lightness}%, 1),
+	hsla(170, ${saturation}%, ${lightness}%, 1),
+	hsla(180, ${saturation}%, ${lightness}%, 1),
+	hsla(190, ${saturation}%, ${lightness}%, 1),
+	hsla(200, ${saturation}%, ${lightness}%, 1),
+	hsla(210, ${saturation}%, ${lightness}%, 1),
+	hsla(220, ${saturation}%, ${lightness}%, 1),
+	hsla(230, ${saturation}%, ${lightness}%, 1),
+	hsla(240, ${saturation}%, ${lightness}%, 1),
+	hsla(250, ${saturation}%, ${lightness}%, 1),
+	hsla(260, ${saturation}%, ${lightness}%, 1),
+	hsla(270, ${saturation}%, ${lightness}%, 1),
+	hsla(280, ${saturation}%, ${lightness}%, 1),
+	hsla(290, ${saturation}%, ${lightness}%, 1),
+	hsla(300, ${saturation}%, ${lightness}%, 1),
+	hsla(310, ${saturation}%, ${lightness}%, 1),
+	hsla(320, ${saturation}%, ${lightness}%, 1),
+	hsla(330, ${saturation}%, ${lightness}%, 1),
+	hsla(340, ${saturation}%, ${lightness}%, 1),
+	hsla(350, ${saturation}%, ${lightness}%, 1),
+	hsla(360, ${saturation}%, ${lightness}%, 1))`;
+};
+
+const lightnessGradient = (hue, saturation) => {
+	return `linear-gradient(to right, 
+	hsla(${hue}, ${saturation}%, 0%, 1),
+	hsla(${hue}, ${saturation}%, 20%, 1),
+	hsla(${hue}, ${saturation}%, 40%, 1),
+	hsla(${hue}, ${saturation}%, 60%, 1),
+	hsla(${hue}, ${saturation}%, 80%, 1),
+	hsla(${hue}, ${saturation}%, 100%, 1))`;
+};
+
+/**
+ * A color picker component that allows the user to choose a color by using an RGB color slider.
+ *
+ * @class ColorPickerSliderRGB
+ * @memberof sandstone/ColorPicker
+ * @ui
+ * @private
+ */
+const ColorPickerSliderRGB = ({disabled, selectedColor, selectedColorHandler, ...props}) => {
+	const {red, green, blue} = hexToRGB(selectedColor);
+	const [localRed, setLocalRed] = useState(red);
+	const [localGreen, setLocalGreen] = useState(green);
+	const [localBlue, setLocalBlue] = useState(blue);
+
+	useEffect(() => {
+		setLocalRed(red);
+		setLocalGreen(green);
+		setLocalBlue(blue);
+	}, [blue, green, red]);
+
+	const changeValueRed = useCallback((ev) => {
+		setLocalRed(ev.value);
+	}, []);
+
+	const changeValueGreen = useCallback((ev) => {
+		setLocalGreen(ev.value);
+	}, []);
+
+	const changeValueBlue = useCallback((ev) => {
+		setLocalBlue(ev.value);
+	}, []);
+
+	const changeSelectedColor = useCallback(() => {
+		selectedColorHandler(rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue}));
+	}, [localBlue, localGreen, localRed, selectedColorHandler]);
+
+	return (
+		<Layout {...props} className={componentCss.slidersContainer}>
+			<Cell>
+				<Cell className={componentCss.labelText}>Red</Cell>
+				<Row className={componentCss.sliderRow}>
+					<Cell
+						className={componentCss.sliderCell}
+						size="70%"
+						style={{backgroundImage: `linear-gradient(to right, rgb(0,${localGreen},${localBlue}), rgb(255,${localGreen},${localBlue}))`}}
+					>
+						<Slider
+							activateOnSelect
+							css={componentCss}
+							disabled={disabled}
+							max={255}
+							min={0}
+							noFill
+							onBlur={changeSelectedColor}
+							onChange={changeValueRed}
+							onKeyUp={changeSelectedColor}
+							onPointerUp={changeSelectedColor}
+							spotlightDisabled={disabled}
+							style={{
+								'--sand-slider-knob-border-color': generateOppositeColor(rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})),
+								'--sand-focus-bg-color-rgb': `${localRed},${localGreen},${localBlue}`,
+								'--sand-progress-slider-color': rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})
+							}}
+							value={localRed}
+						/>
+					</Cell>
+					<Cell className={componentCss.outputText} size="20%">{localRed}</Cell>
+				</Row>
+				<Cell className={componentCss.labelText}>Green</Cell>
+				<Row className={componentCss.sliderRow}>
+					<Cell
+						className={componentCss.sliderCell}
+						size="70%"
+						style={{backgroundImage: `linear-gradient(to right, rgb(${localRed},0,${localBlue}), rgb(${localRed},255,${localBlue}))`}}
+					>
+						<Slider
+							activateOnSelect
+							css={componentCss}
+							disabled={disabled}
+							max={255}
+							min={0}
+							noFill
+							onBlur={changeSelectedColor}
+							onChange={changeValueGreen}
+							onKeyUp={changeSelectedColor}
+							onPointerUp={changeSelectedColor}
+							spotlightDisabled={disabled}
+							style={{
+								'--sand-slider-knob-border-color': generateOppositeColor(rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})),
+								'--sand-focus-bg-color-rgb': `${localRed},${localGreen},${localBlue}`,
+								'--sand-progress-slider-color': rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})
+							}}
+							value={localGreen}
+						/>
+					</Cell>
+					<Cell className={componentCss.outputText} size="20%">{localGreen}</Cell>
+				</Row>
+				<Cell className={componentCss.labelText}>Blue</Cell>
+				<Row className={componentCss.sliderRow}>
+					<Cell
+						className={componentCss.sliderCell}
+						size="70%"
+						style={{backgroundImage: `linear-gradient(to right, rgb(${localRed},${localGreen},0), rgb(${localRed},${localGreen},255))`}}
+					>
+						<Slider
+							activateOnSelect
+							css={componentCss}
+							disabled={disabled}
+							max={255}
+							min={0}
+							noFill
+							onBlur={changeSelectedColor}
+							onChange={changeValueBlue}
+							onKeyUp={changeSelectedColor}
+							onPointerUp={changeSelectedColor}
+							spotlightDisabled={disabled}
+							style={{
+								'--sand-slider-knob-border-color': generateOppositeColor(rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})),
+								'--sand-focus-bg-color-rgb': `${localRed},${localGreen},${localBlue}`,
+								'--sand-progress-slider-color': rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})
+							}}
+							value={localBlue}
+						/>
+					</Cell>
+					<Cell className={componentCss.outputText} size="20%">{localBlue}</Cell>
+				</Row>
+			</Cell>
+		</Layout>
+	);
+};
+
+ColorPickerSliderRGB.displayName = 'ColorPickerSliderRGB';
+
+ColorPickerSliderRGB.propTypes = {
+	/**
+	 * Applies a disabled style and prevents interacting with the component.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @private
+	 */
+	disabled: PropTypes.bool,
+
+	/**
+	 * Indicates the selected color.
+	 *
+	 * @type {String}
+	 * @private
+	 */
+	selectedColor: PropTypes.string,
+
+	/**
+	 * Called when the selected color is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	selectedColorHandler: PropTypes.func
+};
+
+/**
+ * A color picker component that allows the user to choose a color by using an HSL color slider.
+ *
+ * @class ColorPickerSliderHSL
+ * @memberof sandstone/ColorPicker
+ * @ui
+ * @private
+ */
+const ColorPickerSliderHSL = ({disabled, selectedColor, selectedColorHandler, ...props}) => {
+	const {h, s, l} = hexToHSL(selectedColor);
+	const [hue, setHue] = useState(h);
+	const [saturation, setSaturation] = useState(s);
+	const [lightness, setLightness] = useState(l);
+
+	useEffect(() => {
+		setHue(h);
+		setSaturation(s);
+		setLightness(l);
+	}, [h, l, s]);
+
+	const changeValueHue = useCallback((ev) => {
+		setHue(ev.value);
+	}, []);
+
+	const changeValueSaturation = useCallback((ev) => {
+		setSaturation(ev.value);
+	}, []);
+
+	const changeValueLightness = useCallback((ev) => {
+		setLightness(ev.value);
+	}, []);
+
+	const changeSelectedColor = useCallback(() => {
+		selectedColorHandler(hslToHex({h: hue, s: saturation, l: lightness}));
+	}, [hue, saturation, lightness, selectedColorHandler]);
+
+	return (
+		<Layout {...props} className={componentCss.slidersContainer}>
+			<Cell>
+				<Cell>
+					<Cell className={componentCss.labelText}>Hue</Cell>
+					<Row className={componentCss.sliderRow}>
+						<Cell
+							className={componentCss.sliderCell}
+							size="70%"
+							style={{backgroundImage: hueGradient(saturation, lightness)}}
+						>
+							<Slider
+								activateOnSelect
+								css={componentCss}
+								disabled={disabled}
+								max={360}
+								min={0}
+								noFill
+								onBlur={changeSelectedColor}
+								onChange={changeValueHue}
+								onKeyUp={changeSelectedColor}
+								onPointerUp={changeSelectedColor}
+								spotlightDisabled={disabled}
+								style={{
+									'--sand-slider-knob-border-color': generateOppositeColor(hslToHex({h: hue, s: saturation, l: lightness})),
+									'--sand-focus-bg-color-rgb': hslToRGBString({h: hue, s: saturation, l: lightness}),
+									'--sand-progress-slider-color': hslToHex({h: hue, s: saturation, l: lightness})
+								}}
+								value={hue}
+							/>
+						</Cell>
+						<Cell className={componentCss.outputText} size="20%">{hue}</Cell>
+					</Row>
+				</Cell>
+				<Cell>
+					<Cell className={componentCss.labelText}>Saturation</Cell>
+					<Row className={componentCss.sliderRow}>
+						<Cell
+							className={componentCss.sliderCell}
+							size="70%"
+							style={{backgroundImage: `linear-gradient(to right, hsl(${hue}, 0%, ${lightness}%), hsl(${hue}, 100%, ${lightness}%))`}}
+						>
+							<Slider
+								activateOnSelect
+								css={componentCss}
+								disabled={disabled}
+								max={100}
+								min={0}
+								noFill
+								onBlur={changeSelectedColor}
+								onChange={changeValueSaturation}
+								onKeyUp={changeSelectedColor}
+								onPointerUp={changeSelectedColor}
+								spotlightDisabled={disabled}
+								style={{
+									'--sand-slider-knob-border-color': generateOppositeColor(hslToHex({h: hue, s: saturation, l: lightness})),
+									'--sand-focus-bg-color-rgb': hslToRGBString({h: hue, s: saturation, l: lightness}),
+									'--sand-progress-slider-color': hslToHex({h: hue, s: saturation, l: lightness})
+								}}
+								value={saturation}
+							/>
+						</Cell>
+						<Cell className={componentCss.outputText} size="20%">{saturation}%</Cell>
+					</Row>
+				</Cell>
+				<Cell>
+					<Cell className={componentCss.labelText}>Lightness</Cell>
+					<Row className={componentCss.sliderRow}>
+						<Cell
+							className={componentCss.sliderCell}
+							size="70%"
+							style={{backgroundImage: lightnessGradient(hue, saturation)}}
+						>
+							<Slider
+								activateOnSelect
+								css={componentCss}
+								disabled={disabled}
+								max={100}
+								min={0}
+								noFill
+								onBlur={changeSelectedColor}
+								onChange={changeValueLightness}
+								onKeyUp={changeSelectedColor}
+								onPointerUp={changeSelectedColor}
+								spotlightDisabled={disabled}
+								style={{
+									'--sand-slider-knob-border-color': generateOppositeColor(hslToHex({h: hue, s: saturation, l: lightness})),
+									'--sand-focus-bg-color-rgb': hslToRGBString({h: hue, s: saturation, l: lightness}),
+									'--sand-progress-slider-color': hslToHex({h: hue, s: saturation, l: lightness})
+								}}
+								value={lightness}
+							/>
+						</Cell>
+						<Cell className={componentCss.outputText} size="20%">{lightness}%</Cell>
+					</Row>
+				</Cell>
+			</Cell>
+		</Layout>
+	);
+};
+
+ColorPickerSliderHSL.displayName = 'ColorPickerSliderHSL';
+
+ColorPickerSliderHSL.propTypes = {
+	/**
+	 * Applies a disabled style and prevents interacting with the component.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @private
+	 */
+	disabled: PropTypes.bool,
+
+	/**
+	 * Indicates the selected color.
+	 *
+	 * @type {String}
+	 * @private
+	 */
+	selectedColor: PropTypes.string,
+
+	/**
+	 * Called when the selected color is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	selectedColorHandler: PropTypes.func
+};
+
+/**
+ * A color picker component, ready to use in Sandstone applications.
+ *
+ * @class ColorPickerSlider
+ * @memberof sandstone/ColorPicker
+ * @ui
+ * @private
+ */
+const ColorPickerSlider = ({disabled, selectedColor, selectedColorHandler, type = 'RGB', ...props}) => {
+	const [pickerType, setPickerType] = useState('RGB');
+	const [dropdownValue, setDropdownValue] = useState(0);
+
+	useEffect(() => {
+		if (type === 'RGB') {
+			setDropdownValue(0);
+			setPickerType('RGB');
+		} else if (type === 'HSL') {
+			setDropdownValue(1);
+			setPickerType('HSL');
+		}
+	}, [type]);
+
+	const handleBlur = useCallback(() => {
+		if (checkHex(selectedColor)) selectedColorHandler('#000000');
+	}, [selectedColor, selectedColorHandler]);
+
+	const handleInputChange = useCallback((ev) => {
+		if (ev.value.length > 7 || ev.value.length < 1) return;
+		selectedColorHandler(ev.value);
+	}, [selectedColorHandler]);
+
+	const handleSelect = useCallback((ev) => {
+		setPickerType(ev.data);
+		if (ev.data === 'RGB') {
+			setDropdownValue(0);
+		} else if (ev.data === 'HSL') {
+			setDropdownValue(1);
+		}
+	}, [setDropdownValue, setPickerType]);
+
+	return (
+		<Cell {...props} className={componentCss.sliderPickerContainer}>
+			<Row>
+				<Cell size="60%">
+					<Dropdown
+						className={componentCss.pickerSelect}
+						disabled={disabled}
+						onSelect={handleSelect}
+						placeholder={pickerType}
+						selected={dropdownValue}
+						size="small"
+						spotlightDisabled={disabled}
+						width="tiny"
+					>
+						{['RGB', 'HSL']}
+					</Dropdown>
+				</Cell>
+				<Cell size="40%">
+					<InputField
+						className={componentCss.hexInput}
+						disabled={disabled}
+						invalid={checkHex(selectedColor)}
+						invalidMessage="Use a 6 characters hex code"
+						onBlur={handleBlur}
+						onChange={handleInputChange}
+						spotlightDisabled={disabled}
+						value={selectedColor?.toUpperCase()}
+					/>
+				</Cell>
+			</Row>
+			{pickerType === 'HSL' ?
+				<ColorPickerSliderHSL disabled={disabled} selectedColor={selectedColor} selectedColorHandler={selectedColorHandler} /> :
+				<ColorPickerSliderRGB disabled={disabled} selectedColor={selectedColor} selectedColorHandler={selectedColorHandler} />
+			}
+		</Cell>
+	);
+};
+
+ColorPickerSlider.displayName = 'ColorPickerSlider';
+
+ColorPickerSlider.propTypes = {
+	/**
+	 * Applies a disabled style and prevents interacting with the component.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @private
+	 */
+	disabled: PropTypes.bool,
+
+	/**
+	 * Indicates the selected color.
+	 *
+	 * @type {String}
+	 * @private
+	 */
+	selectedColor: PropTypes.string,
+
+	/**
+	 * Called when the selected color is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	selectedColorHandler: PropTypes.func,
+
+	/**
+	 * Set the type of color picker to use.
+	 *
+	 * @type {('RGB'|'HSL')}
+	 * @default 'RGB'
+	 * @private
+	 */
+	type: PropTypes.string
+};
+
+export {
+	ColorPickerSlider,
+	ColorPickerSliderHSL,
+	ColorPickerSliderRGB
+};
+export default ColorPickerSlider;
diff --git a/ColorPicker/ColorPickerSlider.module.less b/ColorPicker/ColorPickerSlider.module.less
new file mode 100644
index 0000000000..3f6f7af06f
--- /dev/null
+++ b/ColorPicker/ColorPickerSlider.module.less
@@ -0,0 +1,78 @@
+// ColorPickerSlider.module.less
+//
+@import "../styles/colors.less";
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
+
+.sliderPickerContainer {
+	.pickerSelect {
+		margin: 0;
+		height: @sand-colorpicker-dropdown-height;
+		width: @sand-colorpicker-input-width;
+
+		[role*=button] {
+			height: @sand-colorpicker-dropdown-height;
+		}
+	}
+
+	.hexInput {
+		width: @sand-colorpicker-input-width;
+
+		input {
+			width: calc(@sand-colorpicker-input-width - @sand-colorpicker-margin-large);
+		}
+	}
+
+	.slidersContainer {
+		margin: @sand-colorpicker-margin-medium 0 0 @sand-colorpicker-margin-large;
+
+		.labelText {
+			font-size: @sand-colorpicker-slider-label-font-size;
+			margin: @sand-colorpicker-margin-small 0;
+		}
+
+		.sliderRow {
+			justify-content: space-between;
+
+			.sliderCell {
+				border-radius: @sand-colorpicker-circle-border-radius;
+			}
+
+			.slider {
+				--sand-progress-bg-color-opacity: 0;
+				border-radius: @sand-colorpicker-circle-border-radius;
+				margin: 0 @sand-colorpicker-margin-medium;
+				height: @sand-colorpicker-slider-height;
+
+				.focus({
+					.knob {
+						transform: scale(1.1);
+
+						&::before {
+							background-color: var(--sand-progress-slider-color);
+						}
+					}
+				});
+
+				.knob {
+					&::before {
+						--sand-slider-disabled-knob-bg-color: var(--sand-progress-slider-color);
+						border-radius: @sand-colorpicker-circle-border-radius;
+						height: @sand-colorpicker-slider-knob-size;
+						width: @sand-colorpicker-slider-knob-size;
+					}
+				}
+			}
+
+			.outputText {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background-color: @sand-colorpicker-output-bg-color;
+				color: @sand-colorpicker-output-color;
+				border-radius: @sand-colorpicker-output-border-radius;
+				margin-left: @sand-colorpicker-margin-large;
+			}
+		}
+	}
+}
diff --git a/ColorPicker/ColorPickerSpectrum.js b/ColorPicker/ColorPickerSpectrum.js
new file mode 100644
index 0000000000..c62cc832c3
--- /dev/null
+++ b/ColorPicker/ColorPickerSpectrum.js
@@ -0,0 +1,199 @@
+/**
+ * Sandstone component that allows the user to choose a color from a spectrum.
+ *
+ * @example
+ * <ColorPickerSpectrum
+ *	 selectedColor="#FF00FF"
+ *	 selectedColorHandler={setSelectedColor}
+ * />
+ *
+ * @exports ColorPickerSpectrum
+ * @private
+ */
+import ri from '@enact/ui/resolution';
+import PropTypes from 'prop-types';
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+import SpectrumIndicator from './SpectrumIndicator';
+import {getHexColorFromGradient} from './utils';
+
+import css from './ColorPickerSpectrum.module.less';
+
+/**
+ * A color picker component, ready to use in Sandstone applications.
+ *
+ * @class ColorPickerSpectrum
+ * @memberof sandstone/ColorPicker
+ * @ui
+ * @private
+ */
+const ColorPickerSpectrum = (props) => {
+	const {disabled, selectedColor, selectedColorHandler} = props;
+	const canvasRef = useRef(null);
+	const [canvasHeight, setCanvasHeight] = useState(ri.scale(660));
+	const [canvasWidth, setCanvasWidth] = useState(ri.scale(800));
+	const [indicatorBgColor, setIndicatorBgColor] = useState('transparent');
+	const [indicatorX, setIndicatorX] = useState(0);
+	const [indicatorY, setIndicatorY] = useState(0);
+	const [isDragging, setIsDragging] = useState(false);
+	const [isIndicatorActive, setIsIndicatorActive] = useState(false);
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		const ctx = canvas.getContext('2d', {willReadFrequently: true});
+		// `willReadFrequently: true` parameter permits the browser to optimize for frequent getImageData() calls by avoiding hardware acceleration
+
+		const createColorGradient = (canvasElement, context) => {
+			for (let i = 0; i < canvasElement.width; i++) {
+				const luminosity = 1 - (i / canvasElement.width); // Max luminosity on the left, min luminosity on the right
+				const gradient = context.createLinearGradient(0, 0, 0, canvasElement.height);
+				gradient.addColorStop(0, `hsl(0, 100%, ${luminosity * 100}%)`); // Red
+				gradient.addColorStop(1 / 6, `hsl(30, 100%, ${luminosity * 100}%)`); // Orange
+				gradient.addColorStop(2 / 6, `hsl(60, 100%, ${luminosity * 100}%)`); // Yellow
+				gradient.addColorStop(3 / 6, `hsl(120, 100%, ${luminosity * 100}%)`); // Green
+				gradient.addColorStop(4 / 6, `hsl(180, 100%, ${luminosity * 100}%)`); // Blue
+				gradient.addColorStop(5 / 6, `hsl(240, 100%, ${luminosity * 100}%)`); // Indigo
+				gradient.addColorStop(1, `hsl(269, 100%, ${luminosity * 100}%)`); // Violet
+				context.fillStyle = gradient;
+				context.fillRect(i, 0, 1, canvasElement.height);
+			}
+		};
+		createColorGradient(canvas, ctx);
+
+		// Position the indicator on the canvas based on the selected color
+		const positionIndicator = () => {
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+			for (let x = 0; x < canvas.width; x++) {
+				for (let y = 0; y < canvas.height; y++) {
+					const pixelIndex = (y * canvas.width * 4) + (x * 4);
+					// Ensure pixelIndex is within bounds
+					if (pixelIndex < imageData.data.length - 4) {
+						const pixelColor = `#${imageData.data[pixelIndex].toString(16).padStart(2, '0')}${imageData.data[pixelIndex + 1].toString(16).padStart(2, '0')}${imageData.data[pixelIndex + 2].toString(16).padStart(2, '0')}`;
+						if (pixelColor === selectedColor) {
+							setIndicatorX(x);
+							setIndicatorY(y);
+							return;
+						}
+					}
+				}
+			}
+			// If the color is not found, position the indicator at the origin (0, 0) of the canvas
+			setIndicatorX(0);
+			setIndicatorY(0);
+		};
+		positionIndicator();
+
+		const handleResize = () => {
+			setCanvasHeight(canvas.parentElement.clientHeight);
+			setCanvasWidth(canvas.parentElement.clientWidth);
+		};
+
+		window.addEventListener('resize', handleResize);
+		handleResize();
+	}, [canvasHeight, canvasWidth]); // eslint-disable-line react-hooks/exhaustive-deps
+
+	const handleCanvasPointerDown = useCallback((e) => {
+		if (disabled) return;
+		const canvas = canvasRef.current;
+		const rect = canvas.getBoundingClientRect();
+		let x = e.clientX - rect.left;
+		let y = e.clientY - rect.top;
+
+		setIndicatorX(x);
+		setIndicatorY(y);
+		setIsDragging(true);
+
+		const hexColor = getHexColorFromGradient(canvasRef, indicatorX, indicatorY);
+		setIndicatorBgColor(hexColor);
+		setIsIndicatorActive(false);
+	}, [canvasRef, disabled, indicatorX, indicatorY, setIndicatorX, setIndicatorY, setIsDragging]);
+
+	const handleCanvasPointerLeave = useCallback(() => {
+		setIsDragging(false);
+
+		const hexColor = getHexColorFromGradient(canvasRef, indicatorX, indicatorY);
+		selectedColorHandler(hexColor);
+		setIndicatorBgColor(hexColor);
+	}, [canvasRef, indicatorX, indicatorY, setIsDragging, selectedColorHandler]);
+
+	const handleCanvasPointerMove = useCallback((e) => {
+		if (isDragging) {
+			const canvas = canvasRef.current;
+			const rect = canvas.getBoundingClientRect();
+			let x = e.clientX - rect.left;
+			let y = e.clientY - rect.top;
+
+			setIndicatorX(x);
+			setIndicatorY(y);
+
+			const hexColor = getHexColorFromGradient(canvasRef, indicatorX, indicatorY);
+			setIndicatorBgColor(hexColor);
+		}
+	}, [canvasRef, indicatorX, indicatorY, isDragging]);
+
+	const handleCanvasPointerUp = useCallback(() => {
+		const hexColor = getHexColorFromGradient(canvasRef, indicatorX, indicatorY);
+		selectedColorHandler(hexColor);
+		setIndicatorBgColor(hexColor);
+		setIsDragging(false);
+	}, [canvasRef, indicatorX, indicatorY, setIsDragging, selectedColorHandler]);
+
+	return (
+		<div className={css.colorPicker}>
+			<canvas
+				className={css.gradientCanvas}
+				height={canvasHeight}
+				onPointerDown={handleCanvasPointerDown}
+				onPointerLeave={handleCanvasPointerLeave}
+				onPointerMove={handleCanvasPointerMove}
+				onPointerUp={handleCanvasPointerUp}
+				ref={canvasRef}
+				width={canvasWidth}
+			/>
+			<SpectrumIndicator
+				bgColor={indicatorBgColor}
+				canvasRef={canvasRef}
+				disabled={disabled}
+				isIndicatorActive={isIndicatorActive}
+				selectedColorHandler={selectedColorHandler}
+				setIsIndicatorActive={setIsIndicatorActive}
+				setIndicatorBgColor={setIndicatorBgColor}
+				setX={setIndicatorX}
+				setY={setIndicatorY}
+				x={indicatorX}
+				y={indicatorY}
+			/>
+		</div>
+	);
+};
+
+ColorPickerSpectrum.displayName = 'ColorPickerSpectrum';
+
+ColorPickerSpectrum.propTypes = {
+	/**
+	 * Applies a disabled style and prevents interacting with the component.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @private
+	 */
+	disabled: PropTypes.bool,
+
+	/**
+	 * Indicates the selected color.
+	 *
+	 * @type {String}
+	 * @private
+	 */
+	selectedColor: PropTypes.string,
+
+	/**
+	 * Called when the selected color is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	selectedColorHandler: PropTypes.func
+};
+
+export default ColorPickerSpectrum;
diff --git a/ColorPicker/ColorPickerSpectrum.module.less b/ColorPicker/ColorPickerSpectrum.module.less
new file mode 100644
index 0000000000..9d637a5429
--- /dev/null
+++ b/ColorPicker/ColorPickerSpectrum.module.less
@@ -0,0 +1,28 @@
+// ColorPickerSpectrum.module.less
+//
+@import "../styles/colors.less";
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
+
+.colorPicker {
+	position: relative;
+
+	.gradientCanvas {
+		height: 100%;
+		width: 100%;
+		touch-action: none;
+	}
+
+	.circleIndicator {
+		position: absolute;
+		width: @sand-colorpicker-spectrum-circleindicator-size;
+		height: @sand-colorpicker-spectrum-circleindicator-size;
+		border: @sand-colorpicker-border-small solid @sand-colorpicker-spectrum-circleindicator-color;
+		border-radius: @sand-colorpicker-circle-border-radius;
+		pointer-events: none;
+
+		.focus({
+			border: @sand-colorpicker-border-medium solid @sand-colorpicker-spectrum-circleindicator-focus-color;
+		})
+	}
+}
diff --git a/ColorPicker/SpectrumIndicator.js b/ColorPicker/SpectrumIndicator.js
new file mode 100644
index 0000000000..96819137bd
--- /dev/null
+++ b/ColorPicker/SpectrumIndicator.js
@@ -0,0 +1,226 @@
+import {is} from '@enact/core/keymap';
+import spotlight from '@enact/spotlight';
+import Spottable from '@enact/spotlight/Spottable';
+import PropTypes from 'prop-types';
+import {useCallback, useEffect, useState} from 'react';
+
+import {getHexColorFromGradient} from './utils';
+
+import css from './ColorPickerSpectrum.module.less';
+
+const SpottableDiv = Spottable('div');
+
+/**
+ * The circle indicator component used in spectrum color picker.
+ *
+ * @class CircleIndicator
+ * @memberof sandstone/ColorPicker
+ * @ui
+ * @private
+ */
+const CircleIndicator = ({bgColor, canvasRef, disabled, isIndicatorActive, selectedColorHandler, setIsIndicatorActive, setIndicatorBgColor, setX, setY, x, y}) => {
+	const [holding, setHolding] = useState(false);
+	const [prevKey, setPrevKey] = useState('');
+	const [stepValue, setStepValue] = useState(1);
+
+	// resume spotlight when indicator is not active
+	useEffect(() => {
+		if (!isIndicatorActive) {
+			spotlight.resume();
+		}
+	}, [isIndicatorActive]);
+
+	const handleOnKeyDown = useCallback(({keyCode}) => {
+		if (disabled) return;
+		if (is('enter', keyCode)) { // set indicator in active state and pause spotlight so no other containers get focus when selecting a color with 5-way
+			setIsIndicatorActive(!isIndicatorActive);
+			spotlight.pause();
+		} else if (is('down', keyCode)) {
+			const hexColor = getHexColorFromGradient(canvasRef, x, y);
+			setIndicatorBgColor(hexColor);
+		} else if (is('up', keyCode)) {
+			const hexColor = getHexColorFromGradient(canvasRef, x, y);
+			setIndicatorBgColor(hexColor);
+		} else if (is('left', keyCode)) {
+			const hexColor = getHexColorFromGradient(canvasRef, x, y);
+			setIndicatorBgColor(hexColor);
+		} else if (is('right', keyCode)) {
+			const hexColor = getHexColorFromGradient(canvasRef, x, y);
+			setIndicatorBgColor(hexColor);
+		}
+
+		if (isIndicatorActive) {
+			if (holding) {
+				if (prevKey === keyCode) {
+					if (stepValue < 10) {
+						setStepValue(prevValue => prevValue + 1);
+					}
+				} else {
+					setStepValue(1);
+				}
+			} else {
+				setHolding(true);
+				setPrevKey(keyCode);
+			}
+		}
+	}, [canvasRef, disabled, holding, isIndicatorActive, prevKey, setIndicatorBgColor, setIsIndicatorActive, stepValue, x, y]);
+
+	const handleOnKeyUp = useCallback(({keyCode}) => {
+		if (is('down', keyCode)) {
+			const hexColor = getHexColorFromGradient(canvasRef, x, y);
+			selectedColorHandler(hexColor);
+		} else if (is('up', keyCode)) {
+			const hexColor = getHexColorFromGradient(canvasRef, x, y);
+			selectedColorHandler(hexColor);
+		} else if (is('left', keyCode)) {
+			const hexColor = getHexColorFromGradient(canvasRef, x, y);
+			selectedColorHandler(hexColor);
+		} else if (is('right', keyCode)) {
+			const hexColor = getHexColorFromGradient(canvasRef, x, y);
+			selectedColorHandler(hexColor);
+		}
+
+		setHolding(false);
+		setPrevKey('');
+		setStepValue(1);
+	}, [canvasRef, selectedColorHandler, x, y]);
+
+	const handleSpotlightDown = useCallback(() => {
+		if (isIndicatorActive && y + stepValue <= canvasRef.current.clientHeight - 1) {
+			setY(y + stepValue);
+		}
+	}, [canvasRef, isIndicatorActive, setY, stepValue, y]);
+
+	const handleSpotlightLeft = useCallback(() => {
+		if (isIndicatorActive && x - stepValue >= 0) {
+			setX(x - stepValue);
+		}
+	}, [isIndicatorActive, setX, stepValue, x]);
+
+	const handleSpotlightRight = useCallback(() => {
+		if (isIndicatorActive && x + stepValue <= canvasRef.current.clientWidth) {
+			setX(x + stepValue);
+		}
+	}, [canvasRef, isIndicatorActive, setX, stepValue, x]);
+
+	const handleSpotlightUp = useCallback(() => {
+		if (isIndicatorActive && y - stepValue >= 0) {
+			setY(y - stepValue);
+		}
+	}, [isIndicatorActive, setY, stepValue, y]);
+
+	return (
+		<SpottableDiv
+			className={css.circleIndicator}
+			onKeyDown={handleOnKeyDown}
+			onKeyUp={handleOnKeyUp}
+			onSpotlightDown={handleSpotlightDown}
+			onSpotlightLeft={handleSpotlightLeft}
+			onSpotlightRight={handleSpotlightRight}
+			onSpotlightUp={handleSpotlightUp}
+			spotlightDisabled={disabled}
+			style={{
+				left: x - 11,
+				top: y - 11,
+				backgroundColor: bgColor,
+				transform: isIndicatorActive ? 'scale(1.2)' : null
+			}}
+		/>
+	);
+};
+
+CircleIndicator.displayName = 'CircleIndicator';
+
+CircleIndicator.propTypes = {
+	/**
+	 * Indicates the background color of the circle indicator.
+	 *
+	 * @type {String}
+	 * @private
+	 */
+	bgColor: PropTypes.string,
+
+	/**
+	 * The canvas reference from the parent component.
+	 * Used to extract HEX color from canvas.
+	 *
+	 * @type {Node}
+	 * @private
+	 */
+	canvasRef: PropTypes.any,
+
+	/**
+	 * Applies a disabled style and prevents interacting with the component.
+	 *
+	 * @type {Boolean}
+	 * @default false
+	 * @private
+	 */
+	disabled: PropTypes.bool,
+
+	/**
+	 * Indicates whether the circle indicator is active.
+	 *
+	 * @type {Boolean}
+	 * @private
+	 */
+	isIndicatorActive: PropTypes.bool,
+
+	/**
+	 * Called when the selected color is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	selectedColorHandler: PropTypes.func,
+
+	/**
+	 * Called when bgColor is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	setIndicatorBgColor: PropTypes.func,
+
+	/**
+	 * Called when indicator active status is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	setIsIndicatorActive: PropTypes.func,
+
+	/**
+	 * Called when x coordinate of the indicator is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	setX: PropTypes.func,
+
+	/**
+	 * Called when y coordinate of the indicator is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	setY: PropTypes.func,
+
+	/**
+	 * Indicator's x-axis coordinate relative to the canvas.
+	 *
+	 * @type {Number}
+	 * @private
+	 */
+	x: PropTypes.number,
+
+	/**
+	 * Indicator's y-axis coordinate relative to the canvas.
+	 *
+	 * @type {Number}
+	 * @private
+	 */
+	y: PropTypes.number
+};
+
+export default CircleIndicator;
diff --git a/ColorPicker/package.json b/ColorPicker/package.json
index bdf7e58c76..0c84dc1380 100644
--- a/ColorPicker/package.json
+++ b/ColorPicker/package.json
@@ -1,3 +1,3 @@
 {
-	"main": "ColorPicker.js"
+  "main": "ColorPicker.js"
 }
diff --git a/ColorPicker/tests/ColorPicker-specs.js b/ColorPicker/tests/ColorPicker-specs.js
index 08a24f0c75..86fbb9cc45 100644
--- a/ColorPicker/tests/ColorPicker-specs.js
+++ b/ColorPicker/tests/ColorPicker-specs.js
@@ -1,231 +1,575 @@
 import {FloatingLayerDecorator} from '@enact/ui/FloatingLayer';
 import '@testing-library/jest-dom';
-import {fireEvent, render, screen} from '@testing-library/react';
+import {act, fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import ColorPicker from '../ColorPicker';
-import {hexToHSL, HSLToHex} from "../utils";
+import ColorPicker, {FavoriteColors}  from '../ColorPicker';
+import GridColorPicker from '../ColorPickerGrid';
+import SliderColorPicker from '../ColorPickerSlider';
+import SpectrumColorPicker from '../ColorPickerSpectrum';
+import {hexToHSL, hslToHex} from '../utils';
 
 const FloatingLayerController = FloatingLayerDecorator('div');
 
-const changeSliderValueByKey = async (element, steps, decrease) => {
-	const keyCode = decrease ? 37 : 39;
-
-	await fireEvent.mouseOver(element);
-
-	for (let i = 0; i < steps; i++) {
-		await fireEvent.keyDown(element, {keyCode: keyCode});
-	}
-};
-
-const sliderValues = (elements) => {
-	const values = [];
-
-	elements.forEach(element => {
-		values.push(element.getAttribute('aria-valuetext'));
-	});
-
-	return values;
-};
-
 describe('ColorPicker', () => {
 	afterEach(() => {
 		jest.clearAllMocks();
 	});
 
-	test('should open and close ColorPicker popup', async () => {
-		const closeButtonText = '󯿵';
-		const user = userEvent.setup();
+	const colors = ['#eb4034', '#32a852', '#3455eb'];
 
-		render(
+	test('should render a Grid Color Picker at first render when type="grid"', () => {
+		const onChangeColorHandler = jest.fn();
+		const {container} = render(
 			<FloatingLayerController>
-				<ColorPicker />
+				<ColorPicker
+					color={colors[0]}
+					colors={colors}
+					onChangeColor={onChangeColorHandler}
+					open
+					type="grid"
+				/>
 			</FloatingLayerController>
 		);
+		const colorPicker = container.querySelector('.colorPicker'); // eslint-disable-line testing-library/no-container
+		const colorBlocks = container.querySelectorAll('.colorBlock'); // eslint-disable-line testing-library/no-container
 
-		const colorPickerButton = screen.getByRole('button');
-		await user.click(colorPickerButton);
-		const closeButton = screen.queryByText(closeButtonText);
-
-		expect(closeButton).not.toBeNull();
-
-		await user.click(closeButton);
-
-		expect(screen.queryByText(closeButtonText)).toBeNull();
+		expect(colorPicker).toBeInTheDocument();
+		expect(colorBlocks[0]).toBeInTheDocument();
 	});
 
-	test('should not open ColorPicker popup if disabled is set to true', async () => {
-		const closeButtonText = '󯿵';
+	test('should render a Grid Color Picker when clicking on "Grid" tab', async () => {
 		const user = userEvent.setup();
-
-		render(
+		const onChangeColorHandler = jest.fn();
+		const {container} = render(
 			<FloatingLayerController>
-				<ColorPicker disabled />
+				<ColorPicker
+					color={colors[0]}
+					colors={colors}
+					onChangeColor={onChangeColorHandler}
+					open
+					type="sliders"
+				/>
 			</FloatingLayerController>
 		);
+		const gridTab = screen.getByText('Grid');
 
-		const colorPickerButton = screen.getByRole('button');
-		await user.click(colorPickerButton);
+		await user.click(gridTab);
 
-		const closeButton = screen.queryByText(closeButtonText);
+		const colorPicker = container.querySelector('.colorPicker'); // eslint-disable-line testing-library/no-container
+		const colorBlocks = container.querySelectorAll('.colorBlock'); // eslint-disable-line testing-library/no-container
 
-		expect(closeButton).toBeNull();
+		expect(colorPicker).toBeInTheDocument();
+		expect(colorBlocks[0]).toBeInTheDocument();
 	});
 
-	test('should have the text set', async () => {
-		const text = 'Color Picker';
-		const user = userEvent.setup();
+	test('should render a Sliders Color Picker at first render when type="sliders"', () => {
+		const onChangeColorHandler = jest.fn();
+		const {container} = render(
+			<FloatingLayerController>
+				<ColorPicker
+					color={colors[0]}
+					colors={colors}
+					onChangeColor={onChangeColorHandler}
+					open
+					type="sliders"
+				/>
+			</FloatingLayerController>
+		);
+		const colorPicker = container.querySelector('.colorPicker'); // eslint-disable-line testing-library/no-container
+		const sliders = screen.getAllByRole('slider');
+		const [red, green, blue] = sliders;
+
+		expect(colorPicker).toBeInTheDocument();
+		expect(red).toBeInTheDocument();
+		expect(green).toBeInTheDocument();
+		expect(blue).toBeInTheDocument();
+	});
 
+	test('should render a Sliders Color Picker when clicking on "Sliders" tab', async () => {
+		const user = userEvent.setup();
+		const onChangeColorHandler = jest.fn();
 		render(
 			<FloatingLayerController>
-				<ColorPicker text={text} />
+				<ColorPicker
+					color={colors[0]}
+					colors={colors}
+					onChangeColor={onChangeColorHandler}
+					open
+					type="grid"
+				/>
 			</FloatingLayerController>
 		);
+		const sliderTab = screen.getByText('Sliders');
 
-		const colorPickerText = screen.queryByText(text);
+		await user.click(sliderTab);
 
-		expect(colorPickerText).not.toBeNull();
+		const sliders = screen.getAllByRole('slider');
+		const [red, green, blue] = sliders;
 
-		await user.click(colorPickerText);
-		const popupText = screen.queryAllByText(text)[1];
+		expect(red).toBeInTheDocument();
+		expect(green).toBeInTheDocument();
+		expect(blue).toBeInTheDocument();
 
-		expect(popupText).not.toBeUndefined();
 	});
 
-	test('should have the color set', async () => {
-		const color = '#00FF00';
+	describe('Favorite Colors', () => {
+		test('should render favorite colors and a selected color containers', () => {
+			const favoriteColorsHandler = jest.fn();
+			const selectedColorHandler = jest.fn();
+			const {container} = render(
+				<FavoriteColors
+					favoriteColors={colors}
+					favoriteColorsHandler={favoriteColorsHandler}
+					selectedColor={colors[0]}
+					selectedColorHandler={selectedColorHandler}
+				/>
+			);
+			const favoriteColors = container.querySelectorAll('.favoriteColor'); // eslint-disable-line testing-library/no-container
+			const selectedColor = container.querySelector('.selectedColorContainer'); // eslint-disable-line testing-library/no-container
+
+			expect(favoriteColors[0]).toBeInTheDocument();
+			expect(selectedColor).toBeInTheDocument();
+		});
+
+		test('should update selectedColor when selecting a color', async () => {
+			const onChangeColorHandler = jest.fn();
+			const user = userEvent.setup();
+			const {container} = render(
+				<FloatingLayerController>
+					<ColorPicker
+						color={colors[0]}
+						colors={colors}
+						onChangeColor={onChangeColorHandler}
+						open
+						type="grid"
+					/>
+				</FloatingLayerController>
+			);
+			const colorsColumnDiv = container.querySelectorAll('.colorPicker'); // eslint-disable-line testing-library/no-container
+			const secondColorBlock = colorsColumnDiv[0].querySelectorAll('.colorBlock')[1];
+			const selectedColor = container.querySelector('.selectedColor'); // eslint-disable-line testing-library/no-container
+
+			await user.click(secondColorBlock);
+
+			expect(secondColorBlock).toHaveStyle({backgroundColor: 'rgb(0, 55, 74)'});
+			expect(selectedColor).toHaveStyle({backgroundColor: 'rgb(0, 55, 74)'});
+		});
 
-		render(
-			<FloatingLayerController>
-				<ColorPicker color={color} />
-			</FloatingLayerController>
-		);
+		test('should update favorite colors after clicking a color from the color picker', async () => {
+			const onChangeColorHandler = jest.fn();
+			const user = userEvent.setup();
+			const {container} = render(
+				<FloatingLayerController>
+					<ColorPicker
+						color={colors[0]}
+						colors={colors}
+						onChangeColor={onChangeColorHandler}
+						open
+					/>
+				</FloatingLayerController>
+			);
+			const colorsColumnDiv = container.querySelectorAll('.colorPicker'); // eslint-disable-line testing-library/no-container
+			const secondColorBlock = colorsColumnDiv[0].querySelectorAll('.colorBlock')[1];
+			const selectedColor = container.querySelector('.selectedColor'); // eslint-disable-line testing-library/no-container
+
+			await user.click(secondColorBlock);
+			await user.click(selectedColor);
+
+			const favoriteColors = screen.getAllByRole('button');
+
+			expect(secondColorBlock).toHaveStyle({backgroundColor: 'rgb(0, 55, 74)'});
+			expect(selectedColor).toHaveStyle({backgroundColor: 'rgb(0, 55, 74)'});
+			// last added favorite color should have the same background color
+			expect(favoriteColors[3]).toHaveStyle({backgroundColor: 'rgb(0, 55, 74)'});
 
-		const expected = `background-image: ${color}`;
-		const colorPickerButton = screen.getByRole('button');
+		});
 
-		expect(colorPickerButton).toHaveStyle(expected);
-	});
+		test('should not update favoriteColors when ColorPicker is disabled', async () => {
+			const onChangeColorHandler = jest.fn();
+			const user = userEvent.setup();
+			const {container} = render(
+				<FloatingLayerController>
+					<ColorPicker
+						color={colors[0]}
+						colors={colors}
+						disabled
+						onChangeColor={onChangeColorHandler}
+						open
+					/>
+				</FloatingLayerController>
+			);
+			const colorsColumnDiv = container.querySelectorAll('.colorPicker'); // eslint-disable-line testing-library/no-container
+			const secondColorBlock = colorsColumnDiv[0].querySelectorAll('.colorBlock')[1];
+			const selectedColor = container.querySelector('.selectedColor'); // eslint-disable-line testing-library/no-container
+			const favoriteColorsContainer = screen.getAllByRole('button');
+
+			await user.click(secondColorBlock);
+			await user.click(selectedColor);
+
+			expect(onChangeColorHandler).not.toHaveBeenCalled();
+			// check if three favorite colors blocks and one selected color block is rendered
+			expect(favoriteColorsContainer[0]).toBeInTheDocument();
+			expect(favoriteColorsContainer[1]).toBeInTheDocument();
+			expect(favoriteColorsContainer[2]).toBeInTheDocument();
+			expect(favoriteColorsContainer[3]).toBeInTheDocument();
+			expect(favoriteColorsContainer[4]).toBe(undefined); // eslint-disable-line no-undefined
+		});
 
-	test('should have the presetColors', async () => {
-		const presetColors = ['#FF0000', '#00FF00', '#0000FF'];
-		const presetColorsRGB = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'];
-		const user = userEvent.setup();
+		test('should update selectedColor after clicking a favorite color', async () => {
+			const onChangeColorHandler = jest.fn();
+			const user = userEvent.setup();
+			render(
+				<FloatingLayerController>
+					<ColorPicker
+						color={colors[0]}
+						colors={colors}
+						disabled
+						onChangeColor={onChangeColorHandler}
+						open
+					/>
+				</FloatingLayerController>
+			);
+			const favoriteColorsContainer = screen.getAllByRole('button');
+			const firstFavoriteColor = favoriteColorsContainer[0];
+
+			user.click(firstFavoriteColor);
+			const selectedColorButton = favoriteColorsContainer[3];
+
+			expect(firstFavoriteColor).toHaveStyle({backgroundColor: 'rgb(235, 64, 52)'});
+			expect(selectedColorButton).toHaveStyle({backgroundColor: 'rgb(235, 64, 52)'});
+		});
 
-		render(
-			<FloatingLayerController>
-				<ColorPicker presetColors={presetColors} />
-			</FloatingLayerController>
-		);
+		test('should render a "trash" icon after long click on a favorite color block', async () => {
+			const onChangeColorHandler = jest.fn();
+			const user = userEvent.setup();
+			render(
+				<FloatingLayerController>
+					<ColorPicker
+						color={colors[0]}
+						colors={colors}
+						onChangeColor={onChangeColorHandler}
+						open
+					/>
+				</FloatingLayerController>
+			);
+			const favoriteColors = screen.getAllByRole('button');
+			const firstFavoriteColor = favoriteColors[0];
+
+			await act(async () => {
+				// Simulate long press
+				await user.pointer({
+					keys: "[MouseLeft>]",
+					target: firstFavoriteColor
+				});
+				// Wait for 1 second to simulate the duration of the long press
+				await new Promise((resolve) => setTimeout(resolve, 1000));
+			});
+
+			const expected = 983077; // decimal converted charCode of Unicode 'trash' character
+
+			expect(firstFavoriteColor.textContent.codePointAt()).toBe(expected);
+		});
+	});
 
-		const colorPickerButton = screen.getByRole('button');
-		await user.click(colorPickerButton);
+	describe('Grid ColorPicker', () => {
+		test('should render Grid Color Picker', () => {
+			const {container} = render(<GridColorPicker />);
+			const colorPicker = container.querySelector('.colorPicker'); // eslint-disable-line testing-library/no-container
 
-		const buttons = screen.getAllByRole('button');
-		const buttonsWithSpecificStyle = buttons.filter(element => {
-			const compoundStyle = window.getComputedStyle(element);
-			return presetColorsRGB.find(color => color === compoundStyle.getPropertyValue('background-color'));
+			expect(colorPicker).toBeInTheDocument();
 		});
 
-		expect(buttonsWithSpecificStyle.length).toEqual(presetColors.length);
+		test('should emit a selectedColorHandler event when selecting a color from the grid', async () => {
+			const onClickHandler = jest.fn();
+			const selectedColorHandler = jest.fn();
+			const user = userEvent.setup();
+			const {container} = render(
+				<GridColorPicker onClick={onClickHandler} selectedColorHandler={selectedColorHandler} />
+			);
+			const colorsColumnDiv = container.querySelectorAll('.colorPicker'); // eslint-disable-line testing-library/no-container
+			const secondColorBlock = colorsColumnDiv[0].querySelectorAll('.colorBlock')[1];
+
+			await user.click(secondColorBlock);
+			expect(onClickHandler).toHaveBeenCalled();
+			expect(selectedColorHandler).toHaveBeenCalled();
+		});
 	});
 
-	test('should emit an colorHandler event when select color from presetColors', async () => {
-		const color = '#FFFFFF';
-		const colorHandler = jest.fn();
-		const presetColors = ['#FF0000'];
-		const user = userEvent.setup();
+	describe('Spectrum ColorPicker', () => {
+		beforeEach(() => {
+			// Create a mock canvas element
+			const mockCanvas = document.createElement('canvas');
+			// Set dimensions if necessary
+			mockCanvas.width = 800;
+			mockCanvas.height = 600;
+
+			// Create a mock context
+			const mockContext = {
+				createLinearGradient: jest.fn(() => ({
+					addColorStop: jest.fn()
+				})),
+				fillRect: jest.fn(),
+				getImageData: jest.fn(() => ({
+					data: new Uint8ClampedArray(800 * 600 * 4) // Mock image data
+				}))
+			};
+
+			// Mock the getContext method to return the mock context
+			global.HTMLCanvasElement.prototype.getContext = jest.fn(() => mockContext);
+		});
 
-		render(
-			<FloatingLayerController>
-				<ColorPicker color={color} colorHandler={colorHandler} presetColors={presetColors} />
-			</FloatingLayerController>
-		);
+		test('should render a Spectrum Color Picker at first render when type="spectrum"', () => {
+			const onChangeColorHandler = jest.fn();
+			const {container} = render(
+				<FloatingLayerController>
+					<ColorPicker
+						color={colors[0]}
+						colors={colors}
+						onChangeColor={onChangeColorHandler}
+						open
+						type="spectrum"
+					/>
+				</FloatingLayerController>
+			);
+			const colorPicker = container.querySelector('.colorPicker'); // eslint-disable-line testing-library/no-container
+			const canvas = container.querySelector('.gradientCanvas'); // eslint-disable-line testing-library/no-container
+
+			expect(colorPicker).toBeInTheDocument();
+			expect(canvas).toBeInTheDocument();
+		});
+
+		test('should render a Spectrum Color Picker when clicking on "Spectrum" tab', async () => {
+			const user = userEvent.setup();
+			const onChangeColorHandler = jest.fn();
+			const {container} = render(
+				<FloatingLayerController>
+					<ColorPicker
+						color={colors[0]}
+						colors={colors}
+						onChangeColor={onChangeColorHandler}
+						open
+						type="grid"
+					/>
+				</FloatingLayerController>
+			);
+			const spectrumTab = screen.getByText('Spectrum');
+
+			await user.click(spectrumTab);
+
+			const colorPicker = container.querySelector('.colorPicker'); // eslint-disable-line testing-library/no-container
+			const canvas = container.querySelector('.gradientCanvas'); // eslint-disable-line testing-library/no-container
+
+			expect(colorPicker).toBeInTheDocument();
+			expect(canvas).toBeInTheDocument();
+		});
+
+		test('should render Spectrum Color Picker', () => {
+			const color = "#eb4034";
+			const {container} = render(<SpectrumColorPicker selectedColor={color} />);
+			const canvas = container.querySelector('.gradientCanvas'); // eslint-disable-line testing-library/no-container
+
+			expect(canvas).toBeInTheDocument();
+		});
 
-		const colorPickerButton = screen.getByRole('button');
-		await user.click(colorPickerButton);
+		it('should call selectedColorHandler when clicking the canvas', async () => {
+			const color = "#eb4034";
+			const selectedColorHandler = jest.fn();
+			const {container} = render(<SpectrumColorPicker selectedColor={color} selectedColorHandler={selectedColorHandler} />);
 
-		const button = screen.getAllByRole('button')[2];
-		Object.defineProperty(button, 'offsetParent', {value: {id: presetColors[0]}});
+			const canvas = container.querySelector('.gradientCanvas'); // eslint-disable-line testing-library/no-container
+			const user = userEvent.setup();
+			await user.click(canvas);
 
-		await user.click(button);
+			expect(selectedColorHandler).toHaveBeenCalled();
+		});
 
-		expect(colorHandler).toHaveBeenCalled();
+		test('should emit a selectedColorHandler event when changing indicator position with 5-way keys', async () => {
+			const color = "#eb4034";
+			const selectedColorHandler = jest.fn();
+			const {container} = render(<SpectrumColorPicker selectedColor={color} selectedColorHandler={selectedColorHandler} />);
+			const indicator = container.querySelector('.circleIndicator'); // eslint-disable-line testing-library/no-container
+
+			// await activate(indicator);
+			await fireEvent.keyDown(indicator, {keyCode: 39});
+			await fireEvent.keyUp(indicator, {keyCode: 39});
+			await fireEvent.keyDown(indicator, {keyCode: 40});
+			await fireEvent.keyUp(indicator, {keyCode: 40});
+			await fireEvent.keyDown(indicator, {keyCode: 37});
+			await fireEvent.keyUp(indicator, {keyCode: 37});
+			await fireEvent.keyDown(indicator, {keyCode: 38});
+			await fireEvent.keyUp(indicator, {keyCode: 38});
+
+			expect(selectedColorHandler).toHaveBeenCalled();
+		});
 	});
 
-	test('should change color when hue, saturation and lightness sliders values changed', async () => {
-		const color = '#00FF00';
-		const colorHandler = jest.fn();
-		const user = userEvent.setup();
+	describe('Slider ColorPicker', () => {
+		const activate = (slider) => fireEvent.keyUp(slider, {keyCode: 13});
+		const changeSliderValueByKey = async (element, steps, decrease) => {
+			const keyCode = decrease ? 37 : 39;
+			activate(element);
 
-		render(
-			<FloatingLayerController>
-				<ColorPicker color={color} colorHandler={colorHandler} />
-			</FloatingLayerController>
-		);
+			for (let i = 0; i < steps; i++) {
+				await fireEvent.keyDown(element, {keyCode: keyCode});
+			}
+		};
 
-		const colorPickerButton = screen.getByRole('button');
-		await user.click(colorPickerButton);
+		const sliderValues = (elements) => {
+			const values = [];
 
-		const sliders = screen.getAllByRole('slider');
+			elements.forEach(element => {
+				values.push(element.getAttribute('aria-valuetext'));
+			});
+
+			return values;
+		};
 
-		const [hue, saturation, lightness] = sliderValues(sliders);
+		test('should render an RGB Slider Color Picker', () => {
+			const color = "#eb4034";
+			render(<SliderColorPicker selectedColor={color} />);
+			const sliders = screen.getAllByRole('slider');
+			const [redSlider, greenSlider, blueSlider] = sliders;
 
-		await changeSliderValueByKey(sliders[0], 30);
-		fireEvent.blur(sliders[0]);
-		await changeSliderValueByKey(sliders[1], 30, true);
-		fireEvent.blur(sliders[1]);
-		await changeSliderValueByKey(sliders[2], 30, true);
-		fireEvent.blur(sliders[2]);
+			expect(redSlider).toBeInTheDocument();
+			expect(greenSlider).toBeInTheDocument();
+			expect(blueSlider).toBeInTheDocument();
+		});
 
-		const [changedHue, changedSaturation, changedLightness] = sliderValues(sliders);
+		test('should change the value of red/green/blue sliders', async () => {
+			const color = "#eb4034";
+			const selectedColorHandler = jest.fn();
 
-		expect(hue).not.toEqual(changedHue);
-		expect(saturation).not.toEqual(changedSaturation);
-		expect(lightness).not.toEqual(changedLightness);
-	});
+			render(<SliderColorPicker selectedColor={color} selectedColorHandler={selectedColorHandler} />);
+			const sliders = screen.getAllByRole('slider');
+			const [red, green, blue] = sliderValues(sliders);
+
+			await changeSliderValueByKey(sliders[0], 30);
+			fireEvent.blur(sliders[0]);
+			await changeSliderValueByKey(sliders[1], 30, true);
+			fireEvent.blur(sliders[1]);
+			await changeSliderValueByKey(sliders[2], 30, true);
+			fireEvent.blur(sliders[2]);
+
+			const [changedRed, changedGreen, changedBlue] = sliderValues(sliders);
+
+			expect(red).not.toEqual(changedRed);
+			expect(green).not.toEqual(changedGreen);
+			expect(blue).not.toEqual(changedBlue);
+		});
+
+		test('should emit a selectedColorHandler event when changing RGB sliders value', async () => {
+			const color = "#eb4034";
+			const selectedColorHandler = jest.fn();
+
+			render(<SliderColorPicker selectedColor={color} selectedColorHandler={selectedColorHandler} />);
+			const sliders = screen.getAllByRole('slider');
+
+			await changeSliderValueByKey(sliders[0], 30);
+			fireEvent.blur(sliders[0]);
+			expect(selectedColorHandler).toHaveBeenCalled();
 
-	// Utility functions
-	test('should return hsl from hex color if length is 4', () => {
-		const hexBlueColor = '#00F';
-		const hexGreenColor = '#0F0';
-		const hexPinkColor = '#F9A';
-		const hexRedColor = '#F00';
-
-		const hslBlueColor = hexToHSL(hexBlueColor);
-		const hslGreenColor = hexToHSL(hexGreenColor);
-		const hslPinkColor = hexToHSL(hexPinkColor);
-		const hslRedColor = hexToHSL(hexRedColor);
-
-		const expectedBlue = {h: 240, s: 100, l: 50};
-		const expectedGreen = {h: 120, s: 100, l: 50};
-		const expectedPink = {h: 350, s: 100, l: 80};
-		const expectedRed = {h: 0, s: 100, l: 50};
-
-		expect(hslBlueColor).toEqual(expectedBlue);
-		expect(hslGreenColor).toEqual(expectedGreen);
-		expect(hslPinkColor).toEqual(expectedPink);
-		expect(hslRedColor).toEqual(expectedRed);
+			await changeSliderValueByKey(sliders[1], 30, true);
+			fireEvent.blur(sliders[1]);
+			expect(selectedColorHandler).toHaveBeenCalled();
+
+			await changeSliderValueByKey(sliders[2], 30, true);
+			fireEvent.blur(sliders[2]);
+			expect(selectedColorHandler).toHaveBeenCalled();
+		});
+
+		test('should render an HSL Slider Color Picker', () => {
+			const color = "#eb4034";
+			render(<SliderColorPicker selectedColor={color} type="HSL" />);
+			const sliders = screen.getAllByRole('slider');
+			const [hue, saturation, lightness] = sliders;
+
+			expect(hue).toBeInTheDocument();
+			expect(saturation).toBeInTheDocument();
+			expect(lightness).toBeInTheDocument();
+		});
+
+		test('should change the value of hue/saturation/lightness sliders', async () => {
+			const color = "#eb4034";
+			const selectedColorHandler = jest.fn();
+
+			render(<SliderColorPicker selectedColor={color} selectedColorHandler={selectedColorHandler} type="HSL" />);
+			const sliders = screen.getAllByRole('slider');
+			const [hue, saturation, lightness] = sliderValues(sliders);
+
+			await changeSliderValueByKey(sliders[0], 30);
+			fireEvent.blur(sliders[0]);
+			await changeSliderValueByKey(sliders[1], 30, true);
+			fireEvent.blur(sliders[1]);
+			await changeSliderValueByKey(sliders[2], 30, true);
+			fireEvent.blur(sliders[2]);
+
+			const [changedHue, changedSaturation, changedLightness] = sliderValues(sliders);
+
+			expect(hue).not.toEqual(changedHue);
+			expect(saturation).not.toEqual(changedSaturation);
+			expect(lightness).not.toEqual(changedLightness);
+		});
+
+		test('should emit a selectedColorHandler event when changing HSL sliders value', async () => {
+			const color = "#eb4034";
+			const selectedColorHandler = jest.fn();
+
+			render(<SliderColorPicker selectedColor={color} selectedColorHandler={selectedColorHandler} type="HSL" />);
+			const sliders = screen.getAllByRole('slider');
+
+			await changeSliderValueByKey(sliders[0], 30);
+			fireEvent.blur(sliders[0]);
+			expect(selectedColorHandler).toHaveBeenCalled();
+
+			await changeSliderValueByKey(sliders[1], 30, true);
+			fireEvent.blur(sliders[1]);
+			expect(selectedColorHandler).toHaveBeenCalled();
+
+			await changeSliderValueByKey(sliders[2], 30, true);
+			fireEvent.blur(sliders[2]);
+			expect(selectedColorHandler).toHaveBeenCalled();
+		});
 	});
 
-	test('should return hex from hsl color', () => {
-		const hslAquaColor = HSLToHex(180, 100, 50);
-		const hslBlueColor = HSLToHex(240, 100, 50);
-		const hslFuchsiaColor = HSLToHex(300, 100, 50);
-		const hslRedColor = HSLToHex(0, 100, 50);
-		const hslYellowColor = HSLToHex(60, 100, 50);
-
-		const hexAquaColor = '#00ffff';
-		const hexBlueColor = '#0000ff';
-		const hexFuchsiaColor = '#ff00ff';
-		const hexRedColor = '#ff0000';
-		const hexYellowColor = '#ffff00';
-
-
-		expect(hslAquaColor).toEqual(hexAquaColor);
-		expect(hslBlueColor).toEqual(hexBlueColor);
-		expect(hslFuchsiaColor).toEqual(hexFuchsiaColor);
-		expect(hslRedColor).toEqual(hexRedColor);
-		expect(hslYellowColor).toEqual(hexYellowColor);
+	describe('utils', () => {
+		test('should return hsl from hex color', () => {
+			const hexBlueColor = '#0000FF';
+			const hexGreenColor = '#00FF00';
+			const hexRedColor = '#FF0000';
+
+			const hslBlueColor = hexToHSL(hexBlueColor);
+			const hslGreenColor = hexToHSL(hexGreenColor);
+			const hslRedColor = hexToHSL(hexRedColor);
+
+			const expectedBlue = {h: 240, s: 100, l: 50};
+			const expectedGreen = {h: 120, s: 100, l: 50};
+			const expectedRed = {h: 0, s: 100, l: 50};
+
+			expect(hslBlueColor).toEqual(expectedBlue);
+			expect(hslGreenColor).toEqual(expectedGreen);
+			expect(hslRedColor).toEqual(expectedRed);
+		});
+
+		test('should return hex from hsl color', () => {
+			const hslAquaColor = hslToHex({h: 180, s: 100, l: 50});
+			const hslBlueColor = hslToHex({h: 240, s: 100, l: 50});
+			const hslFuchsiaColor = hslToHex({h: 300, s: 100, l: 50});
+			const hslRedColor = hslToHex({h: 0, s: 100, l: 50});
+			const hslYellowColor = hslToHex({h: 60, s: 100, l: 50});
+
+			const hexAquaColor = '#00ffff';
+			const hexBlueColor = '#0000ff';
+			const hexFuchsiaColor = '#ff00ff';
+			const hexRedColor = '#ff0000';
+			const hexYellowColor = '#ffff00';
+
+
+			expect(hslAquaColor).toEqual(hexAquaColor);
+			expect(hslBlueColor).toEqual(hexBlueColor);
+			expect(hslFuchsiaColor).toEqual(hexFuchsiaColor);
+			expect(hslRedColor).toEqual(hexRedColor);
+			expect(hslYellowColor).toEqual(hexYellowColor);
+		});
 	});
 });
diff --git a/ColorPicker/utils.js b/ColorPicker/utils.js
index 81fbbb93fa..85a57fd269 100644
--- a/ColorPicker/utils.js
+++ b/ColorPicker/utils.js
@@ -1,45 +1,150 @@
 /**
- * Checks for valid hex color, otherwise returns the black color.
+ * Checks whether HEX color is valid.
  *
- * @param {String} hex	Hex color
- * @returns {String} Valid hex color
+ * @function
+ * @param {String} hex HEX color
+ * @returns {Boolean} `false` if valid
  * @private
  */
 const checkHex = (hex) => {
-	if (/^#[0-9A-F]{3,6}$/i.test(hex)) return hex;
-	return '#000000';
+	return !/^#[0-9A-F]{6}$/i.test(hex);
 };
 
 /**
- * Converts hex color to hue, saturation, and lightness values.
+ * Converts hue, saturation, and lightness values to red, green, and blue values.
  *
- * @param {String} hexColor
- * @returns {{s: number, h: number, l: number}}	HSL values
+ * @function
+ * @param {number} h Hue value
+ * @param {number} s Saturation value
+ * @param {number} l Lightness value
+ * @returns {{r: number, g: number, b: number, m: number}} RGB values and lightness adjustment
  * @private
  */
-const hexToHSL = (hexColor) => {
-	const hex = checkHex(hexColor);
-	// Convert hex to RGB first
+const calculateHslToRgb = ({h, s, l}) => {
+	// Ensure h, s,l are within bounds
+	h = h % 360; // Wrap-around hue to 0-359
+	s = Math.max(0, Math.min(100, s)) / 100; // Clamp saturation to 0-100, then convert to 0-1
+	l = Math.max(0, Math.min(100, l)) / 100; // Clamp lightness to 0-100, then convert to 0-1
+
+	const c = (1 - Math.abs(2 * l - 1)) * s; // Chroma
+	const x = c * (1 - Math.abs((h / 60) % 2 - 1)); // Second largest component
+	const m = l - c / 2; // Adjust lightness
 	let r = 0, g = 0, b = 0;
-	if (hex.length === 4) {
-		r = parseInt(hex[1] + hex[1], 16);
-		g = parseInt(hex[2] + hex[2], 16);
-		b = parseInt(hex[3] + hex[3], 16);
-	} else if (hex.length === 7) {
-		r = parseInt(hex.slice(1, 3), 16);
-		g = parseInt(hex.slice(3, 5), 16);
-		b = parseInt(hex.slice(5), 16);
+
+	if (0 <= h && h < 60) {
+		r = c; g = x; b = 0;
+	} else if (60 <= h && h < 120) {
+		r = x; g = c; b = 0;
+	} else if (120 <= h && h < 180) {
+		r = 0; g = c; b = x;
+	} else if (180 <= h && h < 240) {
+		r = 0; g = x; b = c;
+	} else if (240 <= h && h < 300) {
+		r = x; g = 0; b = c;
+	} else if (300 <= h && h <= 360) {
+		r = c; g = 0; b = x;
 	}
 
-	// Then convert RGB to HSL
-	r /= 255;
-	g /= 255;
-	b /= 255;
-	let cmin = Math.min(r, g, b),
-		cmax = Math.max(r, g, b),
-		delta = cmax - cmin,
-		h, s, l;
+	return {r, g, b, m};
+};
+
+/**
+ * Converts red, green, and blue string to HEX color.
+ *
+ * @function
+ * @param {string} rgbString
+ * @returns {string|boolean} 6-digit HEX color if the input is valid, or `false` if the input is invalid
+ * @private
+ */
+const rgbStringToHex = (rgbString) => {
+	// Step 1: Check if the input starts with "rgb("
+	if (!rgbString.startsWith("rgb(")) return false;
+
+	// Step 2: Extract the numbers between "rgb(" and ")"
+	let a = rgbString.slice(4, -1).split(",").map(s => s.trim());
+
+	// Step 3: Validate that the array has exactly 3 valid RGB values (0–255)
+	if (
+		a.length !== 3 || // Ensure there are 3 values
+		!a.every(v => /^\d+$/.test(v) && +v >= 0 && +v <= 255) // Check for valid digits and range
+	) return false;
+
+	// Step 4: Convert each RGB value to a 2-digit hex string
+	return "#" + a.map(v => (+v).toString(16).padStart(2, "0")).join("").toUpperCase();
+};
+
+/**
+ * Converts red, green, and blue values to HEX color.
+ *
+ * @function
+ * @param r {number}
+ * @param g {number}
+ * @param b {number}
+ * @returns {String} 6-digit HEX color
+ * @private
+ */
+const rgbToHex = (r, g, b) => {
+	return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
+};
+
+/**
+ * Extracts color from gradient and converts it to HEX color.
+ *
+ * @function
+ * @param {Object} canvasRef
+ * @param {number} x
+ * @param {number} y
+ * @returns {String} 6-digit HEX color
+ * @private
+ */
+const getHexColorFromGradient = (canvasRef, x, y) => {
+	const ctx = canvasRef.current.getContext('2d');
+	const imageData = ctx.getImageData(x, y, 1, 1);
+	return rgbToHex(imageData.data[0], imageData.data[1], imageData.data[2]);
+};
+
+/**
+ * Generates complementary HEX color.
+ *
+ * @function
+ * @param {String} hexColor
+ * @returns {String} 6-digit HEX color
+ * @private
+ */
+const generateOppositeColor = (hexColor) => {
+	hexColor = hexColor.replace('#', '');
+
+	const bigint = parseInt(hexColor, 16);
+	const r = (bigint >> 16) & 255;
+	const g = (bigint >> 8) & 255;
+	const b = bigint & 255;
+
+	const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
 
+	return luminance > 128 ? '#101720CC' : '#FFFFFFCC';
+};
+
+/**
+ * Converts HEX color to hue, saturation, and lightness values.
+ *
+ * @function
+ * @param {String} hexColor
+ * @returns {{h: number, s: number, l: number}}	HSL values
+ * @private
+ */
+const hexToHSL = (hexColor = '#000000') => {
+	// Convert hex to RGB first
+	const r = parseInt(hexColor.slice(1, 3), 16) / 255;
+	const g = parseInt(hexColor.slice(3, 5), 16) / 255;
+	const b = parseInt(hexColor.slice(5), 16) / 255;
+
+	// Calculate cmin, cmax, and delta
+	const cmin = Math.min(r, g, b);
+	const cmax = Math.max(r, g, b);
+	const delta = cmax - cmin;
+
+	// Calculate hue
+	let h;
 	if (delta === 0) {
 		h = 0;
 	} else if (cmax === r) {
@@ -56,49 +161,51 @@ const hexToHSL = (hexColor) => {
 		h += 360;
 	}
 
-	l = (cmax + cmin) / 2;
-	s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+	// Calculate lightness
+	const l = (cmax + cmin) / 2;
 
-	s = +(s * 100).toFixed(1);
-	l = +(l * 100).toFixed(1);
+	// Calculate saturation
+	const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
 
-	return {h: Math.round(h), s: Math.round(s), l: Math.round(l)};
+	return {
+		h: Math.round(h),
+		s: Math.round(s * 100),
+		l: Math.round(l * 100)
+	};
 };
 
 /**
- *  Converts hue, saturation, and lightness values to hex color.
+ * Converts HEX color to red, green, and blue values.
  *
- * @param {Number} h	Hue value
- * @param {Number} s	Saturation value
- * @param {Number} l	Lightness value
- * @returns {string}	6-digit hex color
+ * @function
+ * @param {String} hexColor
+ * @returns {{red: number, green: number, blue: number}} RGB values
  * @private
  */
-const HSLToHex = (h, s, l) => {
-	s /= 100;
-	l /= 100;
+const hexToRGB = (hexColor = '000000') => {
+	let internalColor = hexColor.replace('#', '').split('');
 
-	let c = (1 - Math.abs(2 * l - 1)) * s,
-		x = c * (1 - Math.abs((h / 60) % 2 - 1)),
-		m = l - c / 2,
-		r = 0,
-		g = 0,
-		b = 0;
+	return {
+		red: parseInt(internalColor[0] + internalColor[1], 16),
+		green: parseInt(internalColor[2] + internalColor[3], 16),
+		blue: parseInt(internalColor[4] + internalColor[5], 16)
+	};
+};
 
-	if (0 <= h && h < 60) {
-		r = c; g = x; b = 0;
-	} else if (60 <= h && h < 120) {
-		r = x; g = c; b = 0;
-	} else if (120 <= h && h < 180) {
-		r = 0; g = c; b = x;
-	} else if (180 <= h && h < 240) {
-		r = 0; g = x; b = c;
-	} else if (240 <= h && h < 300) {
-		r = x; g = 0; b = c;
-	} else if (300 <= h && h < 360) {
-		r = c; g = 0; b = x;
-	}
-	// Having obtained RGB, convert channels to hex
+/**
+ *  Converts hue, saturation, and lightness values to HEX color.
+ *
+ * @function
+ * @param {number} h Hue value
+ * @param {number} s Saturation value
+ * @param {number} l Lightness value
+ * @returns {String} 6-digit hex color
+ * @private
+ */
+const hslToHex = ({h, s, l}) => {
+	let {r, g, b, m} = calculateHslToRgb({h, s, l});
+
+	// Having obtained RGB, convert channels to HEX
 	r = Math.round((r + m) * 255).toString(16);
 	g = Math.round((g + m) * 255).toString(16);
 	b = Math.round((b + m) * 255).toString(16);
@@ -119,7 +226,53 @@ const HSLToHex = (h, s, l) => {
 	return "#" + r + g + b;
 };
 
+/**
+ *  Converts hue, saturation, and lightness values to RGB string.
+ *
+ * @function
+ * @param {number} h Hue value
+ * @param {number} s Saturation value
+ * @param {number} l Lightness value
+ * @returns {String} RGB string
+ * @private
+ */
+const hslToRGBString = ({h, s, l}) => {
+	let {r, g, b, m} = calculateHslToRgb({h, s, l});
+
+	// Having obtained RGB, convert channels to RGB string
+	r = Math.round((r + m) * 255);
+	g = Math.round((g + m) * 255);
+	b = Math.round((b + m) * 255);
+
+	return r + ',' + g + ',' + b;
+};
+
+/**
+ * Converts red, green, and blue values to HEX color.
+ *
+ * @function
+ * @param {{red: number, green: number, blue: number}} rgbColor RGB values
+ * @returns {String} 6-digit HEX color
+ * @private
+ */
+const rgbObjectToHex = (rgbColor) => {
+	let {red, green, blue} = rgbColor;
+
+	red = red < 16 ? `0${Number(red).toString(16)}` : Number(red).toString(16);
+	green = green < 16 ? `0${Number(green).toString(16)}` : Number(green).toString(16);
+	blue = blue < 16 ? `0${Number(blue).toString(16)}` : Number(blue).toString(16);
+
+	return `#${red}${green}${blue}`;
+};
+
 export {
+	checkHex,
+	generateOppositeColor,
+	getHexColorFromGradient,
 	hexToHSL,
-	HSLToHex
+	hexToRGB,
+	hslToHex,
+	hslToRGBString,
+	rgbObjectToHex,
+	rgbStringToHex
 };
diff --git a/ColorPickerSettingsApp/ColorPickerSettingsApp.js b/ColorPickerSettingsApp/ColorPickerSettingsApp.js
new file mode 100644
index 0000000000..94f5127dd3
--- /dev/null
+++ b/ColorPickerSettingsApp/ColorPickerSettingsApp.js
@@ -0,0 +1,363 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/**
+ * Sandstone component used in Settings App, that allows the user to choose a color.
+ *
+ * @example
+ * <ColorPickerSettingsApp
+ *	 color={'#FF00FF'}
+ *	 colorHandler={setColor}
+ *	 presetColors={['#FF0000', '#00FF00', '#0000FF']}
+ *	 text={'Color Picker'}
+ * />
+ *
+ * @module sandstone/ColorPickerSettingsApp
+ * @exports ColorPickerSettingsApp
+ * @exports ColorPickerSettingsAppBase
+ * @exports ColorPickerSettingsAppDecorator
+ * @private
+ */
+
+import kind from '@enact/core/kind';
+import Spottable from '@enact/spotlight/Spottable';
+import {Cell, Column, Row} from '@enact/ui/Layout';
+import Toggleable from '@enact/ui/Toggleable';
+import PropTypes from 'prop-types';
+import compose from 'ramda/src/compose';
+import {useCallback, useEffect, useState} from 'react';
+
+import BodyText from '../BodyText';
+import Button, {ButtonBase} from '../Button';
+import Icon from '../Icon';
+import Item from '../Item';
+import Popup from '../Popup';
+import Skinnable from '../Skinnable';
+import Slider from '../Slider';
+
+import {hexToHSL, HSLToHex} from './utils';
+
+import componentCss from './ColorPickerSettingsApp.module.less';
+
+const SpottableButton = Spottable(ButtonBase);
+
+/**
+ * A component that contains the content for the {@link sandstone/ColorPickerSettingsApp|ColorPickerSettingsApp} popup.
+ *
+ * @class PopupContent
+ * @memberof sandstone/ColorPickerSettingsApp
+ * @ui
+ * @private
+ */
+const PopupContent = ({color, colorHandler, css, presetColors}) => {
+	const [hue, setHue] = useState(0);
+	const [saturation, setSaturation] = useState(0);
+	const [lightness, setLightness] = useState(0);
+
+	useEffect(() => {
+		let {h, s, l} = hexToHSL(color);
+
+		setHue(h);
+		setSaturation(s);
+		setLightness(l);
+	}, [color]);
+
+	const changeHue = useCallback((ev) => {
+		setHue(ev.value);
+	}, []);
+
+	const changeLightness = useCallback((ev) => {
+		setLightness(ev.value);
+	}, []);
+
+	const changeSaturation = useCallback((ev) => {
+		setSaturation(ev.value);
+	}, []);
+
+	const handleClick = useCallback((ev) => {
+		colorHandler(ev.target.offsetParent.id);
+	}, [colorHandler]);
+
+	const onSliderValueChange = useCallback(() => {
+		colorHandler(HSLToHex(hue, saturation, lightness));
+	}, [colorHandler, hue, lightness, saturation]);
+
+	return (
+		<Cell className={css.colorPicker}>
+			<Row className={css.colorsRow} wrap>
+				{presetColors?.map((presetColor, presetColorIndex) => {
+
+					return (
+						<Cell key={presetColor + '-' + presetColorIndex} size="25%">
+							<SpottableButton
+								className={css.coloredButton}
+								id={presetColor}
+								minWidth={false}
+								onClick={handleClick}
+								style={{backgroundColor: presetColor}}
+								type="color"
+							/>
+						</Cell>
+					);
+				})}
+			</Row>
+			<div>
+				<Column className={css.colorPickerSliders}>
+					<BodyText className={css.colorSliderText} css={css}>Hue {hue}</BodyText>
+					<Slider
+						className={css.colorSlider}
+						max={356}
+						min={0}
+						onBlur={onSliderValueChange}
+						onClick={onSliderValueChange}
+						onChange={changeHue}
+						value={hue}
+					/>
+					<BodyText className={css.colorSliderText} css={css}>Saturation {saturation}%</BodyText>
+					<Slider
+						className={css.colorSlider}
+						max={100}
+						min={0}
+						onBlur={onSliderValueChange}
+						onClick={onSliderValueChange}
+						onChange={changeSaturation}
+						value={saturation}
+					/>
+					<BodyText className={css.colorSliderText} css={css}>Lightness {lightness}%</BodyText>
+					<Slider
+						className={css.colorSlider}
+						max={100}
+						min={0}
+						onBlur={onSliderValueChange}
+						onClick={onSliderValueChange}
+						onChange={changeLightness}
+						value={lightness}
+					/>
+				</Column>
+				<div className={css.coloredDiv} style={{backgroundColor: `hsl(${hue} ,${saturation}%, ${lightness}%)`}} />
+			</div>
+		</Cell>
+	);
+};
+
+PopupContent.propTypes = {
+	/**
+	 * Indicates the color.
+	 *
+	 * @type {String}
+	 * @private
+	 */
+	color: PropTypes.string,
+
+	/**
+	 * Called when color is modified.
+	 *
+	 * @type {Function}
+	 * @private
+	 */
+	colorHandler: PropTypes.func,
+
+	/**
+	 * Customizes the component by mapping the supplied collection of CSS class names to the
+	 * corresponding internal elements and states of this component.
+	 *
+	 * The following classes are supported:
+	 *
+	 * `colorPickerSettingsApp` - The root class name
+	 * `coloredDiv`  - A class name used for a single div
+	 *
+	 * @type {Object}
+	 * @private
+	 */
+	css: PropTypes.object,
+
+	/**
+	 * Contains an array with a couple of possible preset colors.
+	 *
+	 * @type {Array}
+	 * @private
+	 */
+	presetColors: PropTypes.array
+};
+
+/**
+ * The color picker base component which sets-up the component's structure.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link sandstone/ColorPickerSettingsApp|ColorPickerSettingsApp}.
+ *
+ * @class ColorPickerSettingsAppBase
+ * @memberof sandstone/ColorPickerSettingsApp
+ * @ui
+ * @private
+ */
+const ColorPickerSettingsAppBase = kind({
+	name: 'ColorPickerSettingsAppBase',
+
+	functional: true,
+
+	propTypes: /** @lends sandstone/ColorPickerSettingsApp.ColorPickerSettingsAppBase.prototype */ {
+		/**
+		 * Indicates the color.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		color: PropTypes.string,
+
+		/**
+		 * Called when the color is modified.
+		 *
+		 * @type {Function}
+		 * @public
+		 */
+		colorHandler: PropTypes.func,
+
+		/**
+		 * Customizes the component by mapping the supplied collection of CSS class names to the
+		 * corresponding internal elements and states of this component.
+		 *
+		 * The following classes are supported:
+		 *
+		 * `colorPickerSettingsApp` - The root class name
+		 * `coloredDiv`  - A class name used for a single div
+		 *
+		 * @type {Object}
+		 * @public
+		 */
+		css: PropTypes.object,
+
+		/**
+		 * Applies the `disabled` class.
+		 *
+		 * When `true`, the color picker is shown as disabled.
+		 *
+		 * @type {Boolean}
+		 * @default false
+		 * @public
+		 */
+		disabled: PropTypes.bool,
+
+		/**
+		 * Called to open or close the color picker.
+		 *
+		 * @type {Function}
+		 * @public
+		 */
+		onTogglePopup: PropTypes.func,
+
+		/**
+		 * Indicates if the color picker is open.
+		 *
+		 * When `true`, contextual popup opens.
+		 *
+		 * @type {Boolean}
+		 * @default false
+		 * @private
+		 */
+		popupOpen: PropTypes.bool,
+
+		/**
+		 * Contains an array with a couple of possible preset colors.
+		 *
+		 * @type {Array}
+		 * @public
+		 */
+		presetColors: PropTypes.array,
+
+		/**
+		 * Contains the text that shows near color picker.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		text: PropTypes.string
+	},
+
+	handlers: {
+		handleClosePopup: (ev, {onTogglePopup}) => {
+			onTogglePopup();
+		},
+		handleOpenPopup: (ev, {disabled, onTogglePopup}) => {
+			if (!disabled) {
+				onTogglePopup();
+			}
+		}
+	},
+
+	styles: {
+		css: componentCss,
+		publicClassNames: true
+	},
+
+	render: ({color, colorHandler, css, disabled = false, handleClosePopup, handleOpenPopup, popupOpen = false, presetColors, text, ...rest}) => {
+		delete rest.onTogglePopup;
+
+		const CloseIcon = useCallback((props) => <Icon {...props} css={css} />, [css]);
+		const slotAfter = <SpottableButton
+			className={css.coloredButton}
+			disabled={disabled}
+			onClick={handleOpenPopup}
+			style={{backgroundColor: color}}
+			type="color"
+		/>;
+
+		return (
+			<Cell shrink className={css.colorPicker}>
+				<Item disabled={disabled} onClick={handleOpenPopup} slotAfter={slotAfter} {...rest}>
+					{text}
+				</Item>
+				<Popup
+					className={css.colorPopup}
+					css={css}
+					noAnimation
+					onClose={handleClosePopup}
+					open={disabled ? false : popupOpen}
+					position="left"
+					scrimType="transparent"
+				>
+					<Row>
+						<Cell align="center">
+							<BodyText className={css.colorPopupHeader} css={css} noWrap>{text}</BodyText>
+						</Cell>
+						<Cell align="right" shrink>
+							<Button className={css.closeButton} css={css} iconComponent={CloseIcon} icon="closex" onClick={handleClosePopup} size="small" />
+						</Cell>
+					</Row>
+					<PopupContent color={color} colorHandler={colorHandler} css={css} presetColors={presetColors} />
+				</Popup>
+			</Cell>
+		);
+	}
+});
+
+/**
+ * Applies Sandstone specific behaviors to {@link sandstone/ColorPickerSettingsApp.ColorPickerSettingsAppBase|ColorPickerSettingsApp} components.
+ *
+ * @hoc
+ * @memberof sandstone/ColorPickerSettingsApp
+ * @mixes sandstone/Skinnable.Skinnable
+ * @mixes ui/Toggleable.Toggleable
+ * @private
+ */
+const ColorPickerSettingsAppDecorator = compose(
+	Skinnable,
+	Toggleable({prop: 'popupOpen', toggle: 'onTogglePopup'})
+);
+
+/**
+ * A color picker component, ready to use in Settings App.
+ *
+ * @class ColorPickerSettingsApp
+ * @memberof sandstone/ColorPickerSettingsApp
+ * @extends sandstone/ColorPickerSettingsApp.ColorPickerSettingsAppBase
+ * @mixes sandstone/ColorPickerSettingsApp.ColorPickerSettingsAppDecorator
+ * @ui
+ * @private
+ */
+const ColorPickerSettingsApp = ColorPickerSettingsAppDecorator(ColorPickerSettingsAppBase);
+
+export default ColorPickerSettingsApp;
+export {
+	ColorPickerSettingsApp,
+	ColorPickerSettingsAppBase,
+	ColorPickerSettingsAppDecorator
+};
diff --git a/ColorPickerSettingsApp/ColorPickerSettingsApp.module.less b/ColorPickerSettingsApp/ColorPickerSettingsApp.module.less
new file mode 100644
index 0000000000..4002ee0e1e
--- /dev/null
+++ b/ColorPickerSettingsApp/ColorPickerSettingsApp.module.less
@@ -0,0 +1,93 @@
+// ColorPickerSettingsApp.module.less
+//
+@import '../styles/colors.less';
+@import '../styles/mixins.less';
+@import '../styles/variables.less';
+
+.colorPickerSettingsApp {
+	align-items: center;
+	justify-content: space-between;
+
+	.colorsRow {
+		width: 522px;
+		padding-top: 9px;
+	}
+
+	.coloredButton {
+		border-radius: 72px;
+		border: 3px solid #ffffff;
+		height: 120px;
+		margin-left: 0;
+		min-width: 120px;
+		padding: 0;
+		transform: none;
+
+		.focus({
+			transform: scale(1.1);
+		});
+
+		.disabled({
+			opacity: @sand-disabled-opacity;
+		})
+	}
+
+	.coloredDiv,
+	.coloredInput {
+		border-radius: 24px;
+	}
+
+	.coloredDiv {
+		display: block;
+		height: 81px;
+		border: 3px solid #ffffff;
+
+		&.button, &.focusExpand {
+			margin: 24px;
+		}
+
+		.focus({
+			transform: scale(1.1);
+		});
+	}
+
+	.coloredInput {
+		opacity: 0;
+
+		&:hover {
+			cursor: pointer;
+		}
+	}
+}
+
+.colorPopup {
+	height: max-content;
+
+	.colorPopupHeader {
+		font-size: 66px;
+		text-transform: capitalize;
+		margin: 0 0 0 15px;
+	}
+
+	.closeButton {
+		&.button, &.focusExpand {
+			margin: 0;
+		}
+
+		.icon {
+			font-size: 48px;
+		}
+	}
+
+	.colorPickerSliders {
+		padding: 45px 0;
+
+		.colorSlider {
+			margin: 0 27px;
+		}
+
+		.colorSliderText {
+			font-size: 54px;
+			margin: 0 24px;
+		}
+	}
+}
diff --git a/ColorPickerSettingsApp/package.json b/ColorPickerSettingsApp/package.json
new file mode 100644
index 0000000000..fcf58aae2c
--- /dev/null
+++ b/ColorPickerSettingsApp/package.json
@@ -0,0 +1,3 @@
+{
+	"main": "ColorPickerSettingsApp.js"
+}
diff --git a/ColorPickerSettingsApp/tests/ColorPickerSettingsApp-specs.js b/ColorPickerSettingsApp/tests/ColorPickerSettingsApp-specs.js
new file mode 100644
index 0000000000..543e074265
--- /dev/null
+++ b/ColorPickerSettingsApp/tests/ColorPickerSettingsApp-specs.js
@@ -0,0 +1,231 @@
+import {FloatingLayerDecorator} from '@enact/ui/FloatingLayer';
+import '@testing-library/jest-dom';
+import {fireEvent, render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ColorPickerSettingsApp from '../ColorPickerSettingsApp';
+import {hexToHSL, HSLToHex} from '../utils';
+
+const FloatingLayerController = FloatingLayerDecorator('div');
+
+const changeSliderValueByKey = async (element, steps, decrease) => {
+	const keyCode = decrease ? 37 : 39;
+
+	await fireEvent.mouseOver(element);
+
+	for (let i = 0; i < steps; i++) {
+		await fireEvent.keyDown(element, {keyCode: keyCode});
+	}
+};
+
+const sliderValues = (elements) => {
+	const values = [];
+
+	elements.forEach(element => {
+		values.push(element.getAttribute('aria-valuetext'));
+	});
+
+	return values;
+};
+
+describe('ColorPickerSettingsApp', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	test('should open and close ColorPickerSettingsApp popup', async () => {
+		const closeButtonText = '󯿵';
+		const user = userEvent.setup();
+
+		render(
+			<FloatingLayerController>
+				<ColorPickerSettingsApp />
+			</FloatingLayerController>
+		);
+
+		const ColorPickerSettingsAppButton = screen.getByRole('button');
+		await user.click(ColorPickerSettingsAppButton);
+		const closeButton = screen.queryByText(closeButtonText);
+
+		expect(closeButton).not.toBeNull();
+
+		await user.click(closeButton);
+
+		expect(screen.queryByText(closeButtonText)).toBeNull();
+	});
+
+	test('should not open ColorPickerSettingsApp popup if disabled is set to true', async () => {
+		const closeButtonText = '󯿵';
+		const user = userEvent.setup();
+
+		render(
+			<FloatingLayerController>
+				<ColorPickerSettingsApp disabled />
+			</FloatingLayerController>
+		);
+
+		const ColorPickerSettingsAppButton = screen.getByRole('button');
+		await user.click(ColorPickerSettingsAppButton);
+
+		const closeButton = screen.queryByText(closeButtonText);
+
+		expect(closeButton).toBeNull();
+	});
+
+	test('should have the text set', async () => {
+		const text = 'Color Picker';
+		const user = userEvent.setup();
+
+		render(
+			<FloatingLayerController>
+				<ColorPickerSettingsApp text={text} />
+			</FloatingLayerController>
+		);
+
+		const ColorPickerSettingsAppText = screen.queryByText(text);
+
+		expect(ColorPickerSettingsAppText).not.toBeNull();
+
+		await user.click(ColorPickerSettingsAppText);
+		const popupText = screen.queryAllByText(text)[1];
+
+		expect(popupText).not.toBeUndefined();
+	});
+
+	test('should have the color set', async () => {
+		const color = '#00FF00';
+
+		render(
+			<FloatingLayerController>
+				<ColorPickerSettingsApp color={color} />
+			</FloatingLayerController>
+		);
+
+		const expected = `background-image: ${color}`;
+		const ColorPickerSettingsAppButton = screen.getByRole('button');
+
+		expect(ColorPickerSettingsAppButton).toHaveStyle(expected);
+	});
+
+	test('should have the presetColors', async () => {
+		const presetColors = ['#FF0000', '#00FF00', '#0000FF'];
+		const presetColorsRGB = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'];
+		const user = userEvent.setup();
+
+		render(
+			<FloatingLayerController>
+				<ColorPickerSettingsApp presetColors={presetColors} />
+			</FloatingLayerController>
+		);
+
+		const ColorPickerSettingsAppButton = screen.getByRole('button');
+		await user.click(ColorPickerSettingsAppButton);
+
+		const buttons = screen.getAllByRole('button');
+		const buttonsWithSpecificStyle = buttons.filter(element => {
+			const compoundStyle = window.getComputedStyle(element);
+			return presetColorsRGB.find(color => color === compoundStyle.getPropertyValue('background-color'));
+		});
+
+		expect(buttonsWithSpecificStyle.length).toEqual(presetColors.length);
+	});
+
+	test('should emit an colorHandler event when select color from presetColors', async () => {
+		const color = '#FFFFFF';
+		const colorHandler = jest.fn();
+		const presetColors = ['#FF0000'];
+		const user = userEvent.setup();
+
+		render(
+			<FloatingLayerController>
+				<ColorPickerSettingsApp color={color} colorHandler={colorHandler} presetColors={presetColors} />
+			</FloatingLayerController>
+		);
+
+		const ColorPickerSettingsAppButton = screen.getByRole('button');
+		await user.click(ColorPickerSettingsAppButton);
+
+		const button = screen.getAllByRole('button')[2];
+		Object.defineProperty(button, 'offsetParent', {value: {id: presetColors[0]}});
+
+		await user.click(button);
+
+		expect(colorHandler).toHaveBeenCalled();
+	});
+
+	test('should change color when hue, saturation and lightness sliders values changed', async () => {
+		const color = '#00FF00';
+		const colorHandler = jest.fn();
+		const user = userEvent.setup();
+
+		render(
+			<FloatingLayerController>
+				<ColorPickerSettingsApp color={color} colorHandler={colorHandler} />
+			</FloatingLayerController>
+		);
+
+		const ColorPickerSettingsAppButton = screen.getByRole('button');
+		await user.click(ColorPickerSettingsAppButton);
+
+		const sliders = screen.getAllByRole('slider');
+
+		const [hue, saturation, lightness] = sliderValues(sliders);
+
+		await changeSliderValueByKey(sliders[0], 30);
+		fireEvent.blur(sliders[0]);
+		await changeSliderValueByKey(sliders[1], 30, true);
+		fireEvent.blur(sliders[1]);
+		await changeSliderValueByKey(sliders[2], 30, true);
+		fireEvent.blur(sliders[2]);
+
+		const [changedHue, changedSaturation, changedLightness] = sliderValues(sliders);
+
+		expect(hue).not.toEqual(changedHue);
+		expect(saturation).not.toEqual(changedSaturation);
+		expect(lightness).not.toEqual(changedLightness);
+	});
+
+	// Utility functions
+	test('should return hsl from hex color if length is 4', () => {
+		const hexBlueColor = '#00F';
+		const hexGreenColor = '#0F0';
+		const hexPinkColor = '#F9A';
+		const hexRedColor = '#F00';
+
+		const hslBlueColor = hexToHSL(hexBlueColor);
+		const hslGreenColor = hexToHSL(hexGreenColor);
+		const hslPinkColor = hexToHSL(hexPinkColor);
+		const hslRedColor = hexToHSL(hexRedColor);
+
+		const expectedBlue = {h: 240, s: 100, l: 50};
+		const expectedGreen = {h: 120, s: 100, l: 50};
+		const expectedPink = {h: 350, s: 100, l: 80};
+		const expectedRed = {h: 0, s: 100, l: 50};
+
+		expect(hslBlueColor).toEqual(expectedBlue);
+		expect(hslGreenColor).toEqual(expectedGreen);
+		expect(hslPinkColor).toEqual(expectedPink);
+		expect(hslRedColor).toEqual(expectedRed);
+	});
+
+	test('should return hex from hsl color', () => {
+		const hslAquaColor = HSLToHex(180, 100, 50);
+		const hslBlueColor = HSLToHex(240, 100, 50);
+		const hslFuchsiaColor = HSLToHex(300, 100, 50);
+		const hslRedColor = HSLToHex(0, 100, 50);
+		const hslYellowColor = HSLToHex(60, 100, 50);
+
+		const hexAquaColor = '#00ffff';
+		const hexBlueColor = '#0000ff';
+		const hexFuchsiaColor = '#ff00ff';
+		const hexRedColor = '#ff0000';
+		const hexYellowColor = '#ffff00';
+
+
+		expect(hslAquaColor).toEqual(hexAquaColor);
+		expect(hslBlueColor).toEqual(hexBlueColor);
+		expect(hslFuchsiaColor).toEqual(hexFuchsiaColor);
+		expect(hslRedColor).toEqual(hexRedColor);
+		expect(hslYellowColor).toEqual(hexYellowColor);
+	});
+});
diff --git a/ColorPickerSettingsApp/utils.js b/ColorPickerSettingsApp/utils.js
new file mode 100644
index 0000000000..75708c6a44
--- /dev/null
+++ b/ColorPickerSettingsApp/utils.js
@@ -0,0 +1,125 @@
+/**
+ * Checks for valid hex color, otherwise returns the black color.
+ *
+ * @param {String} hex	Hex color
+ * @returns {String} Valid hex color
+ * @private
+ */
+const checkHex = (hex) => {
+	if (/^#[0-9A-F]{3,6}$/i.test(hex)) return hex;
+	return '#000000';
+};
+
+/**
+ * Converts hex color to hue, saturation, and lightness values.
+ *
+ * @param {String} hexColor
+ * @returns {{h: Number, s: Number, l: Number}}	HSL values
+ * @private
+ */
+const hexToHSL = (hexColor) => {
+	const hex = checkHex(hexColor);
+	// Convert hex to RGB first
+	let r = 0, g = 0, b = 0;
+	if (hex.length === 4) {
+		r = parseInt(hex[1] + hex[1], 16);
+		g = parseInt(hex[2] + hex[2], 16);
+		b = parseInt(hex[3] + hex[3], 16);
+	} else if (hex.length === 7) {
+		r = parseInt(hex.slice(1, 3), 16);
+		g = parseInt(hex.slice(3, 5), 16);
+		b = parseInt(hex.slice(5), 16);
+	}
+
+	// Then convert RGB to HSL
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	let cmin = Math.min(r, g, b),
+		cmax = Math.max(r, g, b),
+		delta = cmax - cmin,
+		h, s, l;
+
+	if (delta === 0) {
+		h = 0;
+	} else if (cmax === r) {
+		h = ((g - b) / delta) % 6;
+	} else if (cmax === g) {
+		h = (b - r) / delta + 2;
+	} else {
+		h = (r - g) / delta + 4;
+	}
+
+	h = Math.round(h * 60);
+
+	if (h < 0) {
+		h += 360;
+	}
+
+	l = (cmax + cmin) / 2;
+	s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+
+	s = +(s * 100).toFixed(1);
+	l = +(l * 100).toFixed(1);
+
+	return {h: Math.round(h), s: Math.round(s), l: Math.round(l)};
+};
+
+/**
+ *  Converts hue, saturation, and lightness values to hex color.
+ *
+ * @param {Number} h	Hue value
+ * @param {Number} s	Saturation value
+ * @param {Number} l	Lightness value
+ * @returns {String}	6-digit hex color
+ * @private
+ */
+const HSLToHex = (h, s, l) => {
+	s /= 100;
+	l /= 100;
+
+	let c = (1 - Math.abs(2 * l - 1)) * s,
+		x = c * (1 - Math.abs((h / 60) % 2 - 1)),
+		m = l - c / 2,
+		r = 0,
+		g = 0,
+		b = 0;
+
+	if (0 <= h && h < 60) {
+		r = c; g = x; b = 0;
+	} else if (60 <= h && h < 120) {
+		r = x; g = c; b = 0;
+	} else if (120 <= h && h < 180) {
+		r = 0; g = c; b = x;
+	} else if (180 <= h && h < 240) {
+		r = 0; g = x; b = c;
+	} else if (240 <= h && h < 300) {
+		r = x; g = 0; b = c;
+	} else if (300 <= h && h < 360) {
+		r = c; g = 0; b = x;
+	}
+	// Having obtained RGB, convert channels to hex
+	r = Math.round((r + m) * 255).toString(16);
+	g = Math.round((g + m) * 255).toString(16);
+	b = Math.round((b + m) * 255).toString(16);
+
+	// Prepend 0s, if necessary
+	if (r.length === 1) {
+		r = "0" + r;
+	}
+
+	if (g.length === 1) {
+		g = "0" + g;
+	}
+
+	if (b.length === 1) {
+		b = "0" + b;
+	}
+
+	return "#" + r + g + b;
+};
+
+export {
+	hexToHSL,
+	HSLToHex
+};
diff --git a/samples/sampler/stories/default/ColorPicker.js b/samples/sampler/stories/default/ColorPicker.js
new file mode 100644
index 0000000000..9365e6d7ba
--- /dev/null
+++ b/samples/sampler/stories/default/ColorPicker.js
@@ -0,0 +1,39 @@
+import BodyText from '@enact/sandstone/BodyText';
+import ColorPicker from '@enact/sandstone/ColorPicker';
+import {mergeComponentMetadata} from '@enact/storybook-utils';
+import {action} from '@enact/storybook-utils/addons/actions';
+import {boolean, select} from '@enact/storybook-utils/addons/controls';
+
+const Config = mergeComponentMetadata('ColorPicker', ColorPicker);
+
+const colors = ['#eb4034', '#32a852', '#3455eb'];
+
+export default {
+	title: 'Sandstone/ColorPicker',
+	component: 'ColorPicker'
+};
+
+export const _ColorPicker = (args) => (
+	<>
+		<ColorPicker
+			color={colors[0]}
+			colors={colors}
+			disabled={args['disabled']}
+			onChangeColor={action('onChangeColor')}
+			open={args['open']}
+			type={args['type']}
+		/>
+		<BodyText centered>Use CONTROLS to interact with ColorPicker.</BodyText>
+	</>
+);
+
+boolean('open', _ColorPicker, Config);
+boolean('disabled', _ColorPicker, Config);
+select('type', _ColorPicker, ['grid', 'spectrum', 'sliders'], Config);
+
+_ColorPicker.displayName = 'ColorPicker';
+_ColorPicker.parameters = {
+	info: {
+		text: 'Basic usage of ColorPicker'
+	}
+};
diff --git a/samples/sampler/stories/qa/ColorPicker.js b/samples/sampler/stories/qa/ColorPicker.js
index a5a0d3a6ad..15eb93f0f9 100644
--- a/samples/sampler/stories/qa/ColorPicker.js
+++ b/samples/sampler/stories/qa/ColorPicker.js
@@ -1,10 +1,10 @@
-import ColorPicker, {ColorPickerBase} from '@enact/sandstone/ColorPicker';
+import ColorPickerSettingsApp, {ColorPickerSettingsAppBase} from '@enact/sandstone/ColorPickerSettingsApp';
 import {mergeComponentMetadata} from '@enact/storybook-utils';
 import {boolean, text} from '@enact/storybook-utils/addons/controls';
 import {Fragment, useState} from 'react';
 
-ColorPicker.displayName = 'ColorPicker';
-const Config = mergeComponentMetadata('ColorPicker', ColorPickerBase, ColorPicker);
+ColorPickerSettingsApp.displayName = 'ColorPickerSettingsApp';
+const Config = mergeComponentMetadata('ColorPicker', ColorPickerSettingsAppBase, ColorPickerSettingsApp);
 
 const presetColors = [
 	'#FF0000',
@@ -17,8 +17,8 @@ const presetColors = [
 ];
 
 export default {
-	title: 'Sandstone/ColorPicker',
-	component: 'ColorPicker'
+	title: 'Sandstone/ColorPickerSettingsApp',
+	component: 'ColorPickerSettingsApp'
 };
 
 export const WithPresetColors = (args) => {
@@ -26,7 +26,7 @@ export const WithPresetColors = (args) => {
 
 	return (
 		<Fragment>
-			<ColorPicker
+			<ColorPickerSettingsApp
 				color={color}
 				colorHandler={setColor}
 				disabled={args.disabled}
diff --git a/styles/colors.less b/styles/colors.less
index 451402e50b..1543d7316c 100644
--- a/styles/colors.less
+++ b/styles/colors.less
@@ -90,6 +90,7 @@
 @sand-item-disabled-focus-bg-color: var(--sand-item-disabled-focus-bg-color, #e6e6e6);
 @sand-keyguide-bg-base-color: var(--sand-keyguide-bg-color, #373a41);
 @sand-keyguide-bg-color-opacity: var(--sand-keyguide-bg-color-opacity, 0.9);
+@sand-slider-knob-border-color: var(--sand-slider-knob-border-color, transparent);
 @sand-slider-disabled-knob-bg-color: var(--sand-slider-disabled-knob-bg-color, #666666);
 @sand-spinner-color: var(--sand-spinner-color, #ffffff);
 @sand-steps-pageindicator-bg-color: var(--sand-steps-pageindicator-bg-color, #6f7680);
@@ -189,6 +190,13 @@
 @sand-checkbox-indeterminate-focus-border-color: @sand-checkbox-focus-border-color;
 @sand-checkbox-standalone-bg-disabled-focus-bg-color: @sand-disabled-focus-bg-color;
 
+// ColorPicker
+@sand-colorpicker-colorblock-border-color: transparent;
+@sand-colorpicker-output-bg-color: #eeeeee;
+@sand-colorpicker-output-color: #4c5059;
+@sand-colorpicker-spectrum-circleindicator-color: #808080;
+@sand-colorpicker-spectrum-circleindicator-focus-color: #000000;
+
 // ContextualPopup
 // ---------------------------------------
 @sand-contextualpopup-bg-color: @sand-overlay-bg-color;
@@ -381,7 +389,6 @@
 @sand-slider-load-bg-color: @sand-progressbar-load-bg-color;
 @sand-slider-fill-bg-color: @sand-progress-slider-color;
 @sand-slider-knob-bg-color: @sand-slider-fill-bg-color;
-@sand-slider-knob-border-color: transparent;
 @sand-slider-focus-bar-bg-color: @sand-slider-bar-bg-color;
 @sand-slider-focus-load-bg-color: @sand-slider-load-bg-color;
 @sand-slider-focus-fill-bg-color: @sand-focus-bg-color;
diff --git a/styles/variables.less b/styles/variables.less
index e223c6ccd7..58a7ef79ae 100644
--- a/styles/variables.less
+++ b/styles/variables.less
@@ -400,6 +400,29 @@
 @sand-checkbox-container-position: ((@sand-icon-tiny-size - 120px) / 2);  // Container's total dimensions should be `120px` defined in the GUI spec
 @sand-checkbox-container-border-radius: @sand-item-border-radius;
 
+// ColorPicker
+@sand-colorpicker-border-large: 9px;
+@sand-colorpicker-border-medium: 6px;
+@sand-colorpicker-border-small: 3px;
+@sand-colorpicker-circle-border-radius: 99px;
+@sand-colorpicker-dropdown-height: 129px;
+@sand-colorpicker-grid-colorblock-size: 54px;
+@sand-colorpicker-height: 702px;
+@sand-colorpicker-input-width: 402px;
+@sand-colorpicker-margin-large: 30px;
+@sand-colorpicker-margin-medium: 18px;
+@sand-colorpicker-margin-small: 9px;
+@sand-colorpicker-output-border-radius: 12px;
+@sand-colorpicker-padding: 24px;
+@sand-colorpicker-selectedcolor-border-radius: 24px;
+@sand-colorpicker-selectedcolor-height: 240px;
+@sand-colorpicker-selectedcolor-margin: 15px;
+@sand-colorpicker-slider-height: 33px;
+@sand-colorpicker-slider-knob-size: 102px;
+@sand-colorpicker-slider-label-font-size: 42px;
+@sand-colorpicker-spectrum-circleindicator-size: 48px;
+@sand-colorpicker-tabgroup-width: 1200px;
+
 // ContextualMenu
 // ---------------------------------------
 @sand-contextualmenu-container-padding: 36px 0;
diff --git a/tests/screenshot/apps/SandstoneComponents.js b/tests/screenshot/apps/SandstoneComponents.js
index c435c4be6d..757c6e7855 100644
--- a/tests/screenshot/apps/SandstoneComponents.js
+++ b/tests/screenshot/apps/SandstoneComponents.js
@@ -7,6 +7,7 @@ import Button from './components/Button';
 import BodyText from './components/BodyText';
 import Checkbox from './components/Checkbox';
 import CheckboxItem from './components/CheckboxItem';
+import ColorPicker from './components/ColorPicker';
 import ContextualMenuDecorator from './components/ContextualMenuDecorator';
 import ContextualPopupDecorator from './components/ContextualPopupDecorator';
 import DatePicker from './components/DatePicker';
@@ -62,6 +63,7 @@ const components = {
 	Button,
 	Checkbox,
 	CheckboxItem,
+	ColorPicker,
 	ContextualMenuDecorator,
 	ContextualPopupDecorator,
 	DatePicker,
diff --git a/tests/screenshot/apps/components/ColorPicker.js b/tests/screenshot/apps/components/ColorPicker.js
new file mode 100644
index 0000000000..6859b29800
--- /dev/null
+++ b/tests/screenshot/apps/components/ColorPicker.js
@@ -0,0 +1,54 @@
+import ColorPicker from '../../../../ColorPicker';
+
+const colors = ['#eb4034', '#32a852', '#3455eb'];
+
+const ColorPickerTests = [
+	<ColorPicker
+		color={colors[0]}
+		colors={colors}
+		onChangeColor={() => {}}
+		open
+		type="grid"
+	/>,
+	<ColorPicker
+		color={colors[0]}
+		colors={colors}
+		onChangeColor={() => {}}
+		open
+		type="spectrum"
+	/>,
+	<ColorPicker
+		color={colors[0]}
+		colors={colors}
+		onChangeColor={() => {}}
+		open
+		type="sliders"
+	/>,
+	// disabled
+	<ColorPicker
+		disabled
+		color={colors[0]}
+		colors={colors}
+		onChangeColor={() => {}}
+		open
+		type="grid"
+	/>,
+	<ColorPicker
+		disabled
+		color={colors[0]}
+		colors={colors}
+		onChangeColor={() => {}}
+		open
+		type="spectrum"
+	/>,
+	<ColorPicker
+		disabled
+		color={colors[0]}
+		colors={colors}
+		onChangeColor={() => {}}
+		open
+		type="sliders"
+	/>
+];
+
+export default ColorPickerTests;
diff --git a/tests/ui/apps/ColorPicker/ColorPicker-View.js b/tests/ui/apps/ColorPicker/ColorPicker-View.js
new file mode 100644
index 0000000000..3ee66afaeb
--- /dev/null
+++ b/tests/ui/apps/ColorPicker/ColorPicker-View.js
@@ -0,0 +1,26 @@
+import ColorPicker from '../../../../ColorPicker';
+import ThemeDecorator from '../../../../ThemeDecorator';
+import spotlight from '@enact/spotlight';
+
+// NOTE: Forcing pointer mode off so we can be sure that regardless of webOS pointer mode the app
+// runs the same way
+spotlight.setPointerMode(false);
+
+const colors = ['#eb4034', '#32a852', '#3455eb'];
+
+const App = (props) => {
+	return (
+		<div {...props}>
+			<ColorPicker
+				id="colorPicker"
+				color={colors[0]}
+				colors={colors}
+				onChangeColor={() => {}}
+				open
+				type="grid"
+			/>
+		</div>
+	);
+};
+
+export default ThemeDecorator(App);
diff --git a/tests/ui/specs/ColorPicker/ColorPicker-specs.js b/tests/ui/specs/ColorPicker/ColorPicker-specs.js
new file mode 100644
index 0000000000..006c0d7195
--- /dev/null
+++ b/tests/ui/specs/ColorPicker/ColorPicker-specs.js
@@ -0,0 +1,426 @@
+const Page = require('./ColorPickerPage');
+
+describe('ColorPicker', function () {
+	beforeEach(async function () {
+		await Page.open();
+	});
+
+	const colorPicker = Page.components.colorPicker;
+
+	describe('ColorPicker Grid', function () {
+		describe('5-way', function () {
+			it('should change selectedColor with 5-way keys', async function () {
+				// read background color of forth color block form first colors column
+				const colorBlockStyle = await (await colorPicker.colorBlock())[3].getAttribute('style');
+				const colorBlockBgColor = colorBlockStyle.split(';')[0];
+				// Spot forth block from first colors column
+				for (let i = 0; i < 4; i++) {
+					await Page.spotlightDown();
+				}
+				await Page.spotlightSelect();
+
+				const selectedColorStyle = await colorPicker.selectedColor.getAttribute('style');
+				const selectedColor = selectedColorStyle.split(';')[0];
+
+				expect(colorBlockBgColor).toBe(selectedColor);
+			});
+		});
+
+		describe('pointer', function () {
+			it('should change selectedColor after clicking a color block', async function () {
+				const colorBlockStyle = await (await colorPicker.colorBlock())[1].getAttribute('style');
+				const colorBlockBgColor = colorBlockStyle.split(';')[0];
+
+				await (await colorPicker.colorBlock())[1].click();
+
+				const selectedColorStyle = await colorPicker.selectedColor.getAttribute('style');
+				const selectedColor = selectedColorStyle.split(';')[0];
+
+				expect(colorBlockBgColor).toBe(selectedColor);
+			});
+		});
+	});
+
+	describe('ColorPicker Spectrum', function () {
+		beforeEach(async () => {
+			await Page.spotlightRight();
+			await Page.spotlightSelect();
+			await browser.pause(500);
+		});
+
+		describe('5-way', function () {
+			it('should change selected color with 5-way keys', async function () {
+				await Page.spotlightDown();
+				await Page.spotlightSelect();
+				for (let i = 0; i < 20; i++) {
+					await Page.spotlightDown();
+				}
+				for (let i = 0; i < 19; i++) {
+					await Page.spotlightRight();
+				}
+				await browser.pause(500);
+
+				const spectrumIndicatorStyle = await colorPicker.spectrumIndicator.getAttribute('style');
+				const spectrumIndicator = String(spectrumIndicatorStyle.split(';').filter(attr => attr.includes('background-color'))).trim();
+				const selectedColorStyle = await colorPicker.selectedColor.getAttribute('style');
+				const selectedColor = String(selectedColorStyle.split(';').filter(attr => attr.includes('background-color'))).trim();
+
+				expect(spectrumIndicator).toBe(selectedColor);
+			});
+		});
+
+		describe('pointer', function () {
+			it('should change color when clicking on the canvas', async function () {
+				await (await colorPicker.tabgroupTabs())[1].click();
+				const canvas = await colorPicker.canvas;
+				await canvas.click();
+
+				const spectrumIndicatorStyle = await colorPicker.spectrumIndicator.getAttribute('style');
+				const spectrumIndicator = String(spectrumIndicatorStyle.split(';').filter(attr => attr.includes('background-color'))).trim();
+				const selectedColorStyle = await colorPicker.selectedColor.getAttribute('style');
+				const selectedColor = String(selectedColorStyle.split(';').filter(attr => attr.includes('background-color'))).trim();
+
+				expect(spectrumIndicator).toBe(selectedColor);
+			});
+
+			// TODO: add tests for dragging circle indicator inside canvas
+		});
+	});
+
+	describe('ColorPicker Sliders', function () {
+		beforeEach(async () => {
+			await Page.spotlightRight();
+			await Page.spotlightRight();
+			await Page.spotlightSelect();
+			await browser.pause(500);
+		});
+
+		describe('RGB Color Picker', function () {
+			it('should display Red/Green/Blue labels', async function () {
+				const firstSliderLabel = await (await colorPicker.slidersLabel())[0].getText();
+				const secondSliderLabel = await (await colorPicker.slidersLabel())[1].getText();
+				const thirdSliderLabel = await (await colorPicker.slidersLabel())[2].getText();
+
+				expect(firstSliderLabel).toBe('Red');
+				expect(secondSliderLabel).toBe('Green');
+				expect(thirdSliderLabel).toBe('Blue');
+			});
+
+			describe('5-way', function () {
+				it('should change first slider output when changing slider value', async function () {
+					await (await colorPicker.sliders())[0].moveTo();
+					await Page.spotlightSelect();
+					const initialSliderOutput =  await (await colorPicker.slidersOutput())[0].getText();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSliderOutput = await (await colorPicker.slidersOutput())[0].getText();
+
+					expect(initialSliderOutput > currentSliderOutput).toBe(true);
+				});
+
+				it('should change the background color of second and third sliders when changing first slider value', async function () {
+					const initialSecondSliderBgColor = await (await colorPicker.sliders())[1].getAttribute('style');
+					const initialThirdSliderBgColor = await (await colorPicker.sliders())[2].getAttribute('style');
+					await (await colorPicker.sliders())[0].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+
+					const currentSecondSliderBgColor = await (await colorPicker.sliders())[1].getAttribute('style');
+					const currentThirdSliderBgColor = await (await colorPicker.sliders())[2].getAttribute('style');
+
+					expect(initialSecondSliderBgColor).not.toBe(currentSecondSliderBgColor);
+					expect(initialThirdSliderBgColor).not.toBe(currentThirdSliderBgColor);
+				});
+
+				it('should change selectedColor when changing the value of first slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[0].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+
+				it('should change second slider output when changing slider value', async function () {
+					await (await colorPicker.sliders())[1].moveTo();
+					await Page.spotlightSelect();
+					const initialSliderOutput =  await (await colorPicker.slidersOutput())[1].getText();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSliderOutput = await (await colorPicker.slidersOutput())[1].getText();
+
+					expect(initialSliderOutput > currentSliderOutput).toBe(true);
+				});
+
+				it('should change the background color of first and third sliders when changing second slider value', async function () {
+					const initialSecondSliderBgColor = await (await colorPicker.sliders())[0].getAttribute('style');
+					const initialThirdSliderBgColor = await (await colorPicker.sliders())[2].getAttribute('style');
+					await (await colorPicker.sliders())[1].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+
+					const currentSecondSliderBgColor = await (await colorPicker.sliders())[0].getAttribute('style');
+					const currentThirdSliderBgColor = await (await colorPicker.sliders())[2].getAttribute('style');
+
+					expect(initialSecondSliderBgColor).not.toBe(currentSecondSliderBgColor);
+					expect(initialThirdSliderBgColor).not.toBe(currentThirdSliderBgColor);
+				});
+
+				it('should change selectedColor when changing the value of second slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[1].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+
+				it('should change third slider output when changing slider value', async function () {
+					await (await colorPicker.sliders())[2].moveTo();
+					await Page.spotlightSelect();
+					const initialSliderOutput =  await (await colorPicker.slidersOutput())[2].getText();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSliderOutput = await (await colorPicker.slidersOutput())[2].getText();
+
+					expect(initialSliderOutput > currentSliderOutput).toBe(true);
+				});
+
+				it('should change the background color of first and second sliders when changing third slider value', async function () {
+					const initialSecondSliderBgColor = await (await colorPicker.sliders())[0].getAttribute('style');
+					const initialThirdSliderBgColor = await (await colorPicker.sliders())[1].getAttribute('style');
+					await (await colorPicker.sliders())[2].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+
+					const currentSecondSliderBgColor = await (await colorPicker.sliders())[0].getAttribute('style');
+					const currentThirdSliderBgColor = await (await colorPicker.sliders())[1].getAttribute('style');
+
+					expect(initialSecondSliderBgColor).not.toBe(currentSecondSliderBgColor);
+					expect(initialThirdSliderBgColor).not.toBe(currentThirdSliderBgColor);
+				});
+
+				it('should change selectedColor when changing the value of third slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[2].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+			});
+
+			describe('pointer', function () {
+				it('should change selectedColor when changing the value of first slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[0].click();
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+
+				it('should change selectedColor when changing the value of second slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[1].click();
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+
+				it('should change selectedColor when changing the value of third slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[2].click();
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+			});
+		});
+
+		describe('HSL Color Picker', function () {
+			beforeEach(async () => {
+				// change the value of dropdown to render HSL color picker
+				await colorPicker.slidersDropdown.moveTo();
+				await Page.spotlightSelect();
+				await Page.spotlightDown();
+				await Page.spotlightSelect();
+			});
+
+			it('should render Hue/Saturation/Lightness color picker', async function () {
+				const firstSliderLabel = await (await colorPicker.slidersLabel())[0].getText();
+				const secondSliderLabel = await (await colorPicker.slidersLabel())[1].getText();
+				const thirdSliderLabel = await (await colorPicker.slidersLabel())[2].getText();
+
+				expect(firstSliderLabel).toBe('Hue');
+				expect(secondSliderLabel).toBe('Saturation');
+				expect(thirdSliderLabel).toBe('Lightness');
+			});
+
+			describe('5-way', function () {
+				it('should change first slider output when changing slider value', async function () {
+					const initialSliderOutput =  await (await colorPicker.slidersOutput())[0].getText();
+					await (await colorPicker.sliders())[0].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightRight();
+					}
+					const currentSliderOutput = await (await colorPicker.slidersOutput())[0].getText();
+
+					expect(initialSliderOutput).not.toBe(currentSliderOutput);
+				});
+
+				it('should change the background color of second and third sliders when changing first slider value', async function () {
+					const initialSecondSliderBgColor = await (await colorPicker.sliders())[1].getAttribute('style');
+					const initialThirdSliderBgColor = await (await colorPicker.sliders())[2].getAttribute('style');
+					await (await colorPicker.sliders())[0].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightRight();
+					}
+
+					const currentSecondSliderBgColor = await (await colorPicker.sliders())[1].getAttribute('style');
+					const currentThirdSliderBgColor = await (await colorPicker.sliders())[2].getAttribute('style');
+
+					expect(initialSecondSliderBgColor).not.toBe(currentSecondSliderBgColor);
+					expect(initialThirdSliderBgColor).not.toBe(currentThirdSliderBgColor);
+				});
+
+				it('should change selectedColor when changing the value of first slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[0].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightRight();
+					}
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+
+				it('should change second slider output when changing slider value', async function () {
+					await (await colorPicker.sliders())[1].moveTo();
+					await Page.spotlightSelect();
+					const initialSliderOutput =  await (await colorPicker.slidersOutput())[1].getText();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSliderOutput = await (await colorPicker.slidersOutput())[1].getText();
+
+					expect(initialSliderOutput).not.toBe(currentSliderOutput);
+				});
+
+				it('should change the background color of first and third sliders when changing second slider value', async function () {
+					const initialSecondSliderBgColor = await (await colorPicker.sliders())[0].getAttribute('style');
+					const initialThirdSliderBgColor = await (await colorPicker.sliders())[2].getAttribute('style');
+					await (await colorPicker.sliders())[1].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+
+					const currentSecondSliderBgColor = await (await colorPicker.sliders())[0].getAttribute('style');
+					const currentThirdSliderBgColor = await (await colorPicker.sliders())[2].getAttribute('style');
+
+					expect(initialSecondSliderBgColor).not.toBe(currentSecondSliderBgColor);
+					expect(initialThirdSliderBgColor).not.toBe(currentThirdSliderBgColor);
+				});
+
+				it('should change selectedColor when changing the value of second slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[1].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+
+				it('should change third slider output when changing slider value', async function () {
+					await (await colorPicker.sliders())[2].moveTo();
+					await Page.spotlightSelect();
+					const initialSliderOutput =  await (await colorPicker.slidersOutput())[2].getText();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSliderOutput = await (await colorPicker.slidersOutput())[2].getText();
+
+					expect(initialSliderOutput).not.toBe(currentSliderOutput);
+				});
+
+				it('should change the background color of first and second sliders when changing third slider value', async function () {
+					const initialSecondSliderBgColor = await (await colorPicker.sliders())[0].getAttribute('style');
+					const initialThirdSliderBgColor = await (await colorPicker.sliders())[1].getAttribute('style');
+					await (await colorPicker.sliders())[2].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+
+					const currentSecondSliderBgColor = await (await colorPicker.sliders())[0].getAttribute('style');
+					const currentThirdSliderBgColor = await (await colorPicker.sliders())[1].getAttribute('style');
+
+					expect(initialSecondSliderBgColor).not.toBe(currentSecondSliderBgColor);
+					expect(initialThirdSliderBgColor).not.toBe(currentThirdSliderBgColor);
+				});
+
+				it('should change selectedColor when changing the value of third slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[2].moveTo();
+					await Page.spotlightSelect();
+					for (let i = 0; i < 10; i++) {
+						await Page.spotlightLeft();
+					}
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+			});
+
+			describe('pointer', function () {
+				it('should change selectedColor when changing the value of first slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[0].click();
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+
+				it('should change selectedColor when changing the value of second slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[1].click();
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+
+				it('should change selectedColor when changing the value of third slider', async function () {
+					const initialSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+					await (await colorPicker.sliders())[2].click();
+					const currentSelectedColor = await colorPicker.selectedColor.getAttribute('style');
+
+					expect(initialSelectedColor).not.toBe(currentSelectedColor);
+				});
+			});
+		});
+	});
+});
diff --git a/tests/ui/specs/ColorPicker/ColorPickerPage.js b/tests/ui/specs/ColorPicker/ColorPickerPage.js
new file mode 100644
index 0000000000..a04273e172
--- /dev/null
+++ b/tests/ui/specs/ColorPicker/ColorPickerPage.js
@@ -0,0 +1,74 @@
+'use strict';
+const {element, getComponent, Page} = require('@enact/ui-test-utils/utils');
+
+const colorPicker = getComponent({component: 'ColorPicker', child: 'colorPicker'});
+
+class ColorPickerInterface {
+	constructor (id) {
+		this.id = id;
+		this.selector = `#${this.id}`;
+	}
+
+	get self () {
+		return browser.$(this.selector);
+	}
+
+	async tabgroupTabs () {
+		return await $$('.TabLayout_TabGroup_tab');
+	}
+
+	async colorBlock () {
+		return await (await this.gridColumns()).$$('.ColorPicker_ColorPickerGrid_colorBlock');
+	}
+
+	async gridColumns () {
+		return await colorPicker(this.self);
+	}
+
+	get selectedColor () {
+		return element('.ColorPicker_ColorPicker_selectedColor', browser);
+	}
+
+	get spectrumIndicator () {
+		return element('.ColorPicker_ColorPickerSpectrum_circleIndicator', browser);
+	}
+
+	get canvas () {
+		return element('.ColorPicker_ColorPickerSpectrum_gradientCanvas', browser);
+	}
+
+	async sliders () {
+		return await (await this.sliderColorPicker()).$$('.ColorPicker_ColorPickerSlider_sliderCell');
+	}
+
+	async slidersOutput () {
+		return await (await this.sliderColorPicker()).$$('.ColorPicker_ColorPickerSlider_outputText');
+	}
+
+	async slidersLabel () {
+		return await (await this.sliderColorPicker()).$$('.ColorPicker_ColorPickerSlider_labelText');
+	}
+
+	async sliderColorPicker () {
+		return await colorPicker(this.self);
+	}
+
+	get slidersDropdown () {
+		return element('.ColorPicker_ColorPickerSlider_pickerSelect', browser);
+	}
+}
+
+class ColorPickerPage extends Page {
+	constructor () {
+		super();
+		this.title = 'ColorPicker Test';
+		this.components = {};
+		this.components.colorPicker = new ColorPickerInterface('colorPicker');
+	}
+
+	async open (urlExtra) {
+		await super.open('ColorPicker-View', urlExtra);
+	}
+}
+
+module.exports = new ColorPickerPage();