diff --git a/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
index dcbfa71..4a12060 100644
--- a/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
@@ -1,8 +1,10 @@
 using System.Globalization;
+using System.Threading.Tasks;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Media;
+using Semi.Avalonia.Demo.Converters;
 
 namespace Semi.Avalonia.Demo.Controls;
 
@@ -10,6 +12,7 @@ public class ColorDetailControl : TemplatedControl
 {
     public const string KEY_ResourceKey = "ResourceKey";
     public const string KEY_Hex = "Hex";
+    public const string KEY_Hex2 = "Hex2";
     public const string KEY_Opacity = "Opacity";
     public const string KEY_ColorResourceKey = "ColorResourceKey";
 
@@ -51,6 +54,17 @@ public class ColorDetailControl : TemplatedControl
         private set => SetAndRaise(HexProperty, ref _hex, value);
     }
 
+    private string? _hex2;
+
+    public static readonly DirectProperty<ColorDetailControl, string?> Hex2Property =
+        AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(Hex2), o => o.Hex2);
+
+    public string? Hex2
+    {
+        get => _hex2;
+        set => SetAndRaise(Hex2Property, ref _hex2, value);
+    }
+
     public static readonly DirectProperty<ColorDetailControl, string?> OpacityNumberProperty =
         AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(nameof(OpacityNumber), o => o.OpacityNumber);
 
@@ -70,34 +84,30 @@ public class ColorDetailControl : TemplatedControl
     private void OnBackgroundChanged(AvaloniaPropertyChangedEventArgs args)
     {
         var color = args.GetNewValue<IBrush>();
-        if (color is ISolidColorBrush b)
+        if (color is ISolidColorBrush brush)
         {
-            Hex = b.Color.ToString().ToUpperInvariant();
-            OpacityNumber = b.Opacity.ToString(CultureInfo.InvariantCulture);
+            var hex1 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+            var hex2 = ColorConverter.ToHex.Convert(brush.Color, typeof(string), true, CultureInfo.InvariantCulture);
+            Hex = hex1 as string;
+            Hex2 = hex2 as string;
+            OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
         }
     }
 
-    public async void Copy(object o)
+    public async Task Copy(object o)
     {
         string? text = null;
         if (o is string s)
         {
-            switch (s)
+            text = s switch
             {
-                case KEY_ResourceKey:
-                    text = ResourceKey;
-                    break;
-                case KEY_Hex:
-                    text = Hex;
-                    break;
-                case KEY_Opacity:
-                    text = OpacityNumber;
-                    break;
-                case KEY_ColorResourceKey:
-                    text = ColorResourceKey;
-                    break;
-                default: text = string.Empty; break;
-            }
+                KEY_ResourceKey => ResourceKey,
+                KEY_Hex => Hex,
+                KEY_Hex2 => Hex2,
+                KEY_Opacity => OpacityNumber,
+                KEY_ColorResourceKey => ColorResourceKey,
+                _ => string.Empty
+            };
         }
 
         var toplevel = TopLevel.GetTopLevel(this);
diff --git a/demo/Semi.Avalonia.Demo/Converters/ColorConverter.cs b/demo/Semi.Avalonia.Demo/Converters/ColorConverter.cs
new file mode 100644
index 0000000..6b917f1
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Converters/ColorConverter.cs
@@ -0,0 +1,22 @@
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Converters;
+
+public static class ColorConverter
+{
+    public static readonly IValueConverter ToHex =
+        new FuncValueConverter<object, bool, string>(
+            (obj, withAlpha) =>
+                obj switch
+                {
+                    Color color => withAlpha
+                        ? $"#{color.A:X2}{color.R:X2}{color.G:X2}{color.B:X2}"
+                        : $"#{color.R:X2}{color.G:X2}{color.B:X2}",
+                    ISolidColorBrush brush => withAlpha
+                        ? $"#{brush.Color.A:X2}{brush.Color.R:X2}{brush.Color.G:X2}{brush.Color.B:X2}"
+                        : $"#{brush.Color.R:X2}{brush.Color.G:X2}{brush.Color.B:X2}",
+                    _ => string.Empty
+                }
+        );
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
index 9b236df..099b0b5 100644
--- a/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml
@@ -4,6 +4,7 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
              xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
+             xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
              mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
              x:DataType="vm:HighContrastDemoViewModel"
              x:CompileBindings="True"
@@ -277,7 +278,8 @@
                                         <SelectableTextBlock
                                             Margin="12 0"
                                             VerticalAlignment="Center"
-                                            Text="{Binding Hex}" />
+                                            Text="{Binding Brush,
+                                                Converter={x:Static cvt:ColorConverter.ToHex},ConverterParameter={x:False}}" />
                                     </DataTemplate>
                                 </DataGridTemplateColumn.CellTemplate>
                             </DataGridTemplateColumn>
diff --git a/demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml b/demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml
index ccfda64..17626a3 100644
--- a/demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ColorDetailControl.axaml
@@ -16,7 +16,7 @@
                         HorizontalAlignment="Stretch"
                         Background="{TemplateBinding Background}"
                         CornerRadius="6" />
-                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *">
+                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *, *">
                         <!--  Row 0-1-2 ResourceKey  -->
                         <TextBlock
                             Grid.Column="0"
@@ -47,7 +47,7 @@
                             Grid.Row="2"
                             Grid.Column="0"
                             VerticalAlignment="Center"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
                             Text="{TemplateBinding ColorResourceKey}" />
                         <Button
                             Grid.Row="2"
