diff --git a/packages/components/src/slider-control/slider/hook.ts b/packages/components/src/slider-control/slider/hook.ts
index 0067304fa62c7..a7ea069545c37 100644
--- a/packages/components/src/slider-control/slider/hook.ts
+++ b/packages/components/src/slider-control/slider/hook.ts
@@ -38,8 +38,8 @@ export function useSlider(
 		min = 0,
 		size = 'default',
 		style,
-		thumbColor = COLORS.admin.theme,
-		trackColor = COLORS.admin.theme,
+		thumbColor = COLORS.ui.theme,
+		trackColor = COLORS.ui.theme,
 		trackBackgroundColor = CONFIG.controlBackgroundDimColor,
 		value: valueProp,
 		...otherProps
diff --git a/packages/components/src/slider-control/styles.ts b/packages/components/src/slider-control/styles.ts
index 89f6f03ebb24c..3aa330187a53c 100644
--- a/packages/components/src/slider-control/styles.ts
+++ b/packages/components/src/slider-control/styles.ts
@@ -200,12 +200,10 @@ export const marks = css`
 `;
 
 const markFill = ( { disabled, isFilled }: MarkProps ) => {
-	let backgroundColor = isFilled
-		? COLORS.admin.theme
-		: COLORS.lightGray[ 600 ];
+	let backgroundColor = isFilled ? COLORS.ui.theme : COLORS.gray[ 300 ];
 
 	if ( disabled ) {
-		backgroundColor = COLORS.lightGray[ 800 ];
+		backgroundColor = COLORS.gray[ 400 ];
 	}
 
 	return css( { backgroundColor } );
@@ -225,14 +223,14 @@ export const mark = ( markProps: MarkProps ) => {
 
 const markLabelFill = ( { isFilled }: MarkProps ) => {
 	return css( {
-		color: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],
+		color: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],
 	} );
 };
 
 export const markLabel = ( markProps: MarkProps ) => {
 	return css`
 		box-sizing: border-box;
-		color: ${ COLORS.lightGray[ 600 ] };
+		color: ${ COLORS.gray[ 300 ] };
 		left: 0;
 		font-size: 11px;
 		position: absolute;
diff --git a/packages/components/src/slider-control/types.ts b/packages/components/src/slider-control/types.ts
index eb47e28155b70..6b2abbfe5011d 100644
--- a/packages/components/src/slider-control/types.ts
+++ b/packages/components/src/slider-control/types.ts
@@ -24,7 +24,7 @@ export type SliderColors = {
 	/**
 	 * Allows customization of the thumb's color.
 	 *
-	 * @default COLORS.admin.theme
+	 * @default COLORS.ui.theme
 	 */
 	thumbColor?: CSSProperties[ 'color' ];
 	/**
@@ -32,7 +32,7 @@ export type SliderColors = {
 	 * is the portion of the Slider's track representing progress or the actual
 	 * value selected.
 	 *
-	 * @default COLORS.admin.theme
+	 * @default COLORS.ui.theme
 	 */
 	trackColor?: CSSProperties[ 'color' ];
 	/**