diff --git a/samples/ControlCatalog/Pages/ColorPickerPage.xaml b/samples/ControlCatalog/Pages/ColorPickerPage.xaml
index ec34193f8c..08f56be8e3 100644
--- a/samples/ControlCatalog/Pages/ColorPickerPage.xaml
+++ b/samples/ControlCatalog/Pages/ColorPickerPage.xaml
@@ -2,28 +2,28 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:primitives="clr-namespace:Avalonia.Controls.Primitives;assembly=Avalonia.Controls"
+             xmlns:cpp="clr-namespace:Avalonia.Controls.Primitives;assembly=Avalonia.Controls.ColorPicker"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="ControlCatalog.Pages.ColorPickerPage">
 
   <Grid ColumnDefinitions="Auto,Auto"
         RowDefinitions="Auto,Auto">
-    <ColorSpectrum Grid.Column="0"
-                   Grid.Row="0"
-                   Color="Red"
-                   Height="256"
-                   Width="256" />
-    <ColorSpectrum Grid.Column="1"
-                   Grid.Row="0"
-                   Color="Green"
-                   Shape="Ring"
-                   Height="256"
-                   Width="256" />
-    <ColorSpectrum Grid.Column="0"
-                   Grid.Row="1"
-                   CornerRadius="10"
-                   Color="Blue"
-                   Height="256"
-                   Width="256" />
+    <cpp:ColorSpectrum Grid.Column="0"
+                       Grid.Row="0"
+                       Color="Red"
+                       Height="256"
+                       Width="256" />
+    <cpp:ColorSpectrum Grid.Column="1"
+                       Grid.Row="0"
+                       Color="Green"
+                       Shape="Ring"
+                       Height="256"
+                       Width="256" />
+    <cpp:ColorSpectrum Grid.Column="0"
+                       Grid.Row="1"
+                       CornerRadius="10"
+                       Color="Blue"
+                       Height="256"
+                       Width="256" />
   </Grid>
 </UserControl>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default.xaml
index 832daf8853..8d9b49b9b1 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default.xaml
@@ -1,7 +1,8 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         x:CompileBindings="True"
-        xmlns:converters="using:Avalonia.Controls.Converters">
+        xmlns:converters="using:Avalonia.Controls.Converters"
+        xmlns:primitive="using:Avalonia.Controls.Primitives">
 
   <Styles.Resources>
     <converters:EnumValueEqualsConverter x:Key="EnumValueEquals" />
@@ -9,7 +10,7 @@
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadius" Corner="BottomRight" />
   </Styles.Resources>
 
-  <Style Selector="ColorSpectrum">
+  <Style Selector="primitive|ColorSpectrum">
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate>
@@ -89,44 +90,44 @@
 
   <!-- Normal -->
   <!-- Separating this allows easier customization in applications -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#BorderEllipse,
-                   ColorSpectrum /template/ Rectangle#BorderRectangle">
+  <Style Selector="primitive|ColorSpectrum /template/ Ellipse#BorderEllipse,
+                   primitive|ColorSpectrum /template/ Rectangle#BorderRectangle">
     <Setter Property="Stroke" Value="{DynamicResource ThemeBorderLowBrush}" />
     <Setter Property="StrokeThickness" Value="1" />
   </Style>
 
   <!-- Focus -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
+  <Style Selector="primitive|ColorSpectrum /template/ Ellipse#FocusEllipse">
     <Setter Property="IsVisible" Value="False" />
   </Style>
-  <Style Selector="ColorSpectrum:focus-visible /template/ Ellipse#FocusEllipse">
+  <Style Selector="primitive|ColorSpectrum:focus-visible /template/ Ellipse#FocusEllipse">
     <Setter Property="IsVisible" Value="True" />
   </Style>
 
   <!-- Selector Color -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
+  <Style Selector="primitive|ColorSpectrum /template/ Ellipse#FocusEllipse">
     <Setter Property="Stroke" Value="White" />
   </Style>
-  <Style Selector="ColorSpectrum /template/ Ellipse#SelectionEllipse">
+  <Style Selector="primitive|ColorSpectrum /template/ Ellipse#SelectionEllipse">
     <Setter Property="Stroke" Value="Black" />
   </Style>
-  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#FocusEllipse">
+  <Style Selector="primitive|ColorSpectrum:light-selector /template/ Ellipse#FocusEllipse">
     <Setter Property="Stroke" Value="Black" />
   </Style>
-  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#SelectionEllipse">
+  <Style Selector="primitive|ColorSpectrum:light-selector /template/ Ellipse#SelectionEllipse">
     <Setter Property="Stroke" Value="White" />
   </Style>
 
