From 57dd0ce113b97b1239726c0ca11d30b545af1c37 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Fri, 23 Oct 2020 14:32:57 +0200
Subject: [PATCH 01/15] Add Ncol, HWB, HSB color format + cleanup

---
 .../ColorPickerProperties.cs                  |  29 +---
 .../ColorPickerSettings.cs                    |   8 +-
 .../Enumerations/ColorRepresentationType.cs   |  54 +++++++
 .../ViewModels/ColorPickerViewModel.cs        |   1 +
 .../Views/ColorPickerPage.xaml                |   4 +
 .../ColorPickerUI/Helpers/ColorHelper.cs      | 150 +++++++++++++-----
 .../Helpers/ColorRepresentationHelper.cs      | 103 +++++++++---
 .../ColorPickerUI/Settings/IUserSettings.cs   |   2 +-
 .../ColorPickerUI/Settings/UserSettings.cs    |   1 +
 .../Helpers/ColorRepresentationHelperTest.cs  |   6 +-
 10 files changed, 260 insertions(+), 98 deletions(-)
 create mode 100644 src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs

diff --git a/src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerProperties.cs b/src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerProperties.cs
index 7f65789992..f5305f5960 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerProperties.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerProperties.cs
@@ -4,37 +4,10 @@
 
 using System.Text.Json;
 using System.Text.Json.Serialization;
+using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 
 namespace Microsoft.PowerToys.Settings.UI.Library
 {
-    public enum ColorRepresentationType
-    {
-        /// <summary>
-        /// Color presentation as hexadecimal color value without the alpha-value (e.g. #0055FF)
-        /// </summary>
-        HEX = 0,
-
-        /// <summary>
-        /// Color presentation as RGB color value (red[0..255], green[0..255], blue[0..255])
-        /// </summary>
-        RGB = 1,
-
-        /// <summary>
-        /// Color presentation as CMYK color value (cyan[0%..100%], magenta[0%..100%], yellow[0%..100%], black key[0%..100%])
-        /// </summary>
-        CMYK = 2,
-
-        /// <summary>
-        /// Color presentation as HSL color value (hue[0°..360°], saturation[0..100%], lightness[0%..100%])
-        /// </summary>
-        HSL = 3,
-
-        /// <summary>
-        /// Color presentation as HSV color value (hue[0°..360°], saturation[0%..100%], value[0%..100%])
-        /// </summary>
-        HSV = 4,
-    }
-
     public class ColorPickerProperties
     {
         public ColorPickerProperties()
diff --git a/src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerSettings.cs b/src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerSettings.cs
index 72ebb295c9..a27a1076a3 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerSettings.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerSettings.cs
@@ -40,14 +40,10 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         }
 
         public string GetModuleName()
-        {
-            return Name;
-        }
+            => Name;
 
         // This can be utilized in the future if the settings.json file is to be modified/deleted.
         public bool UpgradeSettingsConfiguration()
-        {
-            return false;
-        }
+            => false;
     }
 }
diff --git a/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs b/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs
new file mode 100644
index 0000000000..abcc78f775
--- /dev/null
+++ b/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs
@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace Microsoft.PowerToys.Settings.UI.Library.Enumerations
+{
+    public enum ColorRepresentationType
+    {
+        /// <summary>
+        /// Color presentation as hexadecimal color value without the alpha-value (e.g. #0055FF)
+        /// </summary>
+        HEX = 0,
+
+        /// <summary>
+        /// Color presentation as RGB color value (red[0..255], green[0..255], blue[0..255])
+        /// </summary>
+        RGB = 1,
+
+        /// <summary>
+        /// Color presentation as CMYK color value (cyan[0%..100%], magenta[0%..100%], yellow[0%..100%], black key[0%..100%])
+        /// </summary>
+        CMYK = 2,
+
+        /// <summary>
+        /// Color presentation as HSL color value (hue[0°..360°], saturation[0..100%], lightness[0%..100%])
+        /// </summary>
+        HSL = 3,
+
+        /// <summary>
+        /// Color presentation as HSV color value (hue[0°..360°], saturation[0%..100%], value[0%..100%])
+        /// </summary>
+        HSV = 4,
+
+        /// <summary>
+        /// Color presentation as HSB color value (hue[0°..360°], saturation[0%..100%], brightness[0%..100%])
+        /// </summary>
+        HSB = 5,
+
+        /// <summary>
+        /// Color presentation as HSI color value (hue[0°..360°], saturation[0%..100%], value[0%..100%])
+        /// </summary>
+        HSI = 6,
+
+        /// <summary>
+        /// Color presentation as HWB color value (hue[0°..360°], whiteness[0%..100%], blackness[0%..100%])
+        /// </summary>
+        HWB = 7,
+
+        /// <summary>
+        /// Color presentation as natural color (hue, saturation[0%..100%], value[0%..100%])
+        /// </summary>
+        NCol = 8,
+    }
+}
diff --git a/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs b/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
index ff4f37f612..520427929e 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
@@ -5,6 +5,7 @@
 using System;
 using System.Globalization;
 using System.Text.Json;
+using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 using Microsoft.PowerToys.Settings.UI.Library.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
 
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
index 7fb9e40c5d..dac5f414d4 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -74,6 +74,10 @@
                 <ComboBoxItem Content="CMYK - cmyk(100%, 50%, 75%, 0%)"/>
                 <ComboBoxItem Content="HSL - hsl(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HSV - hsv(100, 50%, 75%)"/>
+                <ComboBoxItem Content="HSB - hsb(100, 50%, 75%)"/>
+                <ComboBoxItem Content="HSI - hsi(100, 50%, 75%)"/>
+                <ComboBoxItem Content="HBW - hbw(100, 50%, 75%)"/>
+                <ComboBoxItem Content="NCob - 10R, 50%, 75%"/>
             </ComboBox>
 
                <!--
diff --git a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
index 44f547fc5b..ac7eddbc85 100644
--- a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
@@ -13,44 +13,7 @@ namespace ColorPicker.Helpers
     internal static class ColorHelper
     {
         /// <summary>
-        /// Convert a given <see cref="Color"/> color to a HSL color (hue, saturation, lightness)
-        /// </summary>
-        /// <param name="color">The <see cref="Color"/> to convert</param>
-        /// <returns>The hue [0°..360°], saturation [0..1] and lightness [0..1] values of the converted color</returns>
-        internal static (double hue, double saturation, double lightness) ConvertToHSLColor(Color color)
-        {
-            var min = Math.Min(Math.Min(color.R, color.G), color.B) / 255d;
-            var max = Math.Max(Math.Max(color.R, color.G), color.B) / 255d;
-
-            var lightness = (max + min) / 2d;
-
-            if (lightness == 0d || min == max)
-            {
-                return (color.GetHue(), 0d, lightness);
-            }
-            else if (lightness > 0d && lightness <= 0.5d)
-            {
-                return (color.GetHue(), (max - min) / (max + min), lightness);
-            }
-
-            return (color.GetHue(), (max - min) / (2d - (max + min)), lightness);
-        }
-
-        /// <summary>
-        /// Convert a given <see cref="Color"/> color to a HSV color (hue, saturation, value)
-        /// </summary>
-        /// <param name="color">The <see cref="Color"/> to convert</param>
-        /// <returns>The hue [0°..360°], saturation [0..1] and value [0..1] of the converted color</returns>
-        internal static (double hue, double saturation, double value) ConvertToHSVColor(Color color)
-        {
-            var min = Math.Min(Math.Min(color.R, color.G), color.B) / 255d;
-            var max = Math.Max(Math.Max(color.R, color.G), color.B) / 255d;
-
-            return (color.GetHue(), max == 0d ? 0d : (max - min) / max, max);
-        }
-
-        /// <summary>
-        /// Convert a given <see cref="Color"/> color to a CYMK color (cyan, magenta, yellow, black key)
+        /// Convert a given <see cref="Color"/> to a CYMK color (cyan, magenta, yellow, black key)
         /// </summary>
         /// <param name="color">The <see cref="Color"/> to convert</param>
         /// <returns>The cyan[0..1], magenta[0..1], yellow[0..1] and black key[0..1] of the converted color</returns>
@@ -80,5 +43,116 @@ namespace ColorPicker.Helpers
 
             return (cyan, magenta, yellow, blackKey);
         }
+
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a HSB color (hue, saturation, brightness)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The hue [0°..360°], saturation [0..1] and brightness [0..1] of the converted color</returns>
+        internal static (double hue, double saturation, double brightness) ConvertToHSBColor(Color color)
+            => (color.GetHue(), color.GetSaturation(), color.GetBrightness());
+
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a HSL color (hue, saturation, lightness)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The hue [0°..360°], saturation [0..1] and lightness [0..1] values of the converted color</returns>
+        internal static (double hue, double saturation, double lightness) ConvertToHSLColor(Color color)
+        {
+            var min = Math.Min(Math.Min(color.R, color.G), color.B) / 255d;
+            var max = Math.Max(Math.Max(color.R, color.G), color.B) / 255d;
+
+            var lightness = (max + min) / 2d;
+
+            if (lightness == 0d || min == max)
+            {
+                return (color.GetHue(), 0d, lightness);
+            }
+            else if (lightness > 0d && lightness <= 0.5d)
+            {
+                return (color.GetHue(), (max - min) / (max + min), lightness);
+            }
+
+            return (color.GetHue(), (max - min) / (2d - (max + min)), lightness);
+        }
+
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a HSV color (hue, saturation, value)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The hue [0°..360°], saturation [0..1] and value [0..1] of the converted color</returns>
+        internal static (double hue, double saturation, double value) ConvertToHSVColor(Color color)
+        {
+            var min = Math.Min(Math.Min(color.R, color.G), color.B) / 255d;
+            var max = Math.Max(Math.Max(color.R, color.G), color.B) / 255d;
+
+            return (color.GetHue(), max == 0d ? 0d : (max - min) / max, max);
+        }
+
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a HWB color (hue, whiteness, blackness)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The hue [0°..360°], whiteness [0..1] and blackness [0..1] of the converted color</returns>
+        internal static (double hue, double whiteness, double blackness) ConvertToHWBColor(Color color)
+        {
+            var min = Math.Min(Math.Min(color.R, color.G), color.B) / 255d;
+            var max = Math.Max(Math.Max(color.R, color.G), color.B) / 255d;
+
+            return (color.GetHue(), min, 1 - max);
+        }
+
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a natural color (hue, whiteness, blackness)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The hue, whiteness [0..1] and blackness [0..1] of the converted color</returns>
+        internal static (string hue, double whiteness, double blackness) ConvertToNaturalColor(Color color)
+        {
+            var min = Math.Min(Math.Min(color.R, color.G), color.B) / 255d;
+            var max = Math.Max(Math.Max(color.R, color.G), color.B) / 255d;
+
+            return (GetNaturalColorFromHue(color.GetHue()), min, 1 - max);
+        }
+
+        /// <summary>
+        /// Return the natural color for the given hue value
+        /// </summary>
+        /// <param name="hue">The hue value to convert</param>
+        /// <returns>A natural color</returns>
+        private static string GetNaturalColorFromHue(double hue)
+        {
+            while (hue >= 360)
+            {
+                hue -= 360;
+            }
+
+            if (hue < 60)
+            {
+                return "R" + (hue / 0.6);
+            }
+
+            if (hue < 120)
+            {
+                return "Y" + ((hue - 60) / 0.6);
+            }
+
+            if (hue < 180)
+            {
+                return "G" + ((hue - 120) / 0.6);
+            }
+
+            if (hue < 240)
+            {
+                return "C" + ((hue - 180) / 0.6);
+            }
+
+            if (hue < 300)
+            {
+                return "B" + ((hue - 240) / 0.6);
+            }
+
+            return "M" + ((hue - 300) / 0.6);
+        }
     }
 }
