diff --git a/.github/actions/spell-check/expect.txt b/.github/actions/spell-check/expect.txt
index e25f3a342f..7d0d417e86 100644
--- a/.github/actions/spell-check/expect.txt
+++ b/.github/actions/spell-check/expect.txt
@@ -169,6 +169,7 @@ BLURREGION
 bmi
 bmp
 bms
+BNumber
 Bokm
 BOKMAL
 bootstrapper
@@ -794,6 +795,7 @@ githubusercontent
 gitignore
 globals
 gmx
+GNumber
 google
 GPTR
 grayscale
@@ -1820,6 +1822,7 @@ riid
 riverar
 RKey
 RMENU
+RNumber
 roadmap
 Roboto
 roslyn
diff --git a/src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml b/src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml
index 31be42c401..0c6aa774fa 100644
--- a/src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml
+++ b/src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml
@@ -32,7 +32,8 @@
                     Background="LightPink"
                     Click="ColorVariationButton_Click"
                     AutomationProperties.Name="Color shade 1"
-                    Style="{DynamicResource ColorShadeButtonStyle}"/>
+                    Style="{DynamicResource ColorShadeButtonStyle}"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Select_color}"/>
             <Button x:Name="colorVariation2Button"
                     Grid.Column="1"
                     ui:ControlHelper.CornerRadius="0"
@@ -40,7 +41,8 @@
                     Background="LightPink"
                     Click="ColorVariationButton_Click"
                     AutomationProperties.Name="Color shade 2"
-                    Style="{DynamicResource ColorShadeButtonStyle}"/>
+                    Style="{DynamicResource ColorShadeButtonStyle}"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Select_color}"/>
             <Button x:Name="colorVariation3Button"
                     Grid.Column="3"
                     TabIndex="7"
@@ -48,7 +50,8 @@
                     Background="LightPink"
                     Click="ColorVariationButton_Click"
                     AutomationProperties.Name="Color shade 3"
-                    Style="{DynamicResource ColorShadeButtonStyle}"/>
+                    Style="{DynamicResource ColorShadeButtonStyle}"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Select_color}"/>
             <Button x:Name="colorVariation4Button"
                     Grid.Column="4"
                     TabIndex="8"
@@ -56,7 +59,8 @@
                     Background="LightPink"
                     Click="ColorVariationButton_Click"
                     AutomationProperties.Name="Color shade 5"
-                    Style="{DynamicResource ColorShadeButtonStyle}"/>
+                    Style="{DynamicResource ColorShadeButtonStyle}"
+                    ToolTipService.ToolTip="{x:Static p:Resources.Select_color}"/>
             <Button x:Name="CurrentColorButton"
                     HorizontalAlignment="Left"
                     Grid.Column="0"
@@ -72,7 +76,8 @@
                     AutomationProperties.HelpText="{x:Static p:Resources.Selected_color_helptext}"
                     ToolTipService.ToolTip="{x:Static p:Resources.Selected_color_tooltip}"
                     Click="CurrentColorButton_Click"
-                    Style="{DynamicResource ColorShadeButtonStyle}"/>
+                    Style="{DynamicResource ColorShadeButtonStyle}">
+            </Button>
         </Grid>
 
         <!--Details panel-->
@@ -202,71 +207,73 @@
                     </Border>
                 </Grid>
 
-                <Grid HorizontalAlignment="Stretch" Margin="12,16,12,8">
+                <Grid HorizontalAlignment="Stretch"
+                      Margin="12,16,12,8">
                     <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="20"/>
-                        <ColumnDefinition Width="68"/>
-                        <ColumnDefinition Width="*"/>
-                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="20" />
+                        <ColumnDefinition Width="86" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="*" />
                     </Grid.ColumnDefinitions>
                     <Grid.RowDefinitions>
-                        <RowDefinition Height="36"/>
-                        <RowDefinition Height="36"/>
-                        <RowDefinition Height="36"/>
+                        <RowDefinition Height="36" />
+                        <RowDefinition Height="36" />
+                        <RowDefinition Height="36" />
                     </Grid.RowDefinitions>
 
                     <TextBlock Text="R"
                                FontWeight="SemiBold"