-  <Style Selector="ColorSpectrum:pointerover /template/ Ellipse#SelectionEllipse">
+  <Style Selector="primitive|ColorSpectrum:pointerover /template/ Ellipse#SelectionEllipse">
     <Setter Property="Opacity" Value="0.8" />
   </Style>
 
   <!-- Selector Size -->
-  <Style Selector="ColorSpectrum /template/ Panel#PART_SelectionEllipsePanel">
+  <Style Selector="primitive|ColorSpectrum /template/ Panel#PART_SelectionEllipsePanel">
     <Setter Property="Width" Value="16" />
     <Setter Property="Height" Value="16" />
   </Style>
-  <Style Selector="ColorSpectrum:large-selector /template/ Panel#PART_SelectionEllipsePanel">
+  <Style Selector="primitive|ColorSpectrum:large-selector /template/ Panel#PART_SelectionEllipsePanel">
     <Setter Property="Width" Value="48" />
     <Setter Property="Height" Value="48" />
   </Style>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Fluent.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Fluent.xaml
index 545702ea84..9c3a74b1fa 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Fluent.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Fluent.xaml
@@ -1,7 +1,8 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         x:CompileBindings="True"
-        xmlns:converters="using:Avalonia.Controls.Converters">
+        xmlns:converters="using:Avalonia.Controls.Converters"
+        xmlns:primitive="using:Avalonia.Controls.Primitives">
 
   <Styles.Resources>
     <converters:EnumValueEqualsConverter x:Key="EnumValueEquals" />
@@ -9,7 +10,7 @@
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadius" Corner="BottomRight" />
   </Styles.Resources>
 
-  <Style Selector="ColorSpectrum">
+  <Style Selector="primitive|ColorSpectrum">
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate>
@@ -89,44 +90,44 @@
 
   <!-- Normal -->
   <!-- Separating this allows easier customization in applications -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#BorderEllipse,
-                   ColorSpectrum /template/ Rectangle#BorderRectangle">
+  <Style Selector="primitive|ColorSpectrum /template/ Ellipse#BorderEllipse,
+                   primitive|ColorSpectrum /template/ Rectangle#BorderRectangle">
     <Setter Property="Stroke" Value="{DynamicResource SystemControlForegroundListLowBrush}" />
     <Setter Property="StrokeThickness" Value="1" />
   </Style>
 
   <!-- Focus -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
+  <Style Selector="primitive|ColorSpectrum /template/ Ellipse#FocusEllipse">
     <Setter Property="IsVisible" Value="False" />
   </Style>
-  <Style Selector="ColorSpectrum:focus-visible /template/ Ellipse#FocusEllipse">
+  <Style Selector="primitive|ColorSpectrum:focus-visible /template/ Ellipse#FocusEllipse">
     <Setter Property="IsVisible" Value="True" />
   </Style>
 
   <!-- Selector Color -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
+  <Style Selector="primitive|ColorSpectrum /template/ Ellipse#FocusEllipse">
     <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeWhiteBrush}" />
   </Style>
-  <Style Selector="ColorSpectrum /template/ Ellipse#SelectionEllipse">
+  <Style Selector="primitive|ColorSpectrum /template/ Ellipse#SelectionEllipse">
     <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeBlackHighBrush}" />
   </Style>
-  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#FocusEllipse">
+  <Style Selector="primitive|ColorSpectrum:light-selector /template/ Ellipse#FocusEllipse">
     <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeBlackHighBrush}" />
   </Style>
-  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#SelectionEllipse">
+  <Style Selector="primitive|ColorSpectrum:light-selector /template/ Ellipse#SelectionEllipse">
     <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeWhiteBrush}" />
   </Style>
 
-  <Style Selector="ColorSpectrum:pointerover /template/ Ellipse#SelectionEllipse">
+  <Style Selector="primitive|ColorSpectrum:pointerover /template/ Ellipse#SelectionEllipse">
     <Setter Property="Opacity" Value="0.8" />
   </Style>
 
   <!-- Selector Size -->
-  <Style Selector="ColorSpectrum /template/ Panel#PART_SelectionEllipsePanel">
+  <Style Selector="primitive|ColorSpectrum /template/ Panel#PART_SelectionEllipsePanel">
     <Setter Property="Width" Value="16" />
     <Setter Property="Height" Value="16" />
   </Style>
-  <Style Selector="ColorSpectrum:large-selector /template/ Panel#PART_SelectionEllipsePanel">
+  <Style Selector="primitive|ColorSpectrum:large-selector /template/ Panel#PART_SelectionEllipsePanel">
     <Setter Property="Width" Value="48" />
     <Setter Property="Height" Value="48" />
   </Style>