@@ -56,7 +56,7 @@
                             Padding="8"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
                             CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            IsVisible="{TemplateBinding ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
                             Theme="{DynamicResource BorderlessButton}">
                             <PathIcon
                                 Theme="{DynamicResource InnerPathIcon}"
@@ -64,7 +64,7 @@
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
 
-                        <!--  Row 3-4 HEX  -->
+                        <!--  Row 3-4-5 HEX  -->
                         <TextBlock
                             Grid.Row="3"
                             Grid.Column="0"
@@ -72,7 +72,7 @@
                             Margin="4,8,0,0"
                             VerticalAlignment="Center"
                             Classes="Tertiary"
-                            Text="ARGB" />
+                            Text="Hex" />
                         <SelectableTextBlock
                             Grid.Row="4"
                             Grid.Column="0"
@@ -91,23 +91,41 @@
                                 Data="{StaticResource SemiIconCopy}"
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
-
-                        <!--  Row 5-6 Opacity  -->
-                        <TextBlock
+                        <SelectableTextBlock
                             Grid.Row="5"
                             Grid.Column="0"
+                            VerticalAlignment="Center"
+                            Text="{TemplateBinding Hex2}" />
+                        <Button
+                            Grid.Row="5"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Padding="8"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_Hex2}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Theme="{DynamicResource InnerPathIcon}"
+                                Data="{StaticResource SemiIconCopy}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+
+                        <!--  Row 6-7 Opacity  -->
+                        <TextBlock
+                            Grid.Row="6"
+                            Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Margin="4,8,0,0"
                             VerticalAlignment="Center"
                             Classes="Tertiary"
                             Text="Opacity" />
                         <SelectableTextBlock
-                            Grid.Row="6"
+                            Grid.Row="7"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             Text="{TemplateBinding OpacityNumber}" />
                         <Button
-                            Grid.Row="6"
+                            Grid.Row="7"
                             Grid.Column="1"
                             Classes="Tertiary"
                             Padding="8"
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs
index 7e35e7f..1ddb8e0 100644
--- a/demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs
@@ -33,7 +33,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             {
                 ResourceKey = "WindowColor",
                 Brush = new SolidColorBrush(Color.Parse("#202020")),
-                Hex = "#FF202020",
                 Description = "Background of pages, panes, popups, and windows.",
                 PairWith = "WindowTextColor"
             },
@@ -41,7 +40,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             {
                 ResourceKey = "WindowTextColor",
                 Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
-                Hex = "WHITE",
                 Description = "Headings, body copy, lists, placeholder text, app and window borders.",
                 PairWith = "WindowColor"
             },
@@ -49,7 +47,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             {
                 ResourceKey = "HotlightColor",
                 Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
-                Hex = "#FF75E9FC",
                 Description = "Hyperlinks.",
                 PairWith = "WindowColor"
             },
@@ -57,7 +54,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             {
                 ResourceKey = "GrayTextColor",
                 Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
-                Hex = "#FFA6A6A6",
                 Description = "Inactive (disabled) UI.",
                 PairWith = "WindowColor"
             },
@@ -65,7 +61,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             {
                 ResourceKey = "HighlightTextColor",
                 Brush = new SolidColorBrush(Color.Parse("#263B50")),
-                Hex = "#FF263B50",
                 Description =
                     "Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
                 PairWith = "HighlightColor"
@@ -74,7 +69,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             {
                 ResourceKey = "HighlightColor",
                 Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
-                Hex = "#FF8EE3F0",
                 Description =
                     "Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
                 PairWith = "HighlightTextColor"
@@ -83,7 +77,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             {
                 ResourceKey = "ButtonTextColor",
                 Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
-                Hex = "WHITE",
                 Description = "Foreground color for buttons and any UI that can be interacted with.",
                 PairWith = "ButtonFaceColor"
             },
@@ -91,7 +84,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             {
                 ResourceKey = "ButtonFaceColor",
                 Brush = new SolidColorBrush(Color.Parse("#202020")),
-                Hex = "#FF202020",
                 Description = "Background color for buttons and any UI that can be interacted with.",
                 PairWith = "ButtonTextColor"
             },
@@ -111,7 +103,6 @@ public partial class HighContrastDemoViewModel : ObservableObject
             if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
             {
                 colorResource.Brush = new SolidColorBrush(color);
-                colorResource.Hex = color.ToString().ToUpperInvariant();
             }
         }
     }
@@ -131,7 +122,6 @@ public partial class ColorResource : ObservableObject
 {
     [ObservableProperty] private string? _resourceKey;
     [ObservableProperty] private SolidColorBrush? _brush;
-    [ObservableProperty] private string? _hex;
     [ObservableProperty] private string? _description;
     [ObservableProperty] private string? _pairWith;
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
index ac572b4..ab68f6e 100644
--- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
@@ -1,11 +1,13 @@
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
+using System.Globalization;
 using Avalonia.Controls;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
 using Semi.Avalonia.Tokens.Palette;
+using Semi.Avalonia.Demo.Converters;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
@@ -212,7 +214,8 @@ public class ColorItemViewModel : ObservableObject
         ColorDisplayName = colorDisplayName;
         Brush = brush;
         ResourceKey = resourceKey;
-        Hex = brush.ToString().ToUpperInvariant();
+        var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+        Hex = hex as string ?? string.Empty;
         if ((light && index < 5) || (!light && index >= 5))
         {
             TextBrush = Brushes.Black;