-                               VerticalAlignment="Center"/>
-                    <TextBox x:Name="RTextBox"
-                             Margin="0,0,0,0"
-                             Grid.Column="1"
-                             Height="32"
-                             AutomationProperties.Name="{x:Static p:Resources.Red_value}"
-                             TextChanged="RGBTextBoxes_TextChanged"
-                             TextWrapping="Wrap"/>
+                               VerticalAlignment="Center" />
+                    <ui:NumberBox x:Name="RNumberBox"
+                                  Grid.Column="1"
+                                  Height="32"
+                                  AutomationProperties.Name="{x:Static p:Resources.Red_value}"
+                                  ValueChanged="RGBNumberBox_ValueChanged"
+                                  Minimum="0"
+                                  Maximum="255" />
 
                     <TextBlock Text="G"
                                FontWeight="SemiBold"
                                Grid.Row="1"
-                               VerticalAlignment="Center"/>
+                               VerticalAlignment="Center" />
 
-                    <TextBox x:Name="GTextBox"
-                             Width="68"
-                             Height="32"
-                             Grid.Row="1"
-                             Grid.Column="1"
-                             AutomationProperties.Name="{x:Static p:Resources.Green_value}"
-                             TextChanged="RGBTextBoxes_TextChanged"
-                             TextWrapping="Wrap"/>
+                    <ui:NumberBox x:Name="GNumberBox"
+                                  Height="32"
+                                  Grid.Row="1"
+                                  Grid.Column="1"
+                                  AutomationProperties.Name="{x:Static p:Resources.Green_value}"
+                                  ValueChanged="RGBNumberBox_ValueChanged"
+                                  Minimum="0"
+                                  Maximum="255" />
 
                     <TextBlock Text="B"
                                FontWeight="SemiBold"
                                Grid.Row="2"
-                               VerticalAlignment="Center"/>
+                               VerticalAlignment="Center" />
 
-                    <TextBox x:Name="BTextBox"
-                             Width="68"
-                             Height="32"
-                             Grid.Column="1"
-                             Grid.Row="2"
-                             AutomationProperties.Name="{x:Static p:Resources.Blue_value}"
-                             TextChanged="RGBTextBoxes_TextChanged"
-                             TextWrapping="Wrap"/>
+                    <ui:NumberBox x:Name="BNumberBox"
+                                  Height="32"
+                                  Grid.Column="1"
+                                  Grid.Row="2"
+                                  AutomationProperties.Name="{x:Static p:Resources.Blue_value}"
+                                  ValueChanged="RGBNumberBox_ValueChanged"
+                                  Minimum="0"
+                                  Maximum="255" />
 
                     <TextBlock Text="HEX"
                                Grid.Column="2"
                                HorizontalAlignment="Right"
                                FontWeight="SemiBold"
-                               VerticalAlignment="Center"/>
+                               VerticalAlignment="Center" />
                     <TextBox x:Name="HexCode"
                              HorizontalAlignment="Stretch"
                              Margin="8,0,0,0"
                              Height="32"
                              Grid.Column="3"
                              AutomationProperties.Name="{x:Static p:Resources.Hex_value}"
+                             GotKeyboardFocus="HexCode_GotKeyboardFocus"
                              TextChanged="HexCode_TextChanged"
-                             TextWrapping="Wrap"/>
+                             TextWrapping="Wrap" />
                 </Grid>
                 <WrapPanel HorizontalAlignment="Right"
                            Margin="0,0,0,0"
diff --git a/src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml.cs b/src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml.cs
index 0b9e0515b3..a8148db5ad 100644
--- a/src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml.cs
@@ -56,20 +56,24 @@ namespace ColorPicker.Controls
 
         private static void SelectedColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
+            var control = (ColorPickerControl)d;
             var newColor = (Color)e.NewValue;
-            ((ColorPickerControl)d)._originalColor = ((ColorPickerControl)d)._currentColor = newColor;
-            var newColorBackground = new SolidColorBrush(newColor);
-            ((ColorPickerControl)d).CurrentColorButton.Background = newColorBackground;
 