diff --git a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
index 1b2294d915..cdec717177 100644
--- a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
@@ -5,7 +5,7 @@
 using System;
 using System.Drawing;
 using System.Globalization;
-using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 
 namespace ColorPicker.Helpers
 {
@@ -24,15 +24,55 @@ namespace ColorPicker.Helpers
             => colorRepresentationType switch
             {
                 ColorRepresentationType.CMYK => ColorToCYMK(color),
+                ColorRepresentationType.NCol => ColorToNCol(color),
                 ColorRepresentationType.HEX => ColorToHex(color),
+                ColorRepresentationType.HSB => ColorToHSB(color),
                 ColorRepresentationType.HSL => ColorToHSL(color),
                 ColorRepresentationType.HSV => ColorToHSV(color),
+                ColorRepresentationType.HWB => ColorToHWB(color),
                 ColorRepresentationType.RGB => ColorToRGB(color),
 
                 // Fall-back value, when "_userSettings.CopiedColorRepresentation.Value" is incorrect
                 _ => ColorToHex(color),
             };
 
+        /// <summary>
+        /// Return a <see cref="string"/> representation of a CYMK color
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> for the CYMK color presentation</param>
+        /// <returns>A <see cref="string"/> representation of a CYMK color</returns>
+        private static string ColorToCYMK(Color color)
+        {
+            var (cyan, magenta, yellow, blackKey) = ColorHelper.ConvertToCMYKColor(color);
+
+            cyan = Math.Round(cyan * 100);
+            magenta = Math.Round(magenta * 100);
+            yellow = Math.Round(yellow * 100);
+            blackKey = Math.Round(blackKey * 100);
+
+            return $"cmyk({cyan.ToString(CultureInfo.InvariantCulture)}%"
+                 + $", {magenta.ToString(CultureInfo.InvariantCulture)}%"
+                 + $", {yellow.ToString(CultureInfo.InvariantCulture)}%"
+                 + $", {blackKey.ToString(CultureInfo.InvariantCulture)}%)";
+        }
+
+        /// <summary>
+        /// Return a <see cref="string"/> representation of a natural color
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> for the natural color presentation</param>
+        /// <returns>A <see cref="string"/> representation of a natural color</returns>
+        private static string ColorToNCol(Color color)
+        {
+            var (hue, whiteness, blackness) = ColorHelper.ConvertToNaturalColor(color);
+
+            whiteness = Math.Round(whiteness * 100);
+            blackness = Math.Round(blackness * 100);
+
+            return $"{hue}"
+                 + $", {whiteness.ToString(CultureInfo.InvariantCulture)}%"
+                 + $", {blackness.ToString(CultureInfo.InvariantCulture)}%";
+        }
+
         /// <summary>
         /// Return a hexadecimal <see cref="string"/> representation of a RGB color
         /// </summary>
@@ -44,19 +84,27 @@ namespace ColorPicker.Helpers
              + $"{color.B.ToString("X2", CultureInfo.InvariantCulture)}";
 
         /// <summary>
-        /// Return a <see cref="string"/> representation of a RGB color
+        /// Return a <see cref="string"/> representation of a HSB color
         /// </summary>
-        /// <param name="color">The see cref="Color"/> for the RGB color presentation</param>
-        /// <returns>A <see cref="string"/> representation of a RGB color</returns>
-        private static string ColorToRGB(Color color)
-            => $"rgb({color.R.ToString(CultureInfo.InvariantCulture)}"
-             + $", {color.G.ToString(CultureInfo.InvariantCulture)}"
-             + $", {color.B.ToString(CultureInfo.InvariantCulture)})";
+        /// <param name="color">The <see cref="Color"/> for the HSB color presentation</param>
+        /// <returns>A <see cref="string"/> representation of a HSB color</returns>
+        private static string ColorToHSB(Color color)
+        {
+            var (hue, saturation, brightnes) = ColorHelper.ConvertToHSBColor(color);
+
+            hue = Math.Round(hue);
+            saturation = Math.Round(saturation * 100);
+            brightnes = Math.Round(brightnes * 100);
+
+            return $"hsb({hue.ToString(CultureInfo.InvariantCulture)}"
+                 + $", {saturation.ToString(CultureInfo.InvariantCulture)}%"
+                 + $", {brightnes.ToString(CultureInfo.InvariantCulture)}%)";
+        }
 
         /// <summary>
         /// Return a <see cref="string"/> representation of a HSL color
         /// </summary>
-        /// <param name="color">The see cref="Color"/> for the HSL color presentation</param>
+        /// <param name="color">The <see cref="Color"/> for the HSL color presentation</param>
         /// <returns>A <see cref="string"/> representation of a HSL color</returns>
         private static string ColorToHSL(Color color)
         {
@@ -75,7 +123,7 @@ namespace ColorPicker.Helpers
         /// <summary>
         /// Return a <see cref="string"/> representation of a HSV color
         /// </summary>
-        /// <param name="color">The see cref="Color"/> for the HSV color presentation</param>
+        /// <param name="color">The <see cref="Color"/> for the HSV color presentation</param>
         /// <returns>A <see cref="string"/> representation of a HSV color</returns>
         private static string ColorToHSV(Color color)
         {
@@ -92,24 +140,31 @@ namespace ColorPicker.Helpers
         }
 
         /// <summary>
-        /// Return a <see cref="string"/> representation of a HSV color
+        /// Return a <see cref="string"/> representation of a HWB color
         /// </summary>
-        /// <param name="color">The see cref="Color"/> for the HSV color presentation</param>
-        /// <returns>A <see cref="string"/> representation of a HSV color</returns>
-        private static string ColorToCYMK(Color color)
+        /// <param name="color">The <see cref="Color"/> for the HWB color presentation</param>
+        /// <returns>A <see cref="string"/> representation of a HWB color</returns>
+        private static string ColorToHWB(Color color)
         {
-            var (cyan, magenta, yellow, blackKey) = ColorHelper.ConvertToCMYKColor(color);
+            var (hue, whiteness, blackness) = ColorHelper.ConvertToHWBColor(color);
 
-            cyan = Math.Round(cyan * 100);
-            magenta = Math.Round(magenta * 100);
-            yellow = Math.Round(yellow * 100);
-            blackKey = Math.Round(blackKey * 100);
+            hue = Math.Round(hue);
+            whiteness = Math.Round(whiteness * 100);
+            blackness = Math.Round(blackness * 100);
 
-            // Using InvariantCulture since this is used for color representation
-            return $"cmyk({cyan.ToString(CultureInfo.InvariantCulture)}%"
-                 + $", {magenta.ToString(CultureInfo.InvariantCulture)}%"
-                 + $", {yellow.ToString(CultureInfo.InvariantCulture)}%"
-                 + $", {blackKey.ToString(CultureInfo.InvariantCulture)}%)";
+            return $"hwb({hue.ToString(CultureInfo.InvariantCulture)}"
+                 + $", {whiteness.ToString(CultureInfo.InvariantCulture)}%"
+                 + $", {blackness.ToString(CultureInfo.InvariantCulture)}%)";
         }
+
+        /// <summary>
+        /// Return a <see cref="string"/> representation of a RGB color
+        /// </summary>
+        /// <param name="color">The see cref="Color"/> for the RGB color presentation</param>
+        /// <returns>A <see cref="string"/> representation of a RGB color</returns>
+        private static string ColorToRGB(Color color)
+            => $"rgb({color.R.ToString(CultureInfo.InvariantCulture)}"
+             + $", {color.G.ToString(CultureInfo.InvariantCulture)}"
+             + $", {color.B.ToString(CultureInfo.InvariantCulture)})";
     }
 }
diff --git a/src/modules/colorPicker/ColorPickerUI/Settings/IUserSettings.cs b/src/modules/colorPicker/ColorPickerUI/Settings/IUserSettings.cs
index b05be4d12e..585b441279 100644
--- a/src/modules/colorPicker/ColorPickerUI/Settings/IUserSettings.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Settings/IUserSettings.cs
@@ -2,7 +2,7 @@
 // The Microsoft Corporation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
