diff --git a/.changeset/yellow-colts-deny.md b/.changeset/yellow-colts-deny.md
new file mode 100644
index 0000000..6471119
--- /dev/null
+++ b/.changeset/yellow-colts-deny.md
@@ -0,0 +1,6 @@
+---
+"rangu": patch
+---
+
+- fix swatch picker bg color
+- fix unsupported formats bug
diff --git a/src/color-picker/ColorPicker.stories.tsx b/src/color-picker/ColorPicker.stories.tsx
index 47d8ef7..42d245b 100644
--- a/src/color-picker/ColorPicker.stories.tsx
+++ b/src/color-picker/ColorPicker.stories.tsx
@@ -56,7 +56,13 @@ const ExampleColorPicker = ({ color }: { color: string }) => {
 				<Rangu.EyeDropper />
 				<Rangu.InputFields withLabels />
 
-				<span>Final Color : {value}</span>
+				<span
+					style={{
+						fontSize: "0.75rem",
+					}}
+				>
+					Final Color : {value}
+				</span>
 			</div>
 		</Rangu.Root>
 	);
diff --git a/src/color-picker/index.tsx b/src/color-picker/index.tsx
index c0cb509..6f18b90 100644
--- a/src/color-picker/index.tsx
+++ b/src/color-picker/index.tsx
@@ -30,13 +30,13 @@ const RanguColorPicker = (props: RanguColorPickerProps) => {
 
 	// For initial render
 	React.useEffect(() => {
-		onChange(parseColor(value).toFormat(outputFormat).toString());
+		onChange(parseColor(value).toString(outputFormat));
 	}, [onChange, outputFormat, value]);
 
 	const onChangeHandler = React.useCallback(
 		(value: Color) => {
 			setColor(value);
-			onChange(value.toFormat(outputFormat).toString());
+			onChange(value.toString(outputFormat));
 		},
 		[onChange, outputFormat],
 	);
diff --git a/src/swatch-picker/index.tsx b/src/swatch-picker/index.tsx
index bbcacea..193cf30 100644
--- a/src/swatch-picker/index.tsx
+++ b/src/swatch-picker/index.tsx
@@ -58,7 +58,7 @@ const RanguSwatchPicker = React.forwardRef<
 						"transition-transform duration-300 ease-in-out",
 					)}
 					style={{
-						backgroundColor: color.toString(outputFormat),
+						backgroundColor: color.toString("rgba"),
 						borderColor: getContrastColor(color.toString(outputFormat)),
 					}}
 				>