-            ((ColorPickerControl)d)._ignoreHexChanges = true;
-            ((ColorPickerControl)d)._ignoreRGBChanges = true;
-            ((ColorPickerControl)d).HexCode.Text = ColorToHex(newColor);
-            ((ColorPickerControl)d).RTextBox.Text = newColor.R.ToString(CultureInfo.InvariantCulture);
-            ((ColorPickerControl)d).GTextBox.Text = newColor.G.ToString(CultureInfo.InvariantCulture);
-            ((ColorPickerControl)d).BTextBox.Text = newColor.B.ToString(CultureInfo.InvariantCulture);
-            ((ColorPickerControl)d).SetColorFromTextBoxes(System.Drawing.Color.FromArgb(newColor.R, newColor.G, newColor.B));
-            ((ColorPickerControl)d)._ignoreRGBChanges = false;
-            ((ColorPickerControl)d)._ignoreHexChanges = false;
+            control._originalColor = control._currentColor = newColor;
+            var newColorBackground = new SolidColorBrush(newColor);
+            control.CurrentColorButton.Background = newColorBackground;
+
+            control._ignoreHexChanges = true;
+            control._ignoreRGBChanges = true;
+
+            control.HexCode.Text = ColorToHex(newColor);
+            control.RNumberBox.Text = newColor.R.ToString(CultureInfo.InvariantCulture);
+            control.GNumberBox.Text = newColor.G.ToString(CultureInfo.InvariantCulture);
+            control.BNumberBox.Text = newColor.B.ToString(CultureInfo.InvariantCulture);
+            control.SetColorFromTextBoxes(System.Drawing.Color.FromArgb(newColor.R, newColor.G, newColor.B));
+
+            control._ignoreRGBChanges = false;
+            control._ignoreHexChanges = false;
 
             var hsv = ColorHelper.ConvertToHSVColor(System.Drawing.Color.FromArgb(newColor.R, newColor.G, newColor.B));
 
@@ -107,12 +111,13 @@ namespace ColorPicker.Controls
             }
 
             var s = hsv.saturation;
+            var control = (ColorPickerControl)d;
 
-            ((ColorPickerControl)d).colorVariation1Button.Background = new SolidColorBrush(HSVColor.RGBFromHSV(Math.Min(hsv.hue + (hueCoefficient * 8), 360), s, Math.Min(hsv.value + 0.3, 1)));
-            ((ColorPickerControl)d).colorVariation2Button.Background = new SolidColorBrush(HSVColor.RGBFromHSV(Math.Min(hsv.hue + (hueCoefficient * 4), 360), s, Math.Min(hsv.value + 0.15, 1)));
+            control.colorVariation1Button.Background = new SolidColorBrush(HSVColor.RGBFromHSV(Math.Min(hsv.hue + (hueCoefficient * 8), 360), s, Math.Min(hsv.value + 0.3, 1)));
+            control.colorVariation2Button.Background = new SolidColorBrush(HSVColor.RGBFromHSV(Math.Min(hsv.hue + (hueCoefficient * 4), 360), s, Math.Min(hsv.value + 0.15, 1)));
 
-            ((ColorPickerControl)d).colorVariation3Button.Background = new SolidColorBrush(HSVColor.RGBFromHSV(Math.Max(hsv.hue - (hueCoefficient2 * 4), 0), s, Math.Max(hsv.value - 0.2, 0)));
-            ((ColorPickerControl)d).colorVariation4Button.Background = new SolidColorBrush(HSVColor.RGBFromHSV(Math.Max(hsv.hue - (hueCoefficient2 * 8), 0), s, Math.Max(hsv.value - 0.3, 0)));
+            control.colorVariation3Button.Background = new SolidColorBrush(HSVColor.RGBFromHSV(Math.Max(hsv.hue - (hueCoefficient2 * 4), 0), s, Math.Max(hsv.value - 0.2, 0)));
+            control.colorVariation4Button.Background = new SolidColorBrush(HSVColor.RGBFromHSV(Math.Max(hsv.hue - (hueCoefficient2 * 8), 0), s, Math.Max(hsv.value - 0.3, 0)));
         }
 
         private void UpdateValueColorGradient(double posX)
@@ -161,9 +166,9 @@ namespace ColorPicker.Controls
 
             if (!_ignoreRGBChanges)
             {
-                RTextBox.Text = currentColor.R.ToString(CultureInfo.InvariantCulture);
-                GTextBox.Text = currentColor.G.ToString(CultureInfo.InvariantCulture);
-                BTextBox.Text = currentColor.B.ToString(CultureInfo.InvariantCulture);
+                RNumberBox.Text = currentColor.R.ToString(CultureInfo.InvariantCulture);
+                GNumberBox.Text = currentColor.G.ToString(CultureInfo.InvariantCulture);
+                BNumberBox.Text = currentColor.B.ToString(CultureInfo.InvariantCulture);
             }
 
             _currentColor = currentColor;