-using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 
 namespace ColorPicker.Settings
 {
diff --git a/src/modules/colorPicker/ColorPickerUI/Settings/UserSettings.cs b/src/modules/colorPicker/ColorPickerUI/Settings/UserSettings.cs
index 3ccea1f1e4..852278f90b 100644
--- a/src/modules/colorPicker/ColorPickerUI/Settings/UserSettings.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Settings/UserSettings.cs
@@ -8,6 +8,7 @@ using System.IO;
 using System.IO.Abstractions;
 using System.Threading;
 using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 using Microsoft.PowerToys.Settings.UI.Library.Utilities;
 
 namespace ColorPicker.Settings
diff --git a/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs b/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs
index fe6fddf015..dca3ac4312 100644
--- a/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs
+++ b/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs
@@ -1,5 +1,5 @@
 using ColorPicker.Helpers;
-using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 using System.Drawing;
 
@@ -11,8 +11,12 @@ namespace UnitTest_ColorPickerUI.Helpers
         [TestMethod]
         [DataRow(ColorRepresentationType.CMYK, "cmyk(0%, 0%, 0%, 100%)")]
         [DataRow(ColorRepresentationType.HEX, "#000000")]
+        [DataRow(ColorRepresentationType.NCol, "R0, 0, 0")]
+        [DataRow(ColorRepresentationType.HSB, "hsb(0, 0%, 0%)")]
+        [DataRow(ColorRepresentationType.HSI, "hsi(0, 0%, 0%)")]
         [DataRow(ColorRepresentationType.HSL, "hsl(0, 0%, 0%)")]
         [DataRow(ColorRepresentationType.HSV, "hsv(0, 0%, 0%)")]
+        [DataRow(ColorRepresentationType.HWB, "hwb(0, 0%, 0%)")]
         [DataRow(ColorRepresentationType.RGB, "rgb(0, 0, 0)")]
 
         public void ColorRGBtoCMYKZeroDiv(ColorRepresentationType type, string expected)

From 71f92994857e57000f4b200f69345e9ea3c366dd Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 26 Oct 2020 13:28:22 +0100
Subject: [PATCH 02/15] Add HSI calculation

---
 .../ColorPickerUI/Helpers/ColorHelper.cs      | 14 ++++++++++++++
 .../Helpers/ColorRepresentationHelper.cs      | 19 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
index ac7eddbc85..213d8dbd68 100644
--- a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
@@ -52,6 +52,20 @@ namespace ColorPicker.Helpers
         internal static (double hue, double saturation, double brightness) ConvertToHSBColor(Color color)
             => (color.GetHue(), color.GetSaturation(), color.GetBrightness());
 
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a HSI color (hue, saturation, intensity)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The hue [0°..360°], saturation [0..1] and intensity [0..1] of the converted color</returns>
+        internal static (double hue, double saturation, double intensity) ConvertToHSIColor(Color color)
+        {
+            var min = Math.Min(Math.Min(color.R, color.G), color.B) / 255d;
+
+            var intensity = 1d / 3d * (color.R + color.G + color.B);
+
+            return (color.GetHue(), intensity == 0d ? 0d : 1d - (min / intensity), intensity);
+        }
+
         /// <summary>
         /// Convert a given <see cref="Color"/> to a HSL color (hue, saturation, lightness)
         /// </summary>
diff --git a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
index cdec717177..7336d0c2a9 100644
--- a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
@@ -27,6 +27,7 @@ namespace ColorPicker.Helpers
                 ColorRepresentationType.NCol => ColorToNCol(color),
                 ColorRepresentationType.HEX => ColorToHex(color),
                 ColorRepresentationType.HSB => ColorToHSB(color),
+                ColorRepresentationType.HSI => ColorToHSI(color),
                 ColorRepresentationType.HSL => ColorToHSL(color),
                 ColorRepresentationType.HSV => ColorToHSV(color),
                 ColorRepresentationType.HWB => ColorToHWB(color),
@@ -101,6 +102,24 @@ namespace ColorPicker.Helpers
                  + $", {brightnes.ToString(CultureInfo.InvariantCulture)}%)";
         }
 
+        /// <summary>
+        /// Return a <see cref="string"/> representation of a HSI color
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> for the HSI color presentation</param>
+        /// <returns>A <see cref="string"/> representation of a HSI color</returns>
+        private static string ColorToHSI(Color color)
+        {
+            var (hue, saturation, intensity) = ColorHelper.ConvertToHSIColor(color);
+
+            hue = Math.Round(hue);
+            saturation = Math.Round(saturation * 100);
+            intensity = Math.Round(intensity * 100);
+
+            return $"hsi({hue.ToString(CultureInfo.InvariantCulture)}"
+                 + $", {saturation.ToString(CultureInfo.InvariantCulture)}%"
+                 + $", {intensity.ToString(CultureInfo.InvariantCulture)}%)";
+        }
+
         /// <summary>
         /// Return a <see cref="string"/> representation of a HSL color
         /// </summary>

From b087deadcbf4e5d67077fa6f1d4e24d6ce79b88b Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 26 Oct 2020 14:25:31 +0100
Subject: [PATCH 03/15] Add HSI test and fix HSI calculation

---
 .../ColorPickerUI/Helpers/ColorHelper.cs      | 16 ++++--
 .../Helpers/ColorHelperTest.cs                | 49 +++++++++++++++++--
 .../Helpers/ColorRepresentationHelperTest.cs  |  6 +--
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
index 213d8dbd68..ea865def1f 100644
--- a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
@@ -59,11 +59,21 @@ namespace ColorPicker.Helpers
         /// <returns>The hue [0°..360°], saturation [0..1] and intensity [0..1] of the converted color</returns>
         internal static (double hue, double saturation, double intensity) ConvertToHSIColor(Color color)
         {
+            // special case for black
+            if (color.R == 0 && color.G == 0 && color.B == 0)
+            {
+                return (0d, 0d, 0d);
+            }
+
+            var red = color.R / 255d;
+            var green = color.G / 255d;
+            var blue = color.B / 255d;
+
+            var intensity = (red + green + blue) / 3d;
+
             var min = Math.Min(Math.Min(color.R, color.G), color.B) / 255d;
 
-            var intensity = 1d / 3d * (color.R + color.G + color.B);
-
-            return (color.GetHue(), intensity == 0d ? 0d : 1d - (min / intensity), intensity);
+            return (color.GetHue(), 1d - (min / intensity), intensity);
         }
 
         /// <summary>
diff --git a/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorHelperTest.cs b/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorHelperTest.cs
index aae56ac7c2..c6d8fc213d 100644
--- a/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorHelperTest.cs
+++ b/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorHelperTest.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Drawing;
+using System.Globalization;
 using ColorPicker.Helpers;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
@@ -41,7 +42,7 @@ namespace UnitTest_ColorPickerUI.Helpers
         [DataRow(315, 100, 050, 100, 000, 075)]      // Red-magenta
         [DataRow(330, 100, 050, 100, 000, 050)]      // Blue-red
         [DataRow(345, 100, 050, 100, 000, 025)]      // Light blue-red
-        public void ColorRGBtoHSL(double hue, double saturation, double lightness, int red, int green, int blue)
+        public void ColorRGBtoHSLTest(double hue, double saturation, double lightness, int red, int green, int blue)
         {
             red   = Convert.ToInt32(Math.Round(255d / 100d * red));     // [0%..100%] to [0..255]
             green = Convert.ToInt32(Math.Round(255d / 100d * green));   // [0%..100%] to [0..255]
@@ -90,7 +91,7 @@ namespace UnitTest_ColorPickerUI.Helpers
         [DataRow(315, 100, 100, 100, 000, 075)]      // Red-magenta
         [DataRow(330, 100, 100, 100, 000, 050)]      // Blue-red
         [DataRow(345, 100, 100, 100, 000, 025)]      // Light blue-red
-        public void ColorRGBtoHSV(double hue, double saturation, double value, int red, int green, int blue)
+        public void ColorRGBtoHSVTest(double hue, double saturation, double value, int red, int green, int blue)
         {
             red   = Convert.ToInt32(Math.Round(255d / 100d * red));         // [0%..100%] to [0..255]
             green = Convert.ToInt32(Math.Round(255d / 100d * green));       // [0%..100%] to [0..255]
@@ -138,7 +139,7 @@ namespace UnitTest_ColorPickerUI.Helpers
         [DataRow(000, 100, 025, 000, 255, 000, 192)]     // Red-magenta
         [DataRow(000, 100, 050, 000, 255, 000, 128)]     // Blue-red
         [DataRow(000, 100, 075, 000, 255, 000, 064)]     // Light blue-red
-        public void ColorRGBtoCMYK(int cyan, int magenta, int yellow, int blackKey, int red, int green, int blue)
+        public void ColorRGBtoCMYKTest(int cyan, int magenta, int yellow, int blackKey, int red, int green, int blue)
         {
             var color = Color.FromArgb(255, red, green, blue);
             var result = ColorHelper.ConvertToCMYKColor(color);
@@ -156,8 +157,48 @@ namespace UnitTest_ColorPickerUI.Helpers
             Assert.AreEqual(result.blackKey * 100d, blackKey, 0.5d);
         }
 
+        // values taken from https://en.wikipedia.org/wiki/HSL_and_HSV#Examples
         [TestMethod]
-        public void ColorRGBtoCMYKZeroDiv()
+        [DataRow("FFFFFF", 000.0, 000.0, 100.0)]
+        [DataRow("808080", 000.0, 000.0, 050.0)]
+        [DataRow("000000", 000.0, 000.0, 000.0)]
+        [DataRow("FF0000", 000.0, 100.0, 033.3)]
+        [DataRow("BFBF00", 060.0, 100.0, 050.0)]
+        [DataRow("008000", 120.0, 100.0, 016.7)]
+        [DataRow("80FFFF", 180.0, 040.0, 083.3)]
+        [DataRow("8080FF", 240.0, 025.0, 066.7)]
+        [DataRow("BF40BF", 300.0, 057.1, 058.3)]
+        [DataRow("A0A424", 061.8, 069.9, 047.1)]
+        [DataRow("411BEA", 251.1, 075.6, 042.6)]
+        [DataRow("1EAC41", 134.9, 066.7, 034.9)]
+        [DataRow("F0C80E", 049.5, 091.1, 059.3)]
+        [DataRow("B430E5", 283.7, 068.6, 059.6)]
+        [DataRow("ED7651", 014.3, 044.6, 057.0)]
+        [DataRow("FEF888", 056.9, 036.3, 083.5)]
+        [DataRow("19CB97", 162.4, 080.0, 049.5)]
+        [DataRow("362698", 248.3, 053.3, 031.9)]
+        [DataRow("7E7EB8", 240.5, 013.5, 057.0)]
+        public void ColorRGBtoHSITest(string hexValue, double hue, double saturation, double intensity)
+        {
+            var red = int.Parse(hexValue.Substring(0, 2), NumberStyles.HexNumber);
+            var green = int.Parse(hexValue.Substring(2, 2), NumberStyles.HexNumber);
+            var blue = int.Parse(hexValue.Substring(4, 2), NumberStyles.HexNumber);
+
+            var color = Color.FromArgb(255, red, green, blue);
+            var result = ColorHelper.ConvertToHSIColor(color);
+
+            // hue[0°..360°]
+            Assert.AreEqual(result.hue, hue, 0.5d);
+
+            // saturation[0..1]
+            Assert.AreEqual(result.saturation * 100d, saturation, 0.5d);
+
+            // intensity[0..1]
+            Assert.AreEqual(result.intensity * 100d, intensity, 0.5d);
+        }
+
+        [TestMethod]
+        public void ColorRGBtoCMYKZeroDivTest()
         {
             for(var red = 0; red < 256; red++)
             {
diff --git a/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs b/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs
index dca3ac4312..d9ce148756 100644
--- a/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs
+++ b/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs
@@ -11,15 +11,15 @@ namespace UnitTest_ColorPickerUI.Helpers
         [TestMethod]
         [DataRow(ColorRepresentationType.CMYK, "cmyk(0%, 0%, 0%, 100%)")]
         [DataRow(ColorRepresentationType.HEX, "#000000")]
-        [DataRow(ColorRepresentationType.NCol, "R0, 0, 0")]
+        [DataRow(ColorRepresentationType.NCol, "R0, 0%, 100%")]
         [DataRow(ColorRepresentationType.HSB, "hsb(0, 0%, 0%)")]
         [DataRow(ColorRepresentationType.HSI, "hsi(0, 0%, 0%)")]
         [DataRow(ColorRepresentationType.HSL, "hsl(0, 0%, 0%)")]
         [DataRow(ColorRepresentationType.HSV, "hsv(0, 0%, 0%)")]
-        [DataRow(ColorRepresentationType.HWB, "hwb(0, 0%, 0%)")]
+        [DataRow(ColorRepresentationType.HWB, "hwb(0, 0%, 100%)")]
         [DataRow(ColorRepresentationType.RGB, "rgb(0, 0, 0)")]
 
-        public void ColorRGBtoCMYKZeroDiv(ColorRepresentationType type, string expected)
+        public void GetStringRepresentationTest(ColorRepresentationType type, string expected)
         {
             var result = ColorRepresentationHelper.GetStringRepresentation(Color.Black, type);
             Assert.AreEqual(result, expected);

From 767ce220192e25965c0f26634f6701fc3a03bb75 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 26 Oct 2020 15:01:06 +0100
Subject: [PATCH 04/15] Add test for HWB and NCol converter

---
 .../ColorPickerUI/Helpers/ColorHelper.cs      |  27 ++---
 .../Helpers/ColorHelperTest.cs                | 100 ++++++++++++++++--
 2 files changed, 102 insertions(+), 25 deletions(-)

diff --git a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
index ea865def1f..edb2f6d1e0 100644
--- a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs
@@ -146,37 +146,32 @@ namespace ColorPicker.Helpers
         /// <returns>A natural color</returns>
         private static string GetNaturalColorFromHue(double hue)
         {
-            while (hue >= 360)
+            if (hue < 60d)
             {
-                hue -= 360;
+                return $"R{Math.Round(hue / 0.6d, 0)}";
             }
 
-            if (hue < 60)
+            if (hue < 120d)
             {
-                return "R" + (hue / 0.6);
+                return $"Y{Math.Round((hue - 60d) / 0.6d, 0)}";
             }
 
-            if (hue < 120)
+            if (hue < 180d)
             {
-                return "Y" + ((hue - 60) / 0.6);
+                return $"G{Math.Round((hue - 120d) / 0.6d, 0)}";
             }
 
-            if (hue < 180)
+            if (hue < 240d)
             {
-                return "G" + ((hue - 120) / 0.6);
+                return $"C{Math.Round((hue - 180d) / 0.6d, 0)}";
             }
 
-            if (hue < 240)
+            if (hue < 300d)
             {
-                return "C" + ((hue - 180) / 0.6);
+                return $"B{Math.Round((hue - 240d) / 0.6d, 0)}";
             }
 
-            if (hue < 300)
-            {
-                return "B" + ((hue - 240) / 0.6);
-            }
-
-            return "M" + ((hue - 300) / 0.6);
+            return $"M{Math.Round((hue - 300d) / 0.6d, 0)}";
         }
     }
 }
diff --git a/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorHelperTest.cs b/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorHelperTest.cs
index c6d8fc213d..804ecddd7a 100644
--- a/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorHelperTest.cs
+++ b/src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorHelperTest.cs
@@ -159,15 +159,15 @@ namespace UnitTest_ColorPickerUI.Helpers
 
         // values taken from https://en.wikipedia.org/wiki/HSL_and_HSV#Examples
         [TestMethod]
-        [DataRow("FFFFFF", 000.0, 000.0, 100.0)]
-        [DataRow("808080", 000.0, 000.0, 050.0)]
-        [DataRow("000000", 000.0, 000.0, 000.0)]
-        [DataRow("FF0000", 000.0, 100.0, 033.3)]
-        [DataRow("BFBF00", 060.0, 100.0, 050.0)]
-        [DataRow("008000", 120.0, 100.0, 016.7)]
-        [DataRow("80FFFF", 180.0, 040.0, 083.3)]
-        [DataRow("8080FF", 240.0, 025.0, 066.7)]
-        [DataRow("BF40BF", 300.0, 057.1, 058.3)]
+        [DataRow("FFFFFF", 000.0, 000.0, 100.0)]         // white
+        [DataRow("808080", 000.0, 000.0, 050.0)]         // gray
+        [DataRow("000000", 000.0, 000.0, 000.0)]         // black
+        [DataRow("FF0000", 000.0, 100.0, 033.3)]         // red
+        [DataRow("BFBF00", 060.0, 100.0, 050.0)]         // yellow
+        [DataRow("008000", 120.0, 100.0, 016.7)]         // green
+        [DataRow("80FFFF", 180.0, 040.0, 083.3)]         // cyan
+        [DataRow("8080FF", 240.0, 025.0, 066.7)]         // blue
+        [DataRow("BF40BF", 300.0, 057.1, 058.3)]         // magenta
         [DataRow("A0A424", 061.8, 069.9, 047.1)]
         [DataRow("411BEA", 251.1, 075.6, 042.6)]
         [DataRow("1EAC41", 134.9, 066.7, 034.9)]
@@ -197,6 +197,88 @@ namespace UnitTest_ColorPickerUI.Helpers
             Assert.AreEqual(result.intensity * 100d, intensity, 0.5d);
         }
 
+        // values taken from https://en.wikipedia.org/wiki/HSL_and_HSV#Examples
+        // and manual convert via https://colorconv.com/hwb
+        [TestMethod]
+        [DataRow("FFFFFF", 000, 100, 000)]         // white
+        [DataRow("808080", 000, 050, 050)]         // gray
+        [DataRow("000000", 000, 000, 100)]         // black
+        [DataRow("FF0000", 000, 000, 000)]         // red
+        [DataRow("BFBF00", 060, 000, 025)]         // yellow
+        [DataRow("008000", 120, 000, 050)]         // green
+        [DataRow("80FFFF", 180, 050, 000)]         // cyan
+        [DataRow("8080FF", 240, 050, 000)]         // blue
+        [DataRow("BF40BF", 300, 025, 025)]         // magenta
+        [DataRow("A0A424", 062, 014, 036)]
+        [DataRow("411BEA", 251, 011, 008)]
+        [DataRow("1EAC41", 135, 012, 033)]
+        [DataRow("F0C80E", 049, 005, 006)]
+        [DataRow("B430E5", 284, 019, 010)]
+        [DataRow("ED7651", 014, 032, 007)]
+        [DataRow("FEF888", 057, 053, 000)]
+        [DataRow("19CB97", 162, 010, 020)]
+        [DataRow("362698", 248, 015, 040)]
+        [DataRow("7E7EB8", 240, 049, 028)]
+        public void ColorRGBtoHWBTest(string hexValue, double hue, double whiteness, double blackness)
+        {
+            var red = int.Parse(hexValue.Substring(0, 2), NumberStyles.HexNumber);
+            var green = int.Parse(hexValue.Substring(2, 2), NumberStyles.HexNumber);
+            var blue = int.Parse(hexValue.Substring(4, 2), NumberStyles.HexNumber);
+
+            var color = Color.FromArgb(255, red, green, blue);
+            var result = ColorHelper.ConvertToHWBColor(color);
+
+            // hue[0°..360°]
+            Assert.AreEqual(result.hue, hue, 0.5d);
+
+            // whiteness[0..1]
+            Assert.AreEqual(result.whiteness * 100d, whiteness, 0.5d);
+
+            // blackness[0..1]
+            Assert.AreEqual(result.blackness * 100d, blackness, 0.5d);
+        }
+
+        // values taken from https://en.wikipedia.org/wiki/HSL_and_HSV#Examples
+        // and manual convert via https://colorconv.com/hwb
+        [TestMethod]
+        [DataRow("FFFFFF", "R0", 100, 000)]         // white
+        [DataRow("808080", "R0", 050, 050)]         // gray
+        [DataRow("000000", "R0", 000, 100)]         // black
+        [DataRow("FF0000", "R0", 000, 000)]         // red
+        [DataRow("BFBF00", "Y0", 000, 025)]         // yellow
+        [DataRow("008000", "G0", 000, 050)]         // green
+        [DataRow("80FFFF", "C0", 050, 000)]         // cyan
+        [DataRow("8080FF", "B0", 050, 000)]         // blue
+        [DataRow("BF40BF", "M0", 025, 025)]         // magenta
+        [DataRow("A0A424", "Y3", 014, 036)]
+        [DataRow("411BEA", "B18", 011, 008)]
+        [DataRow("1EAC41", "G25", 012, 033)]
+        [DataRow("F0C80E", "R82", 005, 006)]
+        [DataRow("B430E5", "B73", 019, 010)]
+        [DataRow("ED7651", "R24", 032, 007)]
+        [DataRow("FEF888", "R95", 053, 000)]
+        [DataRow("19CB97", "G71", 010, 020)]
+        [DataRow("362698", "B14", 015, 040)]
+        [DataRow("7E7EB8", "B0", 049, 028)]
+        public void ColorRGBtoNColTest(string hexValue, string hue, double whiteness, double blackness)
+        {
+            var red = int.Parse(hexValue.Substring(0, 2), NumberStyles.HexNumber);
+            var green = int.Parse(hexValue.Substring(2, 2), NumberStyles.HexNumber);
+            var blue = int.Parse(hexValue.Substring(4, 2), NumberStyles.HexNumber);
+
+            var color = Color.FromArgb(255, red, green, blue);
+            var result = ColorHelper.ConvertToNaturalColor(color);
+
+            // hue
+            Assert.AreEqual(result.hue, hue);
+
+            // whiteness[0..1]
+            Assert.AreEqual(result.whiteness * 100d, whiteness, 0.5d);
+
+            // blackness[0..1]
+            Assert.AreEqual(result.blackness * 100d, blackness, 0.5d);
+        }
+
         [TestMethod]
         public void ColorRGBtoCMYKZeroDivTest()
         {

From c4eccb36661a3d1d8217edde0ea23a177472b640 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 26 Oct 2020 15:24:37 +0100
Subject: [PATCH 05/15] correct order + correct docu

---
 .../Enumerations/ColorRepresentationType.cs   | 48 +++++++++----------
 .../Views/ColorPickerPage.xaml                | 10 ++--
 .../Helpers/ColorRepresentationHelper.cs      | 36 +++++++-------
 3 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs b/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs
index abcc78f775..76bddff8ef 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs
@@ -6,49 +6,49 @@ namespace Microsoft.PowerToys.Settings.UI.Library.Enumerations
 {
     public enum ColorRepresentationType
     {
-        /// <summary>
-        /// Color presentation as hexadecimal color value without the alpha-value (e.g. #0055FF)
-        /// </summary>
-        HEX = 0,
-
-        /// <summary>
-        /// Color presentation as RGB color value (red[0..255], green[0..255], blue[0..255])
-        /// </summary>
-        RGB = 1,
-
         /// <summary>
         /// Color presentation as CMYK color value (cyan[0%..100%], magenta[0%..100%], yellow[0%..100%], black key[0%..100%])
         /// </summary>
-        CMYK = 2,
+        CMYK = 0,
 
         /// <summary>
-        /// Color presentation as HSL color value (hue[0°..360°], saturation[0..100%], lightness[0%..100%])
+        /// Color presentation as hexadecimal color value without the alpha-value (e.g. #0055FF)
         /// </summary>
-        HSL = 3,
-
-        /// <summary>
-        /// Color presentation as HSV color value (hue[0°..360°], saturation[0%..100%], value[0%..100%])
-        /// </summary>
-        HSV = 4,
+        HEX = 1,
 
         /// <summary>
         /// Color presentation as HSB color value (hue[0°..360°], saturation[0%..100%], brightness[0%..100%])
         /// </summary>
-        HSB = 5,
+        HSB = 2,
 
         /// <summary>
-        /// Color presentation as HSI color value (hue[0°..360°], saturation[0%..100%], value[0%..100%])
+        /// Color presentation as HSI color value (hue[0°..360°], saturation[0%..100%], intensity[0%..100%])
         /// </summary>
-        HSI = 6,
+        HSI = 3,
+
+        /// <summary>
+        /// Color presentation as HSL color value (hue[0°..360°], saturation[0..100%], lightness[0%..100%])
+        /// </summary>
+        HSL = 4,
+
+        /// <summary>
+        /// Color presentation as HSV color value (hue[0°..360°], saturation[0%..100%], value[0%..100%])
+        /// </summary>
+        HSV = 5,
 
         /// <summary>
         /// Color presentation as HWB color value (hue[0°..360°], whiteness[0%..100%], blackness[0%..100%])
         /// </summary>
-        HWB = 7,
+        HWB = 6,
 
         /// <summary>
-        /// Color presentation as natural color (hue, saturation[0%..100%], value[0%..100%])
+        /// Color presentation as natural color (hue, whiteness[0%..100%], blackness[0%..100%])
         /// </summary>
-        NCol = 8,
+        NCol = 7,
+
+        /// <summary>
+        /// Color presentation as RGB color value (red[0..255], green[0..255], blue[0..255])
+        /// </summary>
+        RGB = 8,
     }
 }
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
index dac5f414d4..c5c58272e1 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -69,15 +69,15 @@
                       IsEnabled="{Binding IsEnabled}"
                       HorizontalAlignment="Left"
                       MinWidth="240">
-                <ComboBoxItem Content="HEX - #FFAA00"/>
-                <ComboBoxItem Content="RGB - rgb(100, 50, 75)"/>
                 <ComboBoxItem Content="CMYK - cmyk(100%, 50%, 75%, 0%)"/>
-                <ComboBoxItem Content="HSL - hsl(100, 50%, 75%)"/>
-                <ComboBoxItem Content="HSV - hsv(100, 50%, 75%)"/>
+                <ComboBoxItem Content="HEX - #FFAA00"/>
                 <ComboBoxItem Content="HSB - hsb(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HSI - hsi(100, 50%, 75%)"/>
+                <ComboBoxItem Content="HSL - hsl(100, 50%, 75%)"/>
+                <ComboBoxItem Content="HSV - hsv(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HBW - hbw(100, 50%, 75%)"/>
-                <ComboBoxItem Content="NCob - 10R, 50%, 75%"/>
+                <ComboBoxItem Content="NCol - 10R, 50%, 75%"/>
+                <ComboBoxItem Content="RGB - rgb(100, 50, 75)"/>
             </ComboBox>
 
                <!--
diff --git a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
index 7336d0c2a9..cd2ab33c06 100644
--- a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
@@ -24,13 +24,13 @@ namespace ColorPicker.Helpers
             => colorRepresentationType switch
             {
                 ColorRepresentationType.CMYK => ColorToCYMK(color),
-                ColorRepresentationType.NCol => ColorToNCol(color),
                 ColorRepresentationType.HEX => ColorToHex(color),
                 ColorRepresentationType.HSB => ColorToHSB(color),
                 ColorRepresentationType.HSI => ColorToHSI(color),
                 ColorRepresentationType.HSL => ColorToHSL(color),
                 ColorRepresentationType.HSV => ColorToHSV(color),
                 ColorRepresentationType.HWB => ColorToHWB(color),
+                ColorRepresentationType.NCol => ColorToNCol(color),
                 ColorRepresentationType.RGB => ColorToRGB(color),
 
                 // Fall-back value, when "_userSettings.CopiedColorRepresentation.Value" is incorrect
@@ -57,23 +57,6 @@ namespace ColorPicker.Helpers
                  + $", {blackKey.ToString(CultureInfo.InvariantCulture)}%)";
         }
 
-        /// <summary>
-        /// Return a <see cref="string"/> representation of a natural color
-        /// </summary>
-        /// <param name="color">The <see cref="Color"/> for the natural color presentation</param>
-        /// <returns>A <see cref="string"/> representation of a natural color</returns>
-        private static string ColorToNCol(Color color)
-        {
-            var (hue, whiteness, blackness) = ColorHelper.ConvertToNaturalColor(color);
-
-            whiteness = Math.Round(whiteness * 100);
-            blackness = Math.Round(blackness * 100);
-
-            return $"{hue}"
-                 + $", {whiteness.ToString(CultureInfo.InvariantCulture)}%"
-                 + $", {blackness.ToString(CultureInfo.InvariantCulture)}%";
-        }
-
         /// <summary>
         /// Return a hexadecimal <see cref="string"/> representation of a RGB color
         /// </summary>
@@ -176,6 +159,23 @@ namespace ColorPicker.Helpers
                  + $", {blackness.ToString(CultureInfo.InvariantCulture)}%)";
         }
 
+        /// <summary>
+        /// Return a <see cref="string"/> representation of a natural color
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> for the natural color presentation</param>
+        /// <returns>A <see cref="string"/> representation of a natural color</returns>
+        private static string ColorToNCol(Color color)
+        {
+            var (hue, whiteness, blackness) = ColorHelper.ConvertToNaturalColor(color);
+
+            whiteness = Math.Round(whiteness * 100);
+            blackness = Math.Round(blackness * 100);
+
+            return $"{hue}"
+                 + $", {whiteness.ToString(CultureInfo.InvariantCulture)}%"
+                 + $", {blackness.ToString(CultureInfo.InvariantCulture)}%";
+        }
+
         /// <summary>
         /// Return a <see cref="string"/> representation of a RGB color
         /// </summary>

From e2dd94332bfb85931d0e2659ac3519bc44271a05 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 26 Oct 2020 17:08:02 +0100
Subject: [PATCH 06/15] fix wrong name

---
 .../Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
index c5c58272e1..ccff9abe2c 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -76,7 +76,7 @@
                 <ComboBoxItem Content="HSL - hsl(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HSV - hsv(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HBW - hbw(100, 50%, 75%)"/>
-                <ComboBoxItem Content="NCol - 10R, 50%, 75%"/>
+                <ComboBoxItem Content="NCol - R10, 50%, 75%"/>
                 <ComboBoxItem Content="RGB - rgb(100, 50, 75)"/>
             </ComboBox>
 

From 25d7df470f9b6066f1a88cd924e8a8269dc6957d Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 26 Oct 2020 19:04:39 +0100
Subject: [PATCH 07/15] Address feedback - fix swapped color name (UI)

---
 .../Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
index ccff9abe2c..ab020af827 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -75,7 +75,7 @@
                 <ComboBoxItem Content="HSI - hsi(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HSL - hsl(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HSV - hsv(100, 50%, 75%)"/>
-                <ComboBoxItem Content="HBW - hbw(100, 50%, 75%)"/>
+                <ComboBoxItem Content="HWB - hbw(100, 50%, 75%)"/>
                 <ComboBoxItem Content="NCol - R10, 50%, 75%"/>
                 <ComboBoxItem Content="RGB - rgb(100, 50, 75)"/>
             </ComboBox>

From c0501bdc022b3e61e02447b99fb8bd26f7544400 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 26 Oct 2020 19:15:54 +0100
Subject: [PATCH 08/15] Address feedback

---
 .../Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
index ab020af827..5151bcd65b 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -75,7 +75,7 @@
                 <ComboBoxItem Content="HSI - hsi(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HSL - hsl(100, 50%, 75%)"/>
                 <ComboBoxItem Content="HSV - hsv(100, 50%, 75%)"/>
-                <ComboBoxItem Content="HWB - hbw(100, 50%, 75%)"/>
+                <ComboBoxItem Content="HWB - hwb(100, 50%, 75%)"/>
                 <ComboBoxItem Content="NCol - R10, 50%, 75%"/>
                 <ComboBoxItem Content="RGB - rgb(100, 50, 75)"/>
             </ComboBox>

From dc2751aa384c1eaa7a477472594f5a3e4d1a9f62 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 2 Nov 2020 21:47:58 +0100
Subject: [PATCH 09/15] Address feedback + cleanup

---
 .../Enumerations/ColorRepresentationType.cs   |  79 +++----
 .../ViewModels/ColorPickerViewModel.cs        |  97 +++++----
 .../Views/ColorPickerPage.xaml                | 196 +++++++++---------
 .../Views/ColorPickerPage.xaml.cs             |  28 +++
 4 files changed, 218 insertions(+), 182 deletions(-)

diff --git a/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs b/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs
index 76bddff8ef..9e456dfef6 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI.Library/Enumerations/ColorRepresentationType.cs
@@ -4,51 +4,56 @@
 
 namespace Microsoft.PowerToys.Settings.UI.Library.Enumerations
 {
+    // NOTE: don't change the order (numbers) of the enumeration entires
+
+    /// <summary>
+    /// The type of the color representation
+    /// </summary>
     public enum ColorRepresentationType
     {
-        /// <summary>
-        /// Color presentation as CMYK color value (cyan[0%..100%], magenta[0%..100%], yellow[0%..100%], black key[0%..100%])
-        /// </summary>
-        CMYK = 0,
-
         /// <summary>
         /// Color presentation as hexadecimal color value without the alpha-value (e.g. #0055FF)
         /// </summary>
-        HEX = 1,
-
-        /// <summary>
-        /// Color presentation as HSB color value (hue[0°..360°], saturation[0%..100%], brightness[0%..100%])
-        /// </summary>
-        HSB = 2,
-
-        /// <summary>
-        /// Color presentation as HSI color value (hue[0°..360°], saturation[0%..100%], intensity[0%..100%])
-        /// </summary>
-        HSI = 3,
-
-        /// <summary>
-        /// Color presentation as HSL color value (hue[0°..360°], saturation[0..100%], lightness[0%..100%])
-        /// </summary>
-        HSL = 4,
-
-        /// <summary>
-        /// Color presentation as HSV color value (hue[0°..360°], saturation[0%..100%], value[0%..100%])
-        /// </summary>
-        HSV = 5,
-
-        /// <summary>
-        /// Color presentation as HWB color value (hue[0°..360°], whiteness[0%..100%], blackness[0%..100%])
-        /// </summary>
-        HWB = 6,
-
-        /// <summary>
-        /// Color presentation as natural color (hue, whiteness[0%..100%], blackness[0%..100%])
-        /// </summary>
-        NCol = 7,
+        HEX = 0,
 
         /// <summary>
         /// Color presentation as RGB color value (red[0..255], green[0..255], blue[0..255])
         /// </summary>
-        RGB = 8,
+        RGB = 1,
+
+        /// <summary>
+        /// Color presentation as CMYK color value (cyan[0%..100%], magenta[0%..100%], yellow[0%..100%], black key[0%..100%])
+        /// </summary>
+        CMYK = 2,
+
+        /// <summary>
+        /// Color presentation as HSL color value (hue[0°..360°], saturation[0..100%], lightness[0%..100%])
+        /// </summary>
+        HSL = 3,
+
+        /// <summary>
+        /// Color presentation as HSV color value (hue[0°..360°], saturation[0%..100%], value[0%..100%])
+        /// </summary>
+        HSV = 4,
+
+        /// <summary>
+        /// Color presentation as HSB color value (hue[0°..360°], saturation[0%..100%], brightness[0%..100%])
+        /// </summary>
+        HSB = 5,
+
+        /// <summary>
+        /// Color presentation as HSI color value (hue[0°..360°], saturation[0%..100%], intensity[0%..100%])
+        /// </summary>
+        HSI = 6,
+
+        /// <summary>
+        /// Color presentation as HWB color value (hue[0°..360°], whiteness[0%..100%], blackness[0%..100%])
+        /// </summary>
+        HWB = 7,
+
+        /// <summary>
+        /// Color presentation as natural color (hue, whiteness[0%..100%], blackness[0%..100%])
+        /// </summary>
+        NCol = 8,
     }
 }
diff --git a/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs b/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
index 520427929e..cbff24aba7 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections.Generic;
 using System.Globalization;
 using System.Text.Json;
 using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
@@ -17,7 +18,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
 
         private readonly ISettingsUtils _settingsUtils;
 
-        private ColorPickerSettings _colorPickerSettings;
+        private readonly ColorPickerSettings _colorPickerSettings;
 
         private bool _isEnabled;
 
@@ -31,6 +32,19 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
                 throw new ArgumentNullException(nameof(settingsRepository));
             }
 
+            SelectableColorRepresentations = new Dictionary<ColorRepresentationType, string>
+            {
+                { ColorRepresentationType.CMYK, "CMYK - cmyk(100%, 50%, 75%, 0%)" },
+                { ColorRepresentationType.HEX,  "HEX - #FFAA00" },
+                { ColorRepresentationType.HSB,  "HSB - hsb(100, 50%, 75%)" },
+                { ColorRepresentationType.HSI,  "HSI - hsi(100, 50%, 75%)" },
+                { ColorRepresentationType.HSL,  "HSL - hsl(100, 50%, 75%)" },
+                { ColorRepresentationType.HSV,  "HSV - hsv(100, 50%, 75%)" },
+                { ColorRepresentationType.HWB,  "HWB - hwb(100, 50%, 75%)" },
+                { ColorRepresentationType.NCol, "NCol - R10, 50%, 75%" },
+                { ColorRepresentationType.RGB,  "RGB - rgb(100, 50, 75)" },
+            };
+
             GeneralSettingsConfig = settingsRepository.SettingsConfig;
 
             _settingsUtils = settingsUtils ?? throw new ArgumentNullException(nameof(settingsUtils));
@@ -49,80 +63,77 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             SendConfigMSG = ipcMSGCallBackFunc;
         }
 
+        /// <summary>
+        /// Gets a list with all selectable <see cref="ColorRepresentationType"/>s
+        /// </summary>
+        public IReadOnlyDictionary<ColorRepresentationType, string> SelectableColorRepresentations { get; }
+
         public bool IsEnabled
         {
-            get
-            {
-                return _isEnabled;
-            }
-
+            get => _isEnabled;
             set
             {
-                if (_isEnabled != value)
+                if (_isEnabled == value)
                 {
-                    _isEnabled = value;
-                    OnPropertyChanged(nameof(IsEnabled));
-
-                    // Set the status of ColorPicker in the general settings
-                    GeneralSettingsConfig.Enabled.ColorPicker = value;
-                    OutGoingGeneralSettings outgoing = new OutGoingGeneralSettings(GeneralSettingsConfig);
-
-                    SendConfigMSG(outgoing.ToString());
+                    return;
                 }
+
+                _isEnabled = value;
+                OnPropertyChanged(nameof(IsEnabled));
+
+                // Set the status of ColorPicker in the general settings
+                GeneralSettingsConfig.Enabled.ColorPicker = value;
+                var outgoing = new OutGoingGeneralSettings(GeneralSettingsConfig);
+
+                SendConfigMSG(outgoing.ToString());
             }
         }
 
         public bool ChangeCursor
         {
-            get
-            {
-                return _colorPickerSettings.Properties.ChangeCursor;
-            }
-
+            get => _colorPickerSettings.Properties.ChangeCursor;
             set
             {
-                if (_colorPickerSettings.Properties.ChangeCursor != value)
+                if (_colorPickerSettings.Properties.ChangeCursor == value)
                 {
-                    _colorPickerSettings.Properties.ChangeCursor = value;
-                    OnPropertyChanged(nameof(ChangeCursor));
-                    NotifySettingsChanged();
+                    return;
                 }
+
+                _colorPickerSettings.Properties.ChangeCursor = value;
+                OnPropertyChanged(nameof(ChangeCursor));
+                NotifySettingsChanged();
             }
         }
 
         public HotkeySettings ActivationShortcut
         {
-            get
-            {
-                return _colorPickerSettings.Properties.ActivationShortcut;
-            }
-
+            get => _colorPickerSettings.Properties.ActivationShortcut;
             set
             {
-                if (_colorPickerSettings.Properties.ActivationShortcut != value)
+                if (_colorPickerSettings.Properties.ActivationShortcut == value)
                 {
-                    _colorPickerSettings.Properties.ActivationShortcut = value;
-                    OnPropertyChanged(nameof(ActivationShortcut));
-                    NotifySettingsChanged();
+                    return;
                 }
+
+                _colorPickerSettings.Properties.ActivationShortcut = value;
+                OnPropertyChanged(nameof(ActivationShortcut));
+                NotifySettingsChanged();
             }
         }
 
-        public int CopiedColorRepresentationIndex
+        public ColorRepresentationType SelectedColorRepresentationValue
         {
-            get
-            {
-                return (int)_colorPickerSettings.Properties.CopiedColorRepresentation;
-            }
-
+            get => _colorPickerSettings.Properties.CopiedColorRepresentation;
             set
             {
-                if (_colorPickerSettings.Properties.CopiedColorRepresentation != (ColorRepresentationType)value)
+                if (_colorPickerSettings.Properties.CopiedColorRepresentation == value)
                 {
-                    _colorPickerSettings.Properties.CopiedColorRepresentation = (ColorRepresentationType)value;
-                    OnPropertyChanged(nameof(CopiedColorRepresentationIndex));
-                    NotifySettingsChanged();
+                    return;
                 }
+
+                _colorPickerSettings.Properties.CopiedColorRepresentation = value;
+                OnPropertyChanged(nameof(SelectedColorRepresentationValue));
+                NotifySettingsChanged();
             }
         }
 
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
index 5151bcd65b..1c9b6333b7 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -13,6 +13,95 @@
     AutomationProperties.LandmarkType="Main">
 
     <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <StackPanel x:Name="ColorPickerView" Orientation="Vertical">
+            <ToggleSwitch x:Uid="ColorPicker_EnableColorPicker" IsOn="{Binding IsEnabled, Mode=TwoWay}" />
+
+            <Custom:HotkeySettingsControl x:Uid="ColorPicker_ActivationShortcut"
+                                          MinWidth="240"
+                                          Margin="{StaticResource MediumTopMargin}"
+                                          HorizontalAlignment="Left"
+                                          Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
+                                          HotkeySettings="{x:Bind Path=ViewModel.ActivationShortcut, Mode=TwoWay}"
+                                          Keys="Win, Ctrl, Alt, Shift" />
+
+            <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
+                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"
+                       Style="{StaticResource SettingsGroupTitleStyle}" />
+
+            <ComboBox x:Name="ColorPicker_ComboBox"
+                      x:Uid="ColorPicker_CopiedColorRepresentation"
+                      MinWidth="240"
+                      Margin="{StaticResource SmallTopMargin}"
+                      HorizontalAlignment="Left"
+                      DisplayMemberPath="Value"
+                      IsEnabled="{Binding IsEnabled}"
+                      ItemsSource="{Binding SelectableColorRepresentations}"
+                      Loaded="ColorPicker_ComboBox_Loaded"
+                      SelectedValue="{Binding SelectedColorRepresentationValue, Mode=TwoWay}"
+                      SelectedValuePath="Key" />
+
+            <!--
+            Disabling this until we have a safer way to reset cursor as
+            we can hit a state where the cursor doesn't reset
+
+            <CheckBox x:Uid="ColorPicker_ChangeCursor"
+                          IsChecked="{Binding ChangeCursor, Mode=TwoWay}"
+                          Margin="{StaticResource SmallTopMargin}"
+                          IsEnabled="{Binding IsEnabled}"/>
+            -->
+        </StackPanel>
+
+        <RelativePanel x:Name="SidePanel"
+                       Grid.Column="1"
+                       Width="{StaticResource SidePanelWidth}"
+                       HorizontalAlignment="Left">
+            <StackPanel x:Name="DescriptionPanel">
+                <TextBlock x:Name="AboutTitle"
+                           x:Uid="About_ColorPicker"
+                           Grid.ColumnSpan="2"
+                           Margin="{StaticResource XSmallBottomMargin}"
+                           Style="{StaticResource SettingsGroupTitleStyle}" />
+                <TextBlock x:Uid="ColorPicker_Description"
+                           Grid.Row="1"
+                           TextWrapping="Wrap" />
+            </StackPanel>
+
+            <Border x:Name="AboutImage"
+                    Grid.Row="2"
+                    MaxWidth="240"
+                    Margin="{StaticResource SmallTopBottomMargin}"
+                    HorizontalAlignment="Left"
+                    CornerRadius="4"
+                    RelativePanel.Below="DescriptionPanel">
+                <Image x:Uid="ColorPicker_Image" Source="ms-appx:///Assets/Modules/ColorPicker.png" />
+            </Border>
+            <StackPanel x:Name="LinksPanel"
+                        Margin="0,1,0,0"
+                        Orientation="Vertical"
+                        RelativePanel.Below="AboutImage">
+                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ColorPicker">
+                    <TextBlock x:Uid="Module_overview" />
+                </HyperlinkButton>
+                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
+                    <TextBlock x:Uid="Give_Feedback" />
+                </HyperlinkButton>
+
+                <TextBlock x:Uid="AttributionTitle" Style="{StaticResource SettingsGroupTitleStyle}" />
+
+                <HyperlinkButton Margin="0,-3,0,0" NavigateUri="https://github.com/martinchrzan/ColorPicker/">
+                    <TextBlock Text="Martin Chrzan's Color Picker" TextWrapping="Wrap" />
+                </HyperlinkButton>
+            </StackPanel>
+        </RelativePanel>
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
                 <VisualState x:Name="WideLayout">
@@ -26,113 +115,16 @@
                         <AdaptiveTrigger MinWindowWidth="0" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
-                        <Setter Target="SidePanel.Width" Value="Auto"/>
+                        <Setter Target="SidePanel.(Grid.Column)" Value="0" />
+                        <Setter Target="SidePanel.Width" Value="Auto" />
                         <Setter Target="ColorPickerView.(Grid.Row)" Value="1" />
-                        <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
-                        <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
-                        <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
+                        <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
+                        <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
+                        <Setter Target="AboutImage.Margin" Value="0,12,12,0" />
                         <Setter Target="AboutTitle.Visibility" Value="Collapsed" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-
-        <StackPanel Orientation="Vertical" x:Name="ColorPickerView">
-            <ToggleSwitch x:Uid="ColorPicker_EnableColorPicker" 
-                          IsOn="{Binding IsEnabled, Mode=TwoWay}"/>
-
-            <Custom:HotkeySettingsControl x:Uid="ColorPicker_ActivationShortcut"
-                                          Margin="{StaticResource MediumTopMargin}"
-                                          HotkeySettings="{x:Bind Path=ViewModel.ActivationShortcut, Mode=TwoWay}"
-                                          Keys="Win, Ctrl, Alt, Shift"
-                                          Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                                          HorizontalAlignment="Left"
-                                          MinWidth="240"
-                                          />
-
-            <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
-        
-            <ComboBox x:Uid="ColorPicker_CopiedColorRepresentation"
-                      SelectedIndex="{Binding CopiedColorRepresentationIndex, Mode=TwoWay}"
-                      Margin="{StaticResource SmallTopMargin}"
-                      IsEnabled="{Binding IsEnabled}"
-                      HorizontalAlignment="Left"
-                      MinWidth="240">
-                <ComboBoxItem Content="CMYK - cmyk(100%, 50%, 75%, 0%)"/>
-                <ComboBoxItem Content="HEX - #FFAA00"/>
-                <ComboBoxItem Content="HSB - hsb(100, 50%, 75%)"/>
-                <ComboBoxItem Content="HSI - hsi(100, 50%, 75%)"/>
-                <ComboBoxItem Content="HSL - hsl(100, 50%, 75%)"/>
-                <ComboBoxItem Content="HSV - hsv(100, 50%, 75%)"/>
-                <ComboBoxItem Content="HWB - hwb(100, 50%, 75%)"/>
-                <ComboBoxItem Content="NCol - R10, 50%, 75%"/>
-                <ComboBoxItem Content="RGB - rgb(100, 50, 75)"/>
-            </ComboBox>
-
-               <!--
-            Disabling this until we have a safer way to reset cursor as 
-            we can hit a state where the cursor doesn't reset
-           
-            <CheckBox x:Uid="ColorPicker_ChangeCursor" 
-                          IsChecked="{Binding ChangeCursor, Mode=TwoWay}"
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{Binding IsEnabled}"/>
-                          -->
-        </StackPanel>
-
-        <RelativePanel x:Name="SidePanel" 
-                    HorizontalAlignment="Left"
-                    Width="{StaticResource SidePanelWidth}"
-                    Grid.Column="1">
-            <StackPanel x:Name="DescriptionPanel">
-                <TextBlock x:Uid="About_ColorPicker" x:Name="AboutTitle" Grid.ColumnSpan="2"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock x:Uid="ColorPicker_Description"
-                           TextWrapping="Wrap"
-                           Grid.Row="1" />
-            </StackPanel>
-
-            <Border x:Name="AboutImage"
-                    CornerRadius="4"
-                    Grid.Row="2"
-                    MaxWidth="240"
-                    HorizontalAlignment="Left"
-                    Margin="{StaticResource SmallTopBottomMargin}"
-                    RelativePanel.Below="DescriptionPanel">
-                <Image x:Uid="ColorPicker_Image" Source="ms-appx:///Assets/Modules/ColorPicker.png" />
-            </Border>
-            <StackPanel x:Name="LinksPanel"
-                        Margin="0,1,0,0"
-                        RelativePanel.Below="AboutImage"
-                        Orientation="Vertical" >
-                <HyperlinkButton NavigateUri="https://aka.ms/PowerToysOverview_ColorPicker">
-                    <TextBlock x:Uid="Module_overview" />
-                </HyperlinkButton>
-                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
-                    <TextBlock x:Uid="Give_Feedback" />
-                </HyperlinkButton>
-
-                <TextBlock 
-                x:Uid="AttributionTitle"
-                Style="{StaticResource SettingsGroupTitleStyle}" />
-
-                <HyperlinkButton Margin="0,-3,0,0"
-                                NavigateUri="https://github.com/martinchrzan/ColorPicker/">
-                    <TextBlock Text="Martin Chrzan's Color Picker" TextWrapping="Wrap" />
-                </HyperlinkButton>
-            </StackPanel>
-        </RelativePanel>
     </Grid>
 </Page>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs
index 6d994eedc2..8c9a3cd80e 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs
@@ -21,5 +21,33 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             DataContext = ViewModel;
             InitializeComponent();
         }
+
+        /// <summary>
+        /// Event is called when the <see cref="ComboBox"/> is completly loaded, inclusive the ItemSource
+        /// </summary>
+        /// <param name="sender">The sender of this event</param>
+        /// <param name="e">The arguments of this event</param>
+        private void ColorPicker_ComboBox_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        {
+           /**
+            * UWP hack
+            * because UWP load the binded ItemSource of the ComboBox asyncronous,
+            * so after InitializeComponent() the ItemSource is still empty and can't automatically select a entry.
+            * Selection via SelectedItem and SelectedValue is still not working too
+            */
+            var index = 0;
+
+            foreach (var item in ViewModel.SelectableColorRepresentations)
+            {
+                if (item.Key == ViewModel.SelectedColorRepresentationValue)
+                {
+                    break;
+                }
+
+                index++;
+            }
+
+            ColorPicker_ComboBox.SelectedIndex = index;
+        }
     }
 }

From 36f55ae80cf554e11dfee2d754748416c0c1e14c Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Tue, 3 Nov 2020 21:36:11 +0100
Subject: [PATCH 10/15] Address feedback

---
 .../ViewModels/ColorPickerViewModel.cs        | 50 ++++++++-----------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs b/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
index cbff24aba7..9d6dce41d6 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
@@ -73,19 +73,17 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             get => _isEnabled;
             set
             {
-                if (_isEnabled == value)
+                if (_isEnabled != value)
                 {
-                    return;
+                    _isEnabled = value;
+                    OnPropertyChanged(nameof(IsEnabled));
+
+                    // Set the status of ColorPicker in the general settings
+                    GeneralSettingsConfig.Enabled.ColorPicker = value;
+                    var outgoing = new OutGoingGeneralSettings(GeneralSettingsConfig);
+
+                    SendConfigMSG(outgoing.ToString());
                 }
-
-                _isEnabled = value;
-                OnPropertyChanged(nameof(IsEnabled));
-
-                // Set the status of ColorPicker in the general settings
-                GeneralSettingsConfig.Enabled.ColorPicker = value;
-                var outgoing = new OutGoingGeneralSettings(GeneralSettingsConfig);
-
-                SendConfigMSG(outgoing.ToString());
             }
         }
 
@@ -94,14 +92,12 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             get => _colorPickerSettings.Properties.ChangeCursor;
             set
             {
-                if (_colorPickerSettings.Properties.ChangeCursor == value)
+                if (_colorPickerSettings.Properties.ChangeCursor != value)
                 {
-                    return;
+                    _colorPickerSettings.Properties.ChangeCursor = value;
+                    OnPropertyChanged(nameof(ChangeCursor));
+                    NotifySettingsChanged();
                 }
-
-                _colorPickerSettings.Properties.ChangeCursor = value;
-                OnPropertyChanged(nameof(ChangeCursor));
-                NotifySettingsChanged();
             }
         }
 
@@ -110,14 +106,12 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             get => _colorPickerSettings.Properties.ActivationShortcut;
             set
             {
-                if (_colorPickerSettings.Properties.ActivationShortcut == value)
+                if (_colorPickerSettings.Properties.ActivationShortcut != value)
                 {
-                    return;
+                    _colorPickerSettings.Properties.ActivationShortcut = value;
+                    OnPropertyChanged(nameof(ActivationShortcut));
+                    NotifySettingsChanged();
                 }
-
-                _colorPickerSettings.Properties.ActivationShortcut = value;
-                OnPropertyChanged(nameof(ActivationShortcut));
-                NotifySettingsChanged();
             }
         }
 
@@ -126,14 +120,12 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             get => _colorPickerSettings.Properties.CopiedColorRepresentation;
             set
             {
-                if (_colorPickerSettings.Properties.CopiedColorRepresentation == value)
+                if (_colorPickerSettings.Properties.CopiedColorRepresentation != value)
                 {
-                    return;
+                    _colorPickerSettings.Properties.CopiedColorRepresentation = value;
+                    OnPropertyChanged(nameof(SelectedColorRepresentationValue));
+                    NotifySettingsChanged();
                 }
-
-                _colorPickerSettings.Properties.CopiedColorRepresentation = value;
-                OnPropertyChanged(nameof(SelectedColorRepresentationValue));
-                NotifySettingsChanged();
             }
         }
 

From d192e6feb6a7c8920f384cb77fddc41a6b30c67c Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 9 Nov 2020 06:30:36 +0100
Subject: [PATCH 11/15] fix misspellings

---
 .github/actions/spell-check/expect.txt                      | 5 +++++
 .github/actions/spell-check/patterns.txt                    | 3 +++
 .../Views/ColorPickerPage.xaml.cs                           | 4 ++--
 .../ColorPickerUI/Helpers/ColorRepresentationHelper.cs      | 6 +++---
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/.github/actions/spell-check/expect.txt b/.github/actions/spell-check/expect.txt
index beae360464..211ffc92e7 100644
--- a/.github/actions/spell-check/expect.txt
+++ b/.github/actions/spell-check/expect.txt
@@ -903,6 +903,8 @@ hresult
 hrgn
 HRSRC
 HSCROLL
+hsb
+hsi
 hsl
 hstring
 hsv
@@ -913,6 +915,7 @@ html
 htt
 http
 hu
+hwb
 HWINEVENTHOOK
 hwnd
 HWNDFIRST
@@ -1087,6 +1090,7 @@ IPrincipal
 IProgram
 IPublic
 IQuery
+IReadOnlyDictionary
 IReflect
 IRegistered
 IRegistration
@@ -1438,6 +1442,7 @@ NCMBUTTONDOWN
 NCMBUTTONUP
 NCMOUSELEAVE
 NCMOUSEMOVE
+NCol
 NCPAINT
 NCRBUTTONDBLCLK
 NCRBUTTONDOWN
diff --git a/.github/actions/spell-check/patterns.txt b/.github/actions/spell-check/patterns.txt
index 60513959e0..46aec12d98 100644
--- a/.github/actions/spell-check/patterns.txt
+++ b/.github/actions/spell-check/patterns.txt
@@ -10,6 +10,9 @@ data:[a-zA-Z=;,/0-9+-]+
 "Lorem[^"]+?\."
 TestCase\("[^"]+"
 
+# Test line with hexadecimal colors
+\[DataRow\("[0-9A-F]{6}", \d{3}, \d{3}, \d{3}\)\]
+
 # Windows paths
 \\native
 \\notifications
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs
index 8c9a3cd80e..c7a17a3335 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml.cs
@@ -23,7 +23,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         }
 
         /// <summary>
-        /// Event is called when the <see cref="ComboBox"/> is completly loaded, inclusive the ItemSource
+        /// Event is called when the <see cref="ComboBox"/> is completely loaded, inclusive the ItemSource
         /// </summary>
         /// <param name="sender">The sender of this event</param>
         /// <param name="e">The arguments of this event</param>
@@ -31,7 +31,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         {
            /**
             * UWP hack
-            * because UWP load the binded ItemSource of the ComboBox asyncronous,
+            * because UWP load the bound ItemSource of the ComboBox asynchronous,
             * so after InitializeComponent() the ItemSource is still empty and can't automatically select a entry.
             * Selection via SelectedItem and SelectedValue is still not working too
             */
diff --git a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
index cd2ab33c06..b21304a9ab 100644
--- a/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
+++ b/src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs
@@ -74,15 +74,15 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a HSB color</returns>
         private static string ColorToHSB(Color color)
         {
-            var (hue, saturation, brightnes) = ColorHelper.ConvertToHSBColor(color);
+            var (hue, saturation, brightness) = ColorHelper.ConvertToHSBColor(color);
 
             hue = Math.Round(hue);
             saturation = Math.Round(saturation * 100);
-            brightnes = Math.Round(brightnes * 100);
+            brightness = Math.Round(brightness * 100);
 
             return $"hsb({hue.ToString(CultureInfo.InvariantCulture)}"
                  + $", {saturation.ToString(CultureInfo.InvariantCulture)}%"
-                 + $", {brightnes.ToString(CultureInfo.InvariantCulture)}%)";
+                 + $", {brightness.ToString(CultureInfo.InvariantCulture)}%)";
         }
 
         /// <summary>

From 772255e4e00f494ef095d20fc336b2460d1c3ee8 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 9 Nov 2020 06:46:13 +0100
Subject: [PATCH 12/15] fix spelling

---
 .github/actions/spell-check/expect.txt   | 3 ++-
 .github/actions/spell-check/patterns.txt | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/actions/spell-check/expect.txt b/.github/actions/spell-check/expect.txt
index 211ffc92e7..358f731159 100644
--- a/.github/actions/spell-check/expect.txt
+++ b/.github/actions/spell-check/expect.txt
@@ -295,6 +295,7 @@ codeofconduct
 codereview
 COINIT
 Colorbrush
+colorconv
 colorpicker
 colorpickerref
 COLORREF
@@ -1090,7 +1091,7 @@ IPrincipal
 IProgram
 IPublic
 IQuery
-IReadOnlyDictionary
+IRead
 IReflect
 IRegistered
 IRegistration
diff --git a/.github/actions/spell-check/patterns.txt b/.github/actions/spell-check/patterns.txt
index 46aec12d98..0e77f4806e 100644
--- a/.github/actions/spell-check/patterns.txt
+++ b/.github/actions/spell-check/patterns.txt
@@ -12,6 +12,8 @@ TestCase\("[^"]+"
 
 # Test line with hexadecimal colors
 \[DataRow\("[0-9A-F]{6}", \d{3}, \d{3}, \d{3}\)\]
+\[DataRow\("[0-9A-F]{6}", \d{3}.\d{1}, \d{3}.\d{1}, \d{3}.\d{1}\)\]
+\[DataRow\("[0-9A-F]{6}", "[0-9BCGMRY]3", \d{3}, \d{3}\)\]
 
 # Windows paths
 \\native

From 4a2533503689c563de95486c995b5100452c5da4 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 9 Nov 2020 06:48:12 +0100
Subject: [PATCH 13/15] fix wrong pattern

---
 .github/actions/spell-check/patterns.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/actions/spell-check/patterns.txt b/.github/actions/spell-check/patterns.txt
index 0e77f4806e..d2e14e1d01 100644
--- a/.github/actions/spell-check/patterns.txt
+++ b/.github/actions/spell-check/patterns.txt
@@ -13,7 +13,7 @@ TestCase\("[^"]+"
 # Test line with hexadecimal colors
 \[DataRow\("[0-9A-F]{6}", \d{3}, \d{3}, \d{3}\)\]
 \[DataRow\("[0-9A-F]{6}", \d{3}.\d{1}, \d{3}.\d{1}, \d{3}.\d{1}\)\]
-\[DataRow\("[0-9A-F]{6}", "[0-9BCGMRY]3", \d{3}, \d{3}\)\]
+\[DataRow\("[0-9A-F]{6}", "[0-9BCGMRY]", \d{3}, \d{3}\)\]
 
 # Windows paths
 \\native

From f8e6802e3f9c7772a09f67d532ee99cf3f7aa9d0 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 9 Nov 2020 09:33:57 +0100
Subject: [PATCH 14/15] Fix pattern

---
 .github/actions/spell-check/patterns.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/actions/spell-check/patterns.txt b/.github/actions/spell-check/patterns.txt
index d2e14e1d01..e5192cd0c3 100644
--- a/.github/actions/spell-check/patterns.txt
+++ b/.github/actions/spell-check/patterns.txt
@@ -13,7 +13,7 @@ TestCase\("[^"]+"
 # Test line with hexadecimal colors
 \[DataRow\("[0-9A-F]{6}", \d{3}, \d{3}, \d{3}\)\]
 \[DataRow\("[0-9A-F]{6}", \d{3}.\d{1}, \d{3}.\d{1}, \d{3}.\d{1}\)\]
-\[DataRow\("[0-9A-F]{6}", "[0-9BCGMRY]", \d{3}, \d{3}\)\]
+\[DataRow\("[0-9A-F]{6}", "[BCGMRY]\d\d?", \d{3}, \d{3}\)\]
 
 # Windows paths
 \\native

From 83b2ffd0c972c8e238715489064e9cf396905d62 Mon Sep 17 00:00:00 2001
From: "Sekan, Tobias" <tobias.sekan@startmail.com>
Date: Mon, 9 Nov 2020 09:50:55 +0100
Subject: [PATCH 15/15] Commit to Re-Trigger Github PR

---
 .../colorPicker/ColorPickerUI/ViewModels/MainViewModel.cs        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/colorPicker/ColorPickerUI/ViewModels/MainViewModel.cs b/src/modules/colorPicker/ColorPickerUI/ViewModels/MainViewModel.cs
index a600471f61..d747eae0a2 100644
--- a/src/modules/colorPicker/ColorPickerUI/ViewModels/MainViewModel.cs
+++ b/src/modules/colorPicker/ColorPickerUI/ViewModels/MainViewModel.cs
@@ -15,7 +15,6 @@ using ColorPicker.Mouse;
 using ColorPicker.Settings;
 using ColorPicker.Telemetry;
 using ColorPicker.ViewModelContracts;
-using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Telemetry;
 
 namespace ColorPicker.ViewModels