diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 65a3b2f..cb5dfaf 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -15,7 +15,7 @@
                 VerticalAlignment="Top"
                 Orientation="Horizontal"
                 Spacing="20">
-                <ColorView ColorSpectrumShape="Ring" />
+                <ColorView Name="Test" ColorSpectrumShape="Ring" />
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
@@ -23,9 +23,14 @@
                 VerticalAlignment="Top"
                 Orientation="Horizontal">
                 <ColorView
+                    Name="SimpleColorViewTest"
                     Theme="{StaticResource SimpleColorView}"
                     IsAlphaVisible="True"
                     HsvColor="hsv(120,11%,10%)" />
+                <StackPanel>
+                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
+                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
+                </StackPanel>
             </StackPanel>
             <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <ColorPicker ColorSpectrumShape="Ring">
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index c4a05e4..514af34 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -579,7 +579,7 @@
                                     AutomationProperties.Name="Third Component"
                                     ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Horizontal" />
 
@@ -591,7 +591,7 @@
                                     AutomationProperties.Name="Alpha Component"
                                     ColorComponent="Alpha"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsVisible="{TemplateBinding IsAlphaVisible}"
                                     IsRoundingEnabled="True"
@@ -619,20 +619,20 @@
                                         <TextBox
                                             x:Name="PART_HexTextBox"
                                             Classes="Small"
-                                            AutomationProperties.Name="Hexadecimal Color"
                                             InnerLeftContent="#"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                             MaxLength="8" />
-                                        <TextBox
-                                            x:Name="PART_HsvaTextBox"
-                                            Classes="Small"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
-                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                                         <TextBox
                                             x:Name="PART_RgbaTextBox"
                                             Classes="Small"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
                                             Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                        <TextBox
+                                            x:Name="PART_HsvaTextBox"
+                                            Classes="Small"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                                     </Panel>
 
                                     <NumericUpDown
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index fb7429f..f0805f6 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -605,7 +605,7 @@
                         AutomationProperties.Name="Third Component"
                         ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
                         ColorModel="Hsva"
-                        HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                         IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                         Orientation="Horizontal" />
 
@@ -617,7 +617,7 @@
                         AutomationProperties.Name="Alpha Component"
                         ColorComponent="Alpha"
                         ColorModel="Hsva"
-                        HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                         IsEnabled="{TemplateBinding IsAlphaEnabled}"
                         IsVisible="{TemplateBinding IsAlphaVisible}"
                         IsRoundingEnabled="True"
@@ -645,20 +645,20 @@
                             <TextBox
                                 x:Name="PART_HexTextBox"
                                 Classes="Small"
-                                AutomationProperties.Name="Hexadecimal Color"
                                 InnerLeftContent="#"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                 MaxLength="8" />
-                            <TextBox
-                                x:Name="PART_HsvaTextBox"
-                                Classes="Small"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
-                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                             <TextBox
                                 x:Name="PART_RgbaTextBox"
                                 Classes="Small"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
                                 Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                            <TextBox
+                                x:Name="PART_HsvaTextBox"
+                                Classes="Small"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                         </Panel>
 
                         <NumericUpDown
diff --git a/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs b/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
index 7e4364c..18badbe 100644
--- a/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
+++ b/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
@@ -12,20 +12,21 @@ public class ColorToTextConverter : IValueConverter
 {
     public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
-        return value is Color color ? $"{color.R},{color.G},{color.B}" : AvaloniaProperty.UnsetValue;
+        return value is Color color ? $"{color.R},{color.G},{color.B},{color.A}" : AvaloniaProperty.UnsetValue;
     }
 
     public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');
-        if (parts.Length != 3 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+        if (parts.Length != 4 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
 
         if (byte.TryParse(parts[0], NumberStyles.Integer, CultureInfo.InvariantCulture, out var r) &&
             byte.TryParse(parts[1], NumberStyles.Integer, CultureInfo.InvariantCulture, out var g) &&
-            byte.TryParse(parts[2], NumberStyles.Integer, CultureInfo.InvariantCulture, out var b))
+            byte.TryParse(parts[2], NumberStyles.Integer, CultureInfo.InvariantCulture, out var b) &&
+            byte.TryParse(parts[3], NumberStyles.Integer, CultureInfo.InvariantCulture, out var a))
         {
-            return new Color(0xFF, r, g, b);
+            return new Color(a, r, g, b);
         }
 
         return BindingOperations.DoNothing;
diff --git a/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs b/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
index 4fd9a85..6c37588 100644
--- a/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
+++ b/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
@@ -13,7 +13,7 @@ public class HsvColorToTextConverter : IValueConverter
     public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         return value is HsvColor hsvColor
-            ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)}"
+            ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)},{Math.Round(hsvColor.A * 100)}"
             : AvaloniaProperty.UnsetValue;
     }
 
@@ -21,13 +21,14 @@ public class HsvColorToTextConverter : IValueConverter
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');
-        if (parts.Length != 3 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+        if (parts.Length != 4 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
 
         if (double.TryParse(parts[0], NumberStyles.Float, CultureInfo.InvariantCulture, out var h) &&
             double.TryParse(parts[1], NumberStyles.Float, CultureInfo.InvariantCulture, out var s) &&
-            double.TryParse(parts[2], NumberStyles.Float, CultureInfo.InvariantCulture, out var v))
+            double.TryParse(parts[2], NumberStyles.Float, CultureInfo.InvariantCulture, out var v) &&
+            double.TryParse(parts[3], NumberStyles.Float, CultureInfo.InvariantCulture, out var a))
         {
-            return new HsvColor(1, h, s / 100, v / 100);
+            return new HsvColor(a / 100, h, s / 100, v / 100);
         }
 
         return BindingOperations.DoNothing;