@@ -357,19 +362,15 @@ namespace ColorPicker.Controls
             }
         }
 
-        private void RGBTextBoxes_TextChanged(object sender, TextChangedEventArgs e)
+#pragma warning disable CA1801 // Review unused parameters
+        private void RGBNumberBox_ValueChanged(ModernWpf.Controls.NumberBox sender, ModernWpf.Controls.NumberBoxValueChangedEventArgs args)
+#pragma warning restore CA1801 // Review unused parameters
         {
-            var validNumber = int.TryParse((sender as TextBox).Text, out int result);
-            if (!validNumber || result < 0 || result > 255)
-            {
-                return;
-            }
-
             if (!_ignoreRGBChanges)
             {
-                var r = byte.Parse(RTextBox.Text, CultureInfo.InvariantCulture);
-                var g = byte.Parse(GTextBox.Text, CultureInfo.InvariantCulture);
-                var b = byte.Parse(BTextBox.Text, CultureInfo.InvariantCulture);
+                var r = byte.Parse(RNumberBox.Text, CultureInfo.InvariantCulture);
+                var g = byte.Parse(GNumberBox.Text, CultureInfo.InvariantCulture);
+                var b = byte.Parse(BNumberBox.Text, CultureInfo.InvariantCulture);
                 _ignoreRGBChanges = true;
                 SetColorFromTextBoxes(System.Drawing.Color.FromArgb(r, g, b));
                 _ignoreRGBChanges = false;
@@ -397,5 +398,10 @@ namespace ColorPicker.Controls
         {
             return "#" + BitConverter.ToString(new byte[] { color.R, color.G, color.B }).Replace("-", string.Empty, StringComparison.InvariantCulture);
         }
+
+        private void HexCode_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
+        {
+            (sender as TextBox).SelectAll();
+        }
     }
 }
diff --git a/src/modules/colorPicker/ColorPickerUI/Properties/Resources.Designer.cs b/src/modules/colorPicker/ColorPickerUI/Properties/Resources.Designer.cs
index 31a6a07565..43312c8674 100644
--- a/src/modules/colorPicker/ColorPickerUI/Properties/Resources.Designer.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Properties/Resources.Designer.cs
@@ -195,6 +195,15 @@ namespace ColorPicker.Properties {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Select color.
+        /// </summary>
+        public static string Select_color {
+            get {
+                return ResourceManager.GetString("Select_color", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Selected color.
         /// </summary>
diff --git a/src/modules/colorPicker/ColorPickerUI/Properties/Resources.resx b/src/modules/colorPicker/ColorPickerUI/Properties/Resources.resx
index a0c1b6b156..1fcefffaa4 100644
--- a/src/modules/colorPicker/ColorPickerUI/Properties/Resources.resx
+++ b/src/modules/colorPicker/ColorPickerUI/Properties/Resources.resx
@@ -361,4 +361,7 @@
     <value>Plum</value>
     <comment>Plum color</comment>
   </data>
+  <data name="Select_color" xml:space="preserve">
+    <value>Select color</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/modules/colorPicker/ColorPickerUI/Resources/Styles.xaml b/src/modules/colorPicker/ColorPickerUI/Resources/Styles.xaml
index a5945dcb0f..f38968d618 100644
--- a/src/modules/colorPicker/ColorPickerUI/Resources/Styles.xaml
+++ b/src/modules/colorPicker/ColorPickerUI/Resources/Styles.xaml
@@ -105,6 +105,7 @@
                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                 Focusable="False"
+                                Opacity="0"
                                 RecognizesAccessKey="True"
                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                         </Border>
@@ -113,12 +114,12 @@
                         <Trigger Property="IsMouseOver" Value="True">
                             <Setter TargetName="Background" Property="Opacity" Value="0.8" />
                             <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPointerOver}" />
-                            <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ButtonForegroundPointerOver}" />
+                            <Setter TargetName="ContentPresenter" Property="Opacity" Value="1" />
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
                             <Setter TargetName="Background" Property="Opacity" Value="0.9" />
                             <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource ButtonBorderBrushPressed}" />
-                            <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ButtonForegroundPressed}" />
+                            <Setter TargetName="ContentPresenter" Property="Opacity" Value="1" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>