diff --git a/ColorPickerPOC/ColorPickerGrid.module.less b/ColorPickerPOC/ColorPickerGrid.module.less
index f1631128d5..c9dde7c624 100644
--- a/ColorPickerPOC/ColorPickerGrid.module.less
+++ b/ColorPickerPOC/ColorPickerGrid.module.less
@@ -1,8 +1,8 @@
 // ColorPicker.module.less
 //
-@import '../styles/colors.less';
-@import '../styles/mixins.less';
-@import '../styles/variables.less';
+@import "../styles/colors.less";
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
 
 .colorPicker {
 	.colorsColumn {
diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js
index ce7c26ee1c..5e6b799055 100644
--- a/ColorPickerPOC/ColorPickerPOC.js
+++ b/ColorPickerPOC/ColorPickerPOC.js
@@ -12,7 +12,7 @@ import Skinnable from '../Skinnable';
 import TabLayout, {Tab} from '../TabLayout';
 
 import ColorPickerGrid from './ColorPickerGrid';
-import ColorPickerSlider, {ColorPickerSliderHSL} from './ColorPickerSlider'; // eslint-disable-line no-unused-vars
+import ColorPickerSlider from './ColorPickerSlider';
 import ColorPickerSpectrum from './ColorPickerSpectrum';
 import {generateOppositeColor} from './utils';
 
@@ -184,29 +184,28 @@ const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor,
 	}, [favoriteColors, onChangeColor, selectedColor]);
 
 	return (
-		<Popup open={open} position={'center'} {...rest}>
+		<Popup open={open} position="center" {...rest}>
 			<Row>
-				<Cell size={'75%'}>
-					<TabLayout css={css} orientation={'horizontal'}>
-						<Tab style={{width: ri.scaleToRem(400)}} title={'Grid'}>
+				<Cell size="75%">
+					<TabLayout className={componentsCss.pickerTabLayout} css={css} orientation="horizontal">
+						<Tab style={{width: ri.scaleToRem(400)}} title="Grid">
 							<div className={componentsCss.colorPicker}>
 								<ColorPickerGrid selectedColorHandler={setSelectedColor} />
 							</div>
 						</Tab>
-						<Tab style={{width: ri.scaleToRem(400)}} title={'Spectrum'}>
+						<Tab style={{width: ri.scaleToRem(400)}} title="Spectrum">
 							<div className={componentsCss.colorPicker}>
 								<ColorPickerSpectrum selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />
 							</div>
 						</Tab>
-						<Tab style={{width: ri.scaleToRem(400)}} title={'Sliders'}>
+						<Tab style={{width: ri.scaleToRem(400)}} title="Sliders">
 							<div className={componentsCss.colorPicker}>
 								<ColorPickerSlider selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />
-								{/* <ColorPickerSliderHSL selectedColor={selectedColor} selectedColorHandler={setSelectedColor} />*/}
 							</div>
 						</Tab>
 					</TabLayout>
 				</Cell>
-				<Cell align={'end'} size={'25%'}>
+				<Cell align="end" size="25%">
 					<Column>
 						<FavoriteColors
 							colorHandler={onChangeColor}
diff --git a/ColorPickerPOC/ColorPickerPOC.module.less b/ColorPickerPOC/ColorPickerPOC.module.less
index 0dcb981d00..172da7a4a3 100644
--- a/ColorPickerPOC/ColorPickerPOC.module.less
+++ b/ColorPickerPOC/ColorPickerPOC.module.less
@@ -1,4 +1,8 @@
-@import '../styles/mixins.less';
+@import "../styles/mixins.less";
+
+.pickerTabLayout {
+	align-items: center;
+}
 
 .colorPicker {
 	display: flex;
@@ -16,7 +20,6 @@
 		height: 240px;
 		margin-inline: 0;
 		transition: transform .2s;
-		width: 95%;
 
 		.selectedColorIcon {
 			transition: transform .2s;
diff --git a/ColorPickerPOC/ColorPickerSlider.js b/ColorPickerPOC/ColorPickerSlider.js
index 7328dd3177..50b5727fa8 100644
--- a/ColorPickerPOC/ColorPickerSlider.js
+++ b/ColorPickerPOC/ColorPickerSlider.js
@@ -1,8 +1,9 @@
-import {Cell, Row} from '@enact/ui/Layout';
+import Layout, {Cell, Row} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
-import {useCallback, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 
 import Slider from '../Slider';
+import SwitchItem from '../SwitchItem';
 
 import {generateOppositeColor, hexToHSL, hexToRGB, hslToHex, hslToRGBString, rgbObjectToHex} from './utils';
 
@@ -59,12 +60,18 @@ const lightnessGradient = (hue, saturation) => {
 	hsla(${hue}, ${saturation}%, 100%, 1))`;
 };
 
-const ColorPickerSlider = ({selectedColor, selectedColorHandler, ...props}) => {
+const ColorPickerSliderRGB = ({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);
 	}, []);
@@ -82,22 +89,24 @@ const ColorPickerSlider = ({selectedColor, selectedColorHandler, ...props}) => {
 	}, [localBlue, localGreen, localRed, selectedColorHandler]);
 
 	return (
-		<div {...props} className={componentCss.sliderContainer}>
+		<Layout {...props}>
 			<Cell>
 				<Cell className={componentCss.labelText}>Red</Cell>
 				<Row>
 					<Cell
 						className={componentCss.sliderCell}
-						size="80%"
+						size="70%"
 						style={{backgroundImage: `linear-gradient(to right, rgb(0,${localGreen},${localBlue}), rgb(255,${localGreen},${localBlue}))`}}
 					>
 						<Slider
+							activateOnSelect
 							css={componentCss}
 							max={255}
 							min={0}
 							noFill
 							onBlur={changeSelectedColor}
 							onChange={changeValueRed}
+							onKeyUp={changeSelectedColor}
 							onPointerUp={changeSelectedColor}
 							style={{
 								'--sand-slider-knob-border-color': generateOppositeColor(rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})),
@@ -107,26 +116,24 @@ const ColorPickerSlider = ({selectedColor, selectedColorHandler, ...props}) => {
 							value={localRed}
 						/>
 					</Cell>
-					<Cell
-						className={componentCss.outputText}
-					>{localRed}</Cell>
+					<Cell className={componentCss.outputText} size="20%">{localRed}</Cell>
 				</Row>
-			</Cell>
-			<Cell className={componentCss.cellElement}>
 				<Cell className={componentCss.labelText}>Green</Cell>
 				<Row>
 					<Cell
 						className={componentCss.sliderCell}
-						size="80%"
+						size="70%"
 						style={{backgroundImage: `linear-gradient(to right, rgb(${localRed},0,${localBlue}), rgb(${localRed},255,${localBlue}))`}}
 					>
 						<Slider
+							activateOnSelect
 							css={componentCss}
 							max={255}
 							min={0}
 							noFill
 							onBlur={changeSelectedColor}
 							onChange={changeValueGreen}
+							onKeyUp={changeSelectedColor}
 							onPointerUp={changeSelectedColor}
 							style={{
 								'--sand-slider-knob-border-color': generateOppositeColor(rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})),
@@ -136,24 +143,24 @@ const ColorPickerSlider = ({selectedColor, selectedColorHandler, ...props}) => {
 							value={localGreen}
 						/>
 					</Cell>
-					<Cell className={componentCss.outputText}>{localGreen}</Cell>
+					<Cell className={componentCss.outputText} size="20%">{localGreen}</Cell>
 				</Row>
-			</Cell>
-			<Cell className={componentCss.cellElement}>
 				<Cell className={componentCss.labelText}>Blue</Cell>
 				<Row>
 					<Cell
 						className={componentCss.sliderCell}
-						size="80%"
+						size="70%"
 						style={{backgroundImage: `linear-gradient(to right, rgb(${localRed},${localGreen},0), rgb(${localRed},${localGreen},255))`}}
 					>
 						<Slider
+							activateOnSelect
 							css={componentCss}
 							max={255}
 							min={0}
 							noFill
 							onBlur={changeSelectedColor}
 							onChange={changeValueBlue}
+							onKeyUp={changeSelectedColor}
 							onPointerUp={changeSelectedColor}
 							style={{
 								'--sand-slider-knob-border-color': generateOppositeColor(rgbObjectToHex({red: localRed, green: localGreen, blue: localBlue})),
@@ -163,10 +170,10 @@ const ColorPickerSlider = ({selectedColor, selectedColorHandler, ...props}) => {
 							value={localBlue}
 						/>
 					</Cell>
-					<Cell className={componentCss.outputText}>{localBlue}</Cell>
+					<Cell className={componentCss.outputText} size="20%">{localBlue}</Cell>
 				</Row>
 			</Cell>
-		</div>
+		</Layout>
 	);
 };
 
@@ -177,6 +184,12 @@ const ColorPickerSliderHSL = ({selectedColor, selectedColorHandler, ...props}) =
 	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);
 	}, []);
@@ -194,91 +207,121 @@ const ColorPickerSliderHSL = ({selectedColor, selectedColorHandler, ...props}) =
 	}, [hue, saturation, lightness, selectedColorHandler]);
 
 	return (
-		<div {...props} className={componentCss.sliderContainer}>
+		<Layout {...props}>
 			<Cell>
-				<Cell className={componentCss.labelText}>Hue</Cell>
-				<Row>
-					<Cell
-						className={componentCss.sliderCell}
-						size="80%"
-						style={{backgroundImage: hueGradient(saturation, lightness)}}
-					>
-						<Slider
-							css={componentCss}
-							max={359}
-							min={0}
-							noFill
-							onBlur={changeSelectedColor}
-							onChange={changeValueHue}
-							onPointerUp={changeSelectedColor}
-							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}
-					>{hue}</Cell>
-				</Row>
+				<Cell>
+					<Cell className={componentCss.labelText}>Hue</Cell>
+					<Row>
+						<Cell
+							className={componentCss.sliderCell}
+							size="70%"
+							style={{backgroundImage: hueGradient(saturation, lightness)}}
+						>
+							<Slider
+								activateOnSelect
+								css={componentCss}
+								max={360}
+								min={0}
+								noFill
+								onBlur={changeSelectedColor}
+								onChange={changeValueHue}
+								onKeyUp={changeSelectedColor}
+								onPointerUp={changeSelectedColor}
+								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>
+						<Cell
+							className={componentCss.sliderCell}
+							size="70%"
+							style={{backgroundImage: `linear-gradient(to right, hsl(${hue}, 0%, ${lightness}%), hsl(${hue}, 100%, ${lightness}%))`}}
+						>
+							<Slider
+								activateOnSelect
+								css={componentCss}
+								max={100}
+								min={0}
+								noFill
+								onBlur={changeSelectedColor}
+								onChange={changeValueSaturation}
+								onKeyUp={changeSelectedColor}
+								onPointerUp={changeSelectedColor}
+								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>
+						<Cell
+							className={componentCss.sliderCell}
+							size="70%"
+							style={{backgroundImage: lightnessGradient(hue, saturation)}}
+						>
+							<Slider
+								activateOnSelect
+								css={componentCss}
+								max={100}
+								min={0}
+								noFill
+								onBlur={changeSelectedColor}
+								onChange={changeValueLightness}
+								onKeyUp={changeSelectedColor}
+								onPointerUp={changeSelectedColor}
+								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>
-			<Cell className={componentCss.cellElement}>
-				<Cell className={componentCss.labelText}>Saturation</Cell>
-				<Row>
-					<Cell
-						className={componentCss.sliderCell}
-						size="80%"
-						style={{backgroundImage: `linear-gradient(to right, hsl(${hue}, 0%, ${lightness}%), hsl(${hue}, 100%, ${lightness}%))`}}
-					>
-						<Slider
-							css={componentCss}
-							max={100}
-							min={0}
-							noFill
-							onBlur={changeSelectedColor}
-							onChange={changeValueSaturation}
-							onPointerUp={changeSelectedColor}
-							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.outputTextPercent}>{saturation}%</Cell>
-				</Row>
-			</Cell>
-			<Cell className={componentCss.cellElement}>
-				<Cell className={componentCss.labelText}>Lightness</Cell>
-				<Row>
-					<Cell
-						className={componentCss.sliderCell}
-						size="80%"
-						style={{backgroundImage: lightnessGradient(hue, saturation)}}
-					>
-						<Slider
-							css={componentCss}
-							max={100}
-							min={0}
-							noFill
-							onBlur={changeSelectedColor}
-							onChange={changeValueLightness}
-							onPointerUp={changeSelectedColor}
-							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.outputTextPercent}>{lightness}%</Cell>
-				</Row>
-			</Cell>
-		</div>
+		</Layout>
+	);
+};
+
+const ColorPickerSlider = ({selectedColor, selectedColorHandler, ...props}) => {
+	const [pickerType, setPickerType] = useState(false);
+
+	const handleSwitch = useCallback(() => {
+		setPickerType(type => !type);
+	}, [setPickerType]);
+
+	return (
+		<Cell {...props} className={componentCss.switchCell}>
+			<SwitchItem
+				onToggle={handleSwitch}
+				size="small"
+				value={pickerType}
+			>
+				{pickerType ? 'HSL Picker' : 'RGB picker'}
+			</SwitchItem>
+			{pickerType ?
+				<ColorPickerSliderHSL selectedColor={selectedColor} selectedColorHandler={selectedColorHandler} />				:
+				<ColorPickerSliderRGB selectedColor={selectedColor} selectedColorHandler={selectedColorHandler} />
+			}
+		</Cell>
 	);
 };
 
@@ -292,8 +335,14 @@ ColorPickerSliderHSL.propTypes = {
 	selectedColorHandler: PropTypes.func
 };
 
+ColorPickerSliderRGB.propTypes = {
+	selectedColor: PropTypes.string,
+	selectedColorHandler: PropTypes.func
+};
+
 export {
 	ColorPickerSlider,
-	ColorPickerSliderHSL
+	ColorPickerSliderHSL,
+	ColorPickerSliderRGB
 };
 export default ColorPickerSlider;
diff --git a/ColorPickerPOC/ColorPickerSlider.module.less b/ColorPickerPOC/ColorPickerSlider.module.less
index 2ba045213b..6c74cd8175 100644
--- a/ColorPickerPOC/ColorPickerSlider.module.less
+++ b/ColorPickerPOC/ColorPickerSlider.module.less
@@ -1,53 +1,46 @@
-.cellElement {
-  margin-top: 21px;
+@import "../styles/mixins.less";
+
+.switchCell {
+	margin-top: -63px;
+	padding: 0 30px;
 }
 
 .labelText {
-  font-size: 42px;
-  margin-bottom: 12px;
+	font-size: 42px;
+	margin: 9px 0;
 }
 
 .outputText {
-  align-content: center;
-  background-color: #eeeeee;
-  border-radius: 12px;
-  color: #444444;
-  display: grid;
-  justify-content: end;
-  margin-left: 30px;
-  padding-right: 21px;
-}
-
-.outputTextPercent {
-  align-content: center;
-  background-color: #eeeeee;
-  border-radius: 12px;
-  color: #444444;
-  display: grid;
-  justify-content: end;
-  margin-left: 30px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #eeeeee;
+	border-radius: 12px;
+	margin-left: 30px;
 }
 
 .slider {
-  --sand-progress-bg-color-rgb: transparent;
-  border-radius: 99px;
-  height: 42px;
-  margin-left: 18px;
-  margin-right: 18px;
+	--sand-progress-bg-color-rgb: transparent;
+	border-radius: 99px;
+	height: 33px;
+	margin-left: 18px;
+	margin-right: 18px;
 
-  .knob {
-    &::before {
-      border-radius: 99px;
-      height: 120px;
-      width: 120px;
-    }
-  }
-}
+	.focus({
+		.knob {
+			transform: scale(1.1);
+		}
+	});
 
-.sliderCell {
-  border-radius: 99px;
+	.knob {
+		&::before {
+			border-radius: 99px;
+			height: 102px;
+			width: 102px;
+		}
+	}
 }
 
-.sliderContainer {
-  width: 900px;
+.sliderCell {
+	border-radius: 99px;
 }
diff --git a/ColorPickerPOC/ColorPickerSpectrum.module.less b/ColorPickerPOC/ColorPickerSpectrum.module.less
index 6dca72af1a..47fddea143 100644
--- a/ColorPickerPOC/ColorPickerSpectrum.module.less
+++ b/ColorPickerPOC/ColorPickerSpectrum.module.less
@@ -1,8 +1,8 @@
 // ColorPickerSpectrum.module.less
 //
-@import '../styles/colors.less';
-@import '../styles/mixins.less';
-@import '../styles/variables.less';
+@import "../styles/colors.less";
+@import "../styles/mixins.less";
+@import "../styles/variables.less";
 
 .colorPicker {
 	position: relative;
diff --git a/ColorPickerPOC/utils.js b/ColorPickerPOC/utils.js
index 97163dfb1b..c21780a9de 100644
--- a/ColorPickerPOC/utils.js
+++ b/ColorPickerPOC/utils.js
@@ -107,7 +107,7 @@ const hslToHex = ({h, s, l}) => {
 		r = 0; g = x; b = c;
 	} else if (240 <= h && h < 300) {
 		r = x; g = 0; b = c;
-	} else if (300 <= h && h < 360) {
+	} else if (300 <= h && h <= 360) {
 		r = c; g = 0; b = x;
 	}
 	// Having obtained RGB, convert channels to hex
@@ -152,7 +152,7 @@ const hslToRGBString = ({h, s, l}) => {
 		r = 0; g = x; b = c;
 	} else if (240 <= h && h < 300) {
 		r = x; g = 0; b = c;
-	} else if (300 <= h && h < 360) {
+	} else if (300 <= h && h <= 360) {
 		r = c; g = 0; b = x;
 	}