diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
index 15e5ca1655..ac1531fe7a 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
@@ -9,6 +9,8 @@
     <converters:ToBrushConverter x:Key="ToBrush" />
     <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/>
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
+    <x:Double x:Key="AccentColorSectionWidth">80</x:Double>
+    <x:Double x:Key="AccentColorSectionHeight">40</x:Double>
   </Styles.Resources>
 
   <Style Selector="ColorPreviewer">
@@ -19,8 +21,8 @@
         <Grid ColumnDefinitions="Auto,*,Auto">
           <!-- Left accent colors -->
           <Grid Grid.Column="0"
-                Height="40"
-                Width="80"
+                Height="{StaticResource AccentColorSectionHeight}"
+                Width="{StaticResource AccentColorSectionWidth}"
                 ColumnDefinitions="*,*"
                 Margin="0,0,-10,0"
                 VerticalAlignment="Center"
@@ -42,8 +44,8 @@
           </Grid>
           <!-- Right accent colors -->
           <Grid Grid.Column="2"
-                Height="40"
-                Width="80"
+                Height="{StaticResource AccentColorSectionHeight}"
+                Width="{StaticResource AccentColorSectionWidth}"
                 ColumnDefinitions="*,*"
                 Margin="-10,0,0,0"
                 VerticalAlignment="Center"
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
index cb764a738c..5ed148fafb 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
@@ -9,6 +9,8 @@
     <converters:ToBrushConverter x:Key="ToBrush" />
     <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/>
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
+    <x:Double x:Key="AccentColorSectionWidth">80</x:Double>
+    <x:Double x:Key="AccentColorSectionHeight">40</x:Double>
   </Styles.Resources>
 
   <Style Selector="ColorPreviewer">
@@ -19,8 +21,8 @@
         <Grid ColumnDefinitions="Auto,*,Auto">
           <!-- Left accent colors -->
           <Grid Grid.Column="0"
-                Height="40"
-                Width="80"
+                Height="{StaticResource AccentColorSectionHeight}"
+                Width="{StaticResource AccentColorSectionWidth}"
                 ColumnDefinitions="*,*"
                 Margin="0,0,-10,0"
                 VerticalAlignment="Center"
@@ -42,8 +44,8 @@
           </Grid>
           <!-- Right accent colors -->
           <Grid Grid.Column="2"
-                Height="40"
-                Width="80"
+                Height="{StaticResource AccentColorSectionHeight}"
+                Width="{StaticResource AccentColorSectionWidth}"
                 ColumnDefinitions="*,*"
                 Margin="-10,0,0,0"
                 VerticalAlignment="Center"