diff --git a/samples/ControlCatalog/Pages/ColorPickerPage.xaml b/samples/ControlCatalog/Pages/ColorPickerPage.xaml
index 486a36956f..1590be25ba 100644
--- a/samples/ControlCatalog/Pages/ColorPickerPage.xaml
+++ b/samples/ControlCatalog/Pages/ColorPickerPage.xaml
@@ -47,7 +47,7 @@
                    ColorModel="Hsva"
                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
       <ColorPreviewer Grid.Row="5"
-                      ShowAccentColors="True"
+                      IsAccentColorsVisible="True"
                       HsvColor="{Binding HsvColor, ElementName=ColorSpectrum1}" />
     </Grid>
     <Grid Grid.Column="4"
diff --git a/src/Avalonia.Controls.ColorPicker/ColorPreviewer/ColorPreviewer.Properties.cs b/src/Avalonia.Controls.ColorPicker/ColorPreviewer/ColorPreviewer.Properties.cs
index 0fa6ab8083..e1ffbb7eae 100644
--- a/src/Avalonia.Controls.ColorPicker/ColorPreviewer/ColorPreviewer.Properties.cs
+++ b/src/Avalonia.Controls.ColorPicker/ColorPreviewer/ColorPreviewer.Properties.cs
@@ -16,11 +16,11 @@ namespace Avalonia.Controls.Primitives
                 defaultBindingMode: BindingMode.TwoWay);
 
         /// <summary>
-        /// Defines the <see cref="ShowAccentColors"/> property.
+        /// Defines the <see cref="IsAccentColorsVisible"/> property.
         /// </summary>
-        public static readonly StyledProperty<bool> ShowAccentColorsProperty =
+        public static readonly StyledProperty<bool> IsAccentColorsVisibleProperty =
             AvaloniaProperty.Register<ColorPreviewer, bool>(
-                nameof(ShowAccentColors),
+                nameof(IsAccentColorsVisible),
                 true);
 
         /// <summary>
@@ -38,13 +38,13 @@ namespace Avalonia.Controls.Primitives
         }
 
         /// <summary>
-        /// Gets or sets a value indicating whether accent colors are shown along
+        /// Gets or sets a value indicating whether accent colors are visible along
         /// with the preview color.
         /// </summary>
-        public bool ShowAccentColors
+        public bool IsAccentColorsVisible
         {
-            get => GetValue(ShowAccentColorsProperty);
-            set => SetValue(ShowAccentColorsProperty, value);
+            get => GetValue(IsAccentColorsVisibleProperty);
+            set => SetValue(IsAccentColorsVisibleProperty, value);
         }
     }
 }
diff --git a/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs b/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs
index d59c4d544a..b76059037b 100644
--- a/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs
+++ b/src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs
@@ -52,6 +52,14 @@ namespace Avalonia.Controls
                 defaultBindingMode: BindingMode.TwoWay,
                 coerce: CoerceHsvColor);
 
+        /// <summary>
+        /// Defines the <see cref="IsAccentColorsVisible"/> property.
+        /// </summary>
+        public static readonly StyledProperty<bool> IsAccentColorsVisibleProperty =
+            AvaloniaProperty.Register<ColorView, bool>(
+                nameof(IsAccentColorsVisible),
+                true);
+
         /// <summary>
         /// Defines the <see cref="IsAlphaEnabled"/> property.
         /// </summary>
@@ -220,14 +228,6 @@ namespace Avalonia.Controls
                 nameof(SelectedIndex),
                 (int)ColorViewTab.Spectrum);
 
-        /// <summary>
-        /// Defines the <see cref="ShowAccentColors"/> property.
-        /// </summary>
-        public static readonly StyledProperty<bool> ShowAccentColorsProperty =
-            AvaloniaProperty.Register<ColorView, bool>(
-                nameof(ShowAccentColors),
-                true);
-
         /// <inheritdoc cref="ColorSpectrum.Color"/>
         public Color Color
         {
@@ -267,6 +267,13 @@ namespace Avalonia.Controls
             set => SetValue(HsvColorProperty, value);
         }
 
+        /// <inheritdoc cref="ColorPreviewer.IsAccentColorsVisible"/>
+        public bool IsAccentColorsVisible
+        {
+            get => GetValue(IsAccentColorsVisibleProperty);
+            set => SetValue(IsAccentColorsVisibleProperty, value);
+        }
+
         /// <summary>
         /// Gets or sets a value indicating whether the alpha component is enabled.
         /// When disabled (set to false) the alpha component will be fixed to maximum and
@@ -325,7 +332,7 @@ namespace Avalonia.Controls
         /// </summary>
         /// <remarks>
         /// Note that accent color visibility is controlled separately by
-        /// <see cref="ShowAccentColors"/>.
+        /// <see cref="IsAccentColorsVisible"/>.
         /// </remarks>
         public bool IsColorPreviewVisible
         {
@@ -484,12 +491,5 @@ namespace Avalonia.Controls
             get => GetValue(SelectedIndexProperty);
             set => SetValue(SelectedIndexProperty, value);
         }
-
-        /// <inheritdoc cref="ColorPreviewer.ShowAccentColors"/>
-        public bool ShowAccentColors
-        {
-            get => GetValue(ShowAccentColorsProperty);
-            set => SetValue(ShowAccentColorsProperty, value);
-        }
     }
 }
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
index 3a4efaa42a..c3bc7df4a4 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
@@ -14,69 +14,87 @@
     <Setter Property="CornerRadius" Value="0" />
     <Setter Property="Template">
       <ControlTemplate TargetType="{x:Type ColorPreviewer}">
-        <Grid ColumnDefinitions="Auto,*,Auto">
-          <!-- Left accent colors -->
-          <Grid Grid.Column="0"
-                Height="{StaticResource ColorPreviewerAccentSectionHeight}"
-                Width="{StaticResource ColorPreviewerAccentSectionWidth}"
-                ColumnDefinitions="*,*"
-                Margin="0,0,-10,0"
-                VerticalAlignment="Center"
-                IsVisible="{TemplateBinding ShowAccentColors}">
-            <Border Grid.Column="0"
-                    Grid.ColumnSpan="2"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
-            <Border x:Name="PART_AccentDecrement2Border"
-                    Grid.Column="0"
-                    CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
-                    Tag="-2"
-                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='-2'}" />
-            <Border x:Name="PART_AccentDecrement1Border"
-                    Grid.Column="1"
-                    Tag="-1"
-                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='-1'}" />
-          </Grid>
-          <!-- Right accent colors -->
-          <Grid Grid.Column="2"
-                Height="{StaticResource ColorPreviewerAccentSectionHeight}"
-                Width="{StaticResource ColorPreviewerAccentSectionWidth}"
-                ColumnDefinitions="*,*"
-                Margin="-10,0,0,0"
-                VerticalAlignment="Center"
-                IsVisible="{TemplateBinding ShowAccentColors}">
-            <Border Grid.Column="0"
-                    Grid.ColumnSpan="2"
+        <Panel>
+          <!-- Preview color with accents to the left and right -->
+          <Grid ColumnDefinitions="Auto,*,Auto"
+                IsVisible="{TemplateBinding IsAccentColorsVisible}">
+            <!-- Left accent colors -->
+            <Grid Grid.Column="0"
+                  Height="{StaticResource ColorPreviewerAccentSectionHeight}"
+                  Width="{StaticResource ColorPreviewerAccentSectionWidth}"
+                  ColumnDefinitions="*,*"
+                  Margin="0,0,-10,0"
+                  VerticalAlignment="Center">
+              <Border Grid.Column="0"
+                      Grid.ColumnSpan="2"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch"
+                      Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
+              <Border x:Name="PART_AccentDecrement2Border"
+                      Grid.Column="0"
+                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                      Tag="-2"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='-2'}" />
+              <Border x:Name="PART_AccentDecrement1Border"
+                      Grid.Column="1"
+                      Tag="-1"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='-1'}" />
+            </Grid>
+            <!-- Right accent colors -->
+            <Grid Grid.Column="2"
+                  Height="{StaticResource ColorPreviewerAccentSectionHeight}"
+                  Width="{StaticResource ColorPreviewerAccentSectionWidth}"
+                  ColumnDefinitions="*,*"
+                  Margin="-10,0,0,0"
+                  VerticalAlignment="Center">
+              <Border Grid.Column="0"
+                      Grid.ColumnSpan="2"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch"
+                      Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
+              <Border x:Name="PART_AccentIncrement1Border"
+                      Grid.Column="0"
+                      Tag="1"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='1'}" />
+              <Border x:Name="PART_AccentIncrement2Border"
+                      Grid.Column="1"
+                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                      Tag="2"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='2'}" />
+            </Grid>
+            <!-- Preview color: Must be last for drop shadow Z-index -->
+            <Border Grid.Column="1"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
-                    Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
-            <Border x:Name="PART_AccentIncrement1Border"
-                    Grid.Column="0"
-                    Tag="1"
-                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='1'}" />
-            <Border x:Name="PART_AccentIncrement2Border"
-                    Grid.Column="1"
-                    CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}"
-                    Tag="2"
-                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='2'}" />
+                    BoxShadow="0 0 10 2 #BF000000"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Margin="10">
+              <Panel>
+                <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                <Border CornerRadius="{TemplateBinding CornerRadius}"
+                        Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch" />
+              </Panel>
+            </Border>
           </Grid>
-          <!-- Must be last for drop shadow Z-index -->
-          <Border Grid.Column="1"
-                  BoxShadow="0 0 10 2 #BF000000"
-                  CornerRadius="{TemplateBinding CornerRadius}"
-                  Margin="10">
+          <!-- Only preview color -->
+          <Border CornerRadius="{TemplateBinding CornerRadius}"
+                  IsVisible="{TemplateBinding IsAccentColorsVisible, Converter={x:Static BoolConverters.Not}}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Margin="0,10,0,10">
             <Panel>
               <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
                       CornerRadius="{TemplateBinding CornerRadius}" />
-              <Border x:Name="PreviewBorder"
-                      CornerRadius="{TemplateBinding CornerRadius}"
+              <Border CornerRadius="{TemplateBinding CornerRadius}"
                       Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch" />
             </Panel>
           </Border>
-        </Grid>
+        </Panel>
       </ControlTemplate>
     </Setter>
   </Style>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
index b34ac68be5..a4d5ff673f 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml
@@ -53,6 +53,7 @@
                          ColorSpectrumComponents="{TemplateBinding ColorSpectrumComponents}"
                          ColorSpectrumShape="{TemplateBinding ColorSpectrumShape}"
                          HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                         IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
                          IsAlphaEnabled="{TemplateBinding IsAlphaEnabled}"
                          IsAlphaVisible="{TemplateBinding IsAlphaVisible}"
                          IsColorComponentsVisible="{TemplateBinding IsColorComponentsVisible}"
@@ -73,8 +74,7 @@
                          PaletteColors="{TemplateBinding PaletteColors}"
                          PaletteColumnCount="{TemplateBinding PaletteColumnCount}"
                          Palette="{TemplateBinding Palette}"
-                         SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
-                         ShowAccentColors="{TemplateBinding ShowAccentColors}" />
+                         SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
             </Flyout>
           </DropDownButton.Flyout>
         </DropDownButton>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
index 77059f14fb..74f33d1258 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPreviewer.xaml
@@ -14,69 +14,87 @@
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
     <Setter Property="Template">
       <ControlTemplate TargetType="{x:Type ColorPreviewer}">
-        <Grid ColumnDefinitions="Auto,*,Auto">
-          <!-- Left accent colors -->
-          <Grid Grid.Column="0"
-                Height="{StaticResource ColorPreviewerAccentSectionHeight}"
-                Width="{StaticResource ColorPreviewerAccentSectionWidth}"
-                ColumnDefinitions="*,*"
-                Margin="0,0,-10,0"
-                VerticalAlignment="Center"
-                IsVisible="{TemplateBinding ShowAccentColors}">
-            <Border Grid.Column="0"
-                    Grid.ColumnSpan="2"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
-            <Border x:Name="PART_AccentDecrement2Border"
-                    Grid.Column="0"
-                    CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
-                    Tag="-2"
-                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='-2'}" />
-            <Border x:Name="PART_AccentDecrement1Border"
-                    Grid.Column="1"
-                    Tag="-1"
-                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='-1'}" />
-          </Grid>
-          <!-- Right accent colors -->
-          <Grid Grid.Column="2"
-                Height="{StaticResource ColorPreviewerAccentSectionHeight}"
-                Width="{StaticResource ColorPreviewerAccentSectionWidth}"
-                ColumnDefinitions="*,*"
-                Margin="-10,0,0,0"
-                VerticalAlignment="Center"
-                IsVisible="{TemplateBinding ShowAccentColors}">
-            <Border Grid.Column="0"
-                    Grid.ColumnSpan="2"
+        <Panel>
+          <!-- Preview color with accents to the left and right -->
+          <Grid ColumnDefinitions="Auto,*,Auto"
+                IsVisible="{TemplateBinding IsAccentColorsVisible}">
+            <!-- Left accent colors -->
+            <Grid Grid.Column="0"
+                  Height="{StaticResource ColorPreviewerAccentSectionHeight}"
+                  Width="{StaticResource ColorPreviewerAccentSectionWidth}"
+                  ColumnDefinitions="*,*"
+                  Margin="0,0,-10,0"
+                  VerticalAlignment="Center">
+              <Border Grid.Column="0"
+                      Grid.ColumnSpan="2"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch"
+                      Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
+              <Border x:Name="PART_AccentDecrement2Border"
+                      Grid.Column="0"
+                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                      Tag="-2"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='-2'}" />
+              <Border x:Name="PART_AccentDecrement1Border"
+                      Grid.Column="1"
+                      Tag="-1"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='-1'}" />
+            </Grid>
+            <!-- Right accent colors -->
+            <Grid Grid.Column="2"
+                  Height="{StaticResource ColorPreviewerAccentSectionHeight}"
+                  Width="{StaticResource ColorPreviewerAccentSectionWidth}"
+                  ColumnDefinitions="*,*"
+                  Margin="-10,0,0,0"
+                  VerticalAlignment="Center">
+              <Border Grid.Column="0"
+                      Grid.ColumnSpan="2"
+                      HorizontalAlignment="Stretch"
+                      VerticalAlignment="Stretch"
+                      Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
+              <Border x:Name="PART_AccentIncrement1Border"
+                      Grid.Column="0"
+                      Tag="1"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='1'}" />
+              <Border x:Name="PART_AccentIncrement2Border"
+                      Grid.Column="1"
+                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                      Tag="2"
+                      Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='2'}" />
+            </Grid>
+            <!-- Preview color: Must be last for drop shadow Z-index -->
+            <Border Grid.Column="1"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
-                    Background="{StaticResource ColorControlCheckeredBackgroundBrush}" />
-            <Border x:Name="PART_AccentIncrement1Border"
-                    Grid.Column="0"
-                    Tag="1"
-                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='1'}" />
-            <Border x:Name="PART_AccentIncrement2Border"
-                    Grid.Column="1"
-                    CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}"
-                    Tag="2"
-                    Background="{TemplateBinding HsvColor, Converter={StaticResource AccentColorConverter}, ConverterParameter='2'}" />
+                    BoxShadow="0 0 10 2 #BF000000"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Margin="10">
+              <Panel>
+                <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                <Border CornerRadius="{TemplateBinding CornerRadius}"
+                        Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch" />
+              </Panel>
+            </Border>
           </Grid>
-          <!-- Must be last for drop shadow Z-index -->
-          <Border Grid.Column="1"
-                  BoxShadow="0 0 10 2 #BF000000"
-                  CornerRadius="{TemplateBinding CornerRadius}"
-                  Margin="10">
+          <!-- Only preview color -->
+          <Border CornerRadius="{TemplateBinding CornerRadius}"
+                  IsVisible="{TemplateBinding IsAccentColorsVisible, Converter={x:Static BoolConverters.Not}}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Margin="0,10,0,10">
             <Panel>
               <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
                       CornerRadius="{TemplateBinding CornerRadius}" />
-              <Border x:Name="PreviewBorder"
-                      CornerRadius="{TemplateBinding CornerRadius}"
+              <Border CornerRadius="{TemplateBinding CornerRadius}"
                       Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch" />
             </Panel>
           </Border>
-        </Grid>
+        </Panel>
       </ControlTemplate>
     </Setter>
   </Style>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
index bcdb72d96c..e25e822f3f 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorView.xaml
@@ -638,8 +638,8 @@
           <!-- Previewer -->
           <!-- Note that top/bottom margins have -5 to remove for drop shadow padding -->
           <primitives:ColorPreviewer Grid.Row="1"
-                                     ShowAccentColors="{TemplateBinding ShowAccentColors}"
                                      HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                     IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
                                      Margin="12,-5,12,7"
                                      IsVisible="{TemplateBinding IsColorPreviewVisible}" />
         </Grid>