[ColorPicker]Custom color formats (#22141)

* [ColorPicker] Development: custom color formats, first steps

* ColorPicker development of custom format handling.

* Custom color format developmnet.
Added common helper class for format string
Fixed settings loading
Added numbering if default name exists   (My format (1))

* Custom color format implementation.
Extended the colorPicker settings with the format string
Updated the color to string conversion

* Custom color format in color picker, development.
Adding edit, delete buttons. Implement functionality
Re-arranging settings panel (newly created formats at the top)
Implementing details (valid parameters, more format elements, more types)

* Minor commit

* Development color picker custom formats. "Last" steps.
Replacing hard coded english strings with resources, polishing.

* Adding help to the format edit dialog.

* Undoing changes unwillingly commited in Host module

* Fixing bug unable to delete a custom format after renaming it - use the colorformat object as reference (and not the name)
Modifying the default custom formula
Removing unnecessary using directives

* Udating the default user defined color format

* Removing unnecessary using directive

* ColorPicker Implementing custom color formats: adding custom formats to the default format selection (dropdown box).

* Fix binding of name and example

* Custom color formats, implemented steps:
vorwarts compatibility loading settings.
Fixed UI as requested (removed one settings panel, added button to the first panel)

* Minor change in the UI: description modified

* ColorPicker Custom Color Formats develepoment.
Added conversion from old predefined formats to customizable formats.
Extended default settings (in case settings file is deleted/corrupted).
Minor fixes.

* Fixing color format parameters.
Implementing 3 different Saturation calculations, 2 Hue calculations and 2 Lightness calculations (depending color format)

* Color Picker: New/Edit Color format. Fixing bug when cancelling addition/edit

* ColorPicker. Updating help section, available parameters

* Fix spellchecker

* Remove the MinWidth so that scrollviewers can be drawn

* ColorPicker bugfix: Not allowing to delete the last color format.

.github/actions/spell-check/excludes.txt

@@ -78,6 +78,7 @@
 ^\Q.github/workflows/spelling2.yml\E$
 ^\Q.pipelines/ESRPSigning_core.json\E$
 ^\Qsrc/modules/colorPicker/ColorPickerUI/Shaders/GridShader.cso\E$
+^\Qsrc/common/ManagedCommon/ColorFormatHelper.cs\E$
 ^\Qsrc/settings-ui/Settings.UI.UnitTests/BackwardsCompatibility/TestFiles/CorruptJson/Microsoft/PowerToys/settings.json\E$
 ^\Qsrc/settings-ui/Settings.UI.UnitTests/BackwardsCompatibility/TestFiles/v0.18.2/Microsoft/PowerToys/PowerRename/power-rename-ui-flags\E$
 ^\Qsrc/settings-ui/Settings.UI.UnitTests/BackwardsCompatibility/TestFiles/v0.19.2/Microsoft/PowerToys/PowerRename/power-rename-ui-flags\E$

.github/actions/spell-check/expect.txt

@@ -163,7 +163,7 @@ brucelindbloom
 bsd
 bstr
 bti
-Btn
+btn
 BTNFACE
 Bto
 buf
@@ -204,8 +204,8 @@ Chrzan
 CHT
 Chukotka
 Chuuk
-cielab
-ciexyz
+CIELAB
+CIEXYZ
 cim
 CImage
 cla
@@ -1119,7 +1119,7 @@ NCMBUTTONDOWN
 NCMBUTTONUP
 NCMOUSELEAVE
 NCMOUSEMOVE
-ncol
+NCol
 NCPAINT
 NCRBUTTONDBLCLK
 NCRBUTTONDOWN

src/common/ManagedCommon/ColorFormatHelper.cs

@@ -0,0 +1,498 @@
+// 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 ManagedCommon
+{
+    using System;
+    using System.Collections.Generic;
+    using System.Drawing;
+    using System.Globalization;
+
+    public static class ColorFormatHelper
+    {
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a CMYK 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>
+        public static (double cyan, double magenta, double yellow, double blackKey) ConvertToCMYKColor(Color color)
+        {
+            // special case for black (avoid division by zero)
+            if (color.R == 0 && color.G == 0 && color.B == 0)
+            {
+                return (0d, 0d, 0d, 1d);
+            }
+
+            var red = color.R / 255d;
+            var green = color.G / 255d;
+            var blue = color.B / 255d;
+
+            var blackKey = 1d - Math.Max(Math.Max(red, green), blue);
+
+            // special case for black (avoid division by zero)
+            if (1d - blackKey == 0d)
+            {
+                return (0d, 0d, 0d, 1d);
+            }
+
+            var cyan = (1d - red - blackKey) / (1d - blackKey);
+            var magenta = (1d - green - blackKey) / (1d - blackKey);
+            var yellow = (1d - blue - blackKey) / (1d - blackKey);
+
+            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>
+        public static (double hue, double saturation, double brightness) ConvertToHSBColor(Color color)
+        {
+            // HSB and HSV represents the same color space
+            return ConvertToHSVColor(color);
+        }
+
+        /// <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>
+        public 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 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>
+        public 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;
+
+            return (color.GetHue(), 1d - (min / intensity), intensity);
+        }
+
+        /// <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>
+        public 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 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>
+        public 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 CIE LAB color (LAB)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The lightness [0..100] and two chromaticities [-128..127]</returns>
+        public static (double lightness, double chromaticityA, double chromaticityB) ConvertToCIELABColor(Color color)
+        {
+            var xyz = ConvertToCIEXYZColor(color);
+            var lab = GetCIELABColorFromCIEXYZ(xyz.x, xyz.y, xyz.z);
+
+            return lab;
+        }
+
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a CIE XYZ color (XYZ)
+        /// The constants of the formula matches this Wikipedia page, but at a higher precision:
+        /// https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation_(sRGB_to_CIE_XYZ)
+        /// This page provides a method to calculate the constants:
+        /// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The X [0..1], Y [0..1] and Z [0..1]</returns>
+        public static (double x, double y, double z) ConvertToCIEXYZColor(Color color)
+        {
+            double r = color.R / 255d;
+            double g = color.G / 255d;
+            double b = color.B / 255d;
+
+            // inverse companding, gamma correction must be undone
+            double rLinear = (r > 0.04045) ? Math.Pow((r + 0.055) / 1.055, 2.4) : (r / 12.92);
+            double gLinear = (g > 0.04045) ? Math.Pow((g + 0.055) / 1.055, 2.4) : (g / 12.92);
+            double bLinear = (b > 0.04045) ? Math.Pow((b + 0.055) / 1.055, 2.4) : (b / 12.92);
+
+            return (
+                (rLinear * 0.41239079926595948) + (gLinear * 0.35758433938387796) + (bLinear * 0.18048078840183429),
+                (rLinear * 0.21263900587151036) + (gLinear * 0.71516867876775593) + (bLinear * 0.07219231536073372),
+                (rLinear * 0.01933081871559185) + (gLinear * 0.11919477979462599) + (bLinear * 0.95053215224966058)
+            );
+        }
+
+        /// <summary>
+        /// Convert a CIE XYZ color <see cref="double"/> to a CIE LAB color (LAB) adapted to sRGB D65 white point
+        /// The constants of the formula used come from this wikipedia page:
+        /// https://en.wikipedia.org/wiki/CIELAB_color_space#Converting_between_CIELAB_and_CIEXYZ_coordinates
+        /// </summary>
+        /// <param name="x">The <see cref="x"/> represents a mix of the three CIE RGB curves</param>
+        /// <param name="y">The <see cref="y"/> represents the luminance</param>
+        /// <param name="z">The <see cref="z"/> is quasi-equal to blue (of CIE RGB)</param>
+        /// <returns>The lightness [0..100] and two chromaticities [-128..127]</returns>
+        private static (double lightness, double chromaticityA, double chromaticityB)
+            GetCIELABColorFromCIEXYZ(double x, double y, double z)
+        {
+            // sRGB reference white (x=0.3127, y=0.3290, Y=1.0), actually CIE Standard Illuminant D65 truncated to 4 decimal places,
+            // then converted to XYZ using the formula:
+            //   X = x * (Y / y)
+            //   Y = Y
+            //   Z = (1 - x - y) * (Y / y)
+            double x_n = 0.9504559270516717;
+            double y_n = 1.0;
+            double z_n = 1.0890577507598784;
+
+            // Scale XYZ values relative to reference white
+            x /= x_n;
+            y /= y_n;
+            z /= z_n;
+
+            // XYZ to CIELab transformation
+            double delta = 6d / 29;
+            double m = (1d / 3) * Math.Pow(delta, -2);
+            double t = Math.Pow(delta, 3);
+
+            double fx = (x > t) ? Math.Pow(x, 1.0 / 3.0) : (x * m) + (16.0 / 116.0);
+            double fy = (y > t) ? Math.Pow(y, 1.0 / 3.0) : (y * m) + (16.0 / 116.0);
+            double fz = (z > t) ? Math.Pow(z, 1.0 / 3.0) : (z * m) + (16.0 / 116.0);
+
+            double l = (116 * fy) - 16;
+            double a = 500 * (fx - fy);
+            double b = 200 * (fy - fz);
+
+            return (l, a, b);
+        }
+
+        /// <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>
+        public 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)
+        {
+            if (hue < 60d)
+            {
+                return $"R{Math.Round(hue / 0.6d, 0)}";
+            }
+
+            if (hue < 120d)
+            {
+                return $"Y{Math.Round((hue - 60d) / 0.6d, 0)}";
+            }
+
+            if (hue < 180d)
+            {
+                return $"G{Math.Round((hue - 120d) / 0.6d, 0)}";
+            }
+
+            if (hue < 240d)
+            {
+                return $"C{Math.Round((hue - 180d) / 0.6d, 0)}";
+            }
+
+            if (hue < 300d)
+            {
+                return $"B{Math.Round((hue - 240d) / 0.6d, 0)}";
+            }
+
+            return $"M{Math.Round((hue - 300d) / 0.6d, 0)}";
+        }
+
+        private static readonly Dictionary<string, char> DefaultFormatTypes = new Dictionary<string, char>()
+        {
+            { "Re", 'b' },   // red              byte
+            { "Gr", 'b' },   // green            byte
+            { "Bl", 'b' },   // blue             byte
+            { "Al", 'b' },   // alpha            byte
+            { "Cy", 'p' },   // cyan             percent
+            { "Ma", 'p' },   // magenta          percent
+            { "Ye", 'p' },   // yellow           percent
+            { "Bk", 'p' },   // black key        percent
+            { "Hu", 'i' },   // hue              int
+            { "Hn", 'i' },   // hue natural      string
+            { "Si", 'p' },   // saturation (HSI) percent
+            { "Sl", 'p' },   // saturation (HSL) percent
+            { "Sb", 'p' },   // saturation (HSB) percent
+            { "Br", 'p' },   // brightness       percent
+            { "In", 'p' },   // intensity        percent
+            { "Ll", 'p' },   // lightness (HSL)  percent
+            { "Lc", 'p' },   // lightness(CIELAB)percent
+            { "Va", 'p' },   // value            percent
+            { "Wh", 'p' },   // whiteness        percent
+            { "Bn", 'p' },   // blackness        percent
+            { "Ca", 'p' },   // chromaticityA    percent
+            { "Cb", 'p' },   // chromaticityB    percent
+            { "Xv", 'i' },   // X value          int
+            { "Yv", 'i' },   // Y value          int
+            { "Zv", 'i' },   // Z value          int
+            { "Dv", 'i' },   // Decimal value    int
+            { "Na", 's' },   // Color name       string
+        };
+
+        private static readonly Dictionary<char, string> FormatTypeToStringFormatters = new Dictionary<char, string>()
+        {
+            { 'b', "b" },       // 0..255 byte
+            { 'h', "x1" },      // hex lowercase one digit
+            { 'H', "X1" },      // hex uppercase one digit
+            { 'x', "x2" },      // hex lowercase two digits
+            { 'X', "X2" },      // hex uppercase two digits
+            { 'f', "0.##" },    // float with leading zero, 2 digits
+            { 'F', ".##" },     // float without leading zero, 2 digits
+            { 'p', "%" },       // percent value
+            { 'i', "i" },       // int value
+            { 's', "s" },       // string value
+        };
+
+        public static string GetStringRepresentation(Color? color, string formatString)
+        {
+            if (color == null)
+            {
+                color = Color.Moccasin; // example color
+            }
+
+            // convert all %?? expressions to strings
+            int formatterPosition = formatString.IndexOf('%', 0);
+            while (formatterPosition != -1)
+            {
+                if (formatterPosition >= formatString.Length - 2)
+                {
+                    // the formatter % was the last character, we are done
+                    break;
+                }
+
+                char paramFormat;
+                string paramType = formatString.Substring(formatterPosition + 1, 2);
+                int paramCount = 3;
+                if (DefaultFormatTypes.ContainsKey(paramType))
+                {
+                    // check the next char, which could be a formatter
+                    if (formatterPosition >= formatString.Length - 3)
+                    {
+                        // not enough characters, end of string, no formatter, use the default one
+                        paramFormat = DefaultFormatTypes[paramType];
+                        paramCount = 2;
+                    }
+                    else
+                    {
+                        paramFormat = formatString[formatterPosition + 3];
+
+                        // check if it a valid formatter
+                        if (!FormatTypeToStringFormatters.ContainsKey(paramFormat))
+                        {
+                            paramFormat = DefaultFormatTypes[paramType];
+                            paramCount = 2;
+                        }
+                    }
+
+                    formatString = string.Concat(formatString.AsSpan(0, formatterPosition), GetStringRepresentation(color.Value, paramFormat, paramType), formatString.AsSpan(formatterPosition + paramCount + 1));
+                }
+
+                // search for the next occurence of the formatter char
+                formatterPosition = formatString.IndexOf('%', formatterPosition + 1);
+            }
+
+            return formatString;
+        }
+
+        private static string GetStringRepresentation(Color color, char paramFormat, string paramType)
+        {
+            if (!DefaultFormatTypes.ContainsKey(paramType) || !FormatTypeToStringFormatters.ContainsKey(paramFormat))
+            {
+                return string.Empty;
+            }
+
+            switch (paramType)
+            {
+                case "Re": return ColorByteFormatted(color.R, paramFormat);
+                case "Gr": return ColorByteFormatted(color.G, paramFormat);
+                case "Bl": return ColorByteFormatted(color.B, paramFormat);
+                case "Al": return ColorByteFormatted(color.A, paramFormat);
+                case "Cy":
+                    var (cyan, _, _, _) = ConvertToCMYKColor(color);
+                    cyan = Math.Round(cyan * 100);
+                    return cyan.ToString(CultureInfo.InvariantCulture);
+                case "Ma":
+                    var (_, magenta, _, _) = ConvertToCMYKColor(color);
+                    magenta = Math.Round(magenta * 100);
+                    return magenta.ToString(CultureInfo.InvariantCulture);
+                case "Ye":
+                    var (_, _, yellow, _) = ConvertToCMYKColor(color);
+                    yellow = Math.Round(yellow * 100);
+                    return yellow.ToString(CultureInfo.InvariantCulture);
+                case "Bk":
+                    var (_, _, _, blackKey) = ConvertToCMYKColor(color);
+                    blackKey = Math.Round(blackKey * 100);
+                    return blackKey.ToString(CultureInfo.InvariantCulture);
+                case "Hu":
+                    var (hue, _, _) = ConvertToHSBColor(color);
+                    hue = Math.Round(hue);
+                    return hue.ToString(CultureInfo.InvariantCulture);
+                case "Hn":
+                    var (hueNatural, _, _) = ConvertToNaturalColor(color);
+                    return hueNatural;
+                case "Sb":
+                    var (_, saturationB, _) = ConvertToHSBColor(color);
+                    saturationB = Math.Round(saturationB * 100);
+                    return saturationB.ToString(CultureInfo.InvariantCulture);
+                case "Si":
+                    var (_, saturationI, _) = ConvertToHSIColor(color);
+                    saturationI = Math.Round(saturationI * 100);
+                    return saturationI.ToString(CultureInfo.InvariantCulture);
+                case "Sl":
+                    var (_, saturationL, _) = ConvertToHSLColor(color);
+                    saturationL = Math.Round(saturationL * 100);
+                    return saturationL.ToString(CultureInfo.InvariantCulture);
+                case "Va": // value and brightness are the same values
+                case "Br":
+                    var (_, _, brightness) = ConvertToHSBColor(color);
+                    brightness = Math.Round(brightness * 100);
+                    return brightness.ToString(CultureInfo.InvariantCulture);
+                case "In":
+                    var (_, _, intensity) = ConvertToHSIColor(color);
+                    intensity = Math.Round(intensity * 100);
+                    return intensity.ToString(CultureInfo.InvariantCulture);
+                case "Ll":
+                    var (_, _, lightnessL) = ConvertToHSLColor(color);
+                    lightnessL = Math.Round(lightnessL * 100);
+                    return lightnessL.ToString(CultureInfo.InvariantCulture);
+                case "Lc":
+                    var (lightnessC, _, _) = ConvertToCIELABColor(color);
+                    lightnessC = Math.Round(lightnessC, 2);
+                    return lightnessC.ToString(CultureInfo.InvariantCulture);
+                case "Wh":
+                    var (_, whiteness, _) = ConvertToHWBColor(color);
+                    whiteness = Math.Round(whiteness * 100);
+                    return whiteness.ToString(CultureInfo.InvariantCulture);
+                case "Bn":
+                    var (_, _, blackness) = ConvertToHWBColor(color);
+                    blackness = Math.Round(blackness * 100);
+                    return blackness.ToString(CultureInfo.InvariantCulture);
+                case "Ca":
+                    var (_, chromaticityA, _) = ConvertToCIELABColor(color);
+                    chromaticityA = Math.Round(chromaticityA, 2);
+                    return chromaticityA.ToString(CultureInfo.InvariantCulture);
+                case "Cb":
+                    var (_, _, chromaticityB) = ConvertToCIELABColor(color);
+                    chromaticityB = Math.Round(chromaticityB, 2);
+                    return chromaticityB.ToString(CultureInfo.InvariantCulture);
+                case "Xv":
+                    var (x, _, _) = ConvertToCIEXYZColor(color);
+                    x = Math.Round(x * 100, 4);
+                    return x.ToString(CultureInfo.InvariantCulture);
+                case "Yv":
+                    var (_, y, _) = ConvertToCIEXYZColor(color);
+                    y = Math.Round(y * 100, 4);
+                    return y.ToString(CultureInfo.InvariantCulture);
+                case "Zv":
+                    var (_, _, z) = ConvertToCIEXYZColor(color);
+                    z = Math.Round(z * 100, 4);
+                    return z.ToString(CultureInfo.InvariantCulture);
+                case "Dv":
+                    return (color.R + (color.G * 256) + (color.B * 65536)).ToString(CultureInfo.InvariantCulture);
+                case "Na":
+                    return ColorNameHelper.GetColorName(color);
+                default: return string.Empty;
+            }
+        }
+
+        private static string ColorByteFormatted(byte colorByteValue, char paramFormat)
+        {
+            switch (paramFormat)
+            {
+                case 'b': return colorByteValue.ToString(CultureInfo.InvariantCulture);
+                case 'h':
+                case 'H':
+                    return (colorByteValue / 16).ToString(FormatTypeToStringFormatters[paramFormat], CultureInfo.InvariantCulture);
+                case 'x':
+                case 'X':
+                    return colorByteValue.ToString(FormatTypeToStringFormatters[paramFormat], CultureInfo.InvariantCulture);
+                case 'f':
+                case 'F':
+                    return (colorByteValue / 255d).ToString(FormatTypeToStringFormatters[paramFormat], CultureInfo.InvariantCulture);
+                default: return colorByteValue.ToString(CultureInfo.InvariantCulture);
+            }
+        }
+
+        public static string GetDefaultFormat(string formatName)
+        {
+            switch (formatName)
+            {
+                case "HEX": return "%Rex%Grx%Blx";
+                case "RGB": return "rgb(%Re, %Gr, %Bl)";
+                case "HSL": return "hsl(%Hu, %Sl%, %Ll%)";
+                case "HSV": return "hsv(%Hu, %Sb%, %Va%)";
+                case "CMYK": return "cmyk(%Cy%, %Ma%, %Ye%, %Bk%)";
+                case "HSB": return "hsb(%Hu, %Sb%, %Br%)";
+                case "HSI": return "hsi(%Hu, %Si%, %In%)";
+                case "HWB": return "hwb(%Hu, %Wh%, %Bn%)";
+                case "NCol": return "%Hn, %Wh%, %Bn%";
+                case "CIELAB": return "CIELab(%Lc, %Ca, %Cb)";
+                case "CIEXYZ": return "XYZ(%Xv, %Yv, %Zv)";
+                case "VEC4": return "(%Reff, %Grff, %Blff, 1f)";
+                case "Decimal": return "%Dv";
+                case "HEX Int": return "0xFF%ReX%GrX%BlX";
+                default: return string.Empty;
+            }
+        }
+    }
+}

src/common/ManagedCommon/ColorNameHelper.cs

@@ -4,9 +4,8 @@
 
 using System;
 using System.Drawing;
-using ColorPicker.Properties;
 
-namespace ColorPicker.Helpers
+namespace ManagedCommon
 {
     public static class ColorNameHelper
     {
@@ -86,88 +85,88 @@ namespace ColorPicker.Helpers
         // of that color, which are defined as follows:
         private static string[] colorNamesLight =
         {
-            Resources.TEXT_COLOR_CORAL,
-            Resources.TEXT_COLOR_ROSE,
-            Resources.TEXT_COLOR_LIGHTORANGE,
-            Resources.TEXT_COLOR_TAN,
-            Resources.TEXT_COLOR_TAN,
-            Resources.TEXT_COLOR_LIGHTYELLOW,
-            Resources.TEXT_COLOR_LIGHTYELLOW,
-            Resources.TEXT_COLOR_TAN,
-            Resources.TEXT_COLOR_LIGHTGREEN,
-            Resources.TEXT_COLOR_LIME,
-            Resources.TEXT_COLOR_LIGHTGREEN,
-            Resources.TEXT_COLOR_LIGHTGREEN,
-            Resources.TEXT_COLOR_AQUA,
-            Resources.TEXT_COLOR_SKYBLUE,
-            Resources.TEXT_COLOR_LIGHTTURQUOISE,
-            Resources.TEXT_COLOR_PALEBLUE,
-            Resources.TEXT_COLOR_LIGHTBLUE,
-            Resources.TEXT_COLOR_ICEBLUE,
-            Resources.TEXT_COLOR_PERIWINKLE,
-            Resources.TEXT_COLOR_LAVENDER,
-            Resources.TEXT_COLOR_PINK,
-            Resources.TEXT_COLOR_TAN,
-            Resources.TEXT_COLOR_ROSE,
+            CommonResources.TEXT_COLOR_CORAL,
+            CommonResources.TEXT_COLOR_ROSE,
+            CommonResources.TEXT_COLOR_LIGHTORANGE,
+            CommonResources.TEXT_COLOR_TAN,
+            CommonResources.TEXT_COLOR_TAN,
+            CommonResources.TEXT_COLOR_LIGHTYELLOW,
+            CommonResources.TEXT_COLOR_LIGHTYELLOW,
+            CommonResources.TEXT_COLOR_TAN,
+            CommonResources.TEXT_COLOR_LIGHTGREEN,
+            CommonResources.TEXT_COLOR_LIME,
+            CommonResources.TEXT_COLOR_LIGHTGREEN,
+            CommonResources.TEXT_COLOR_LIGHTGREEN,
+            CommonResources.TEXT_COLOR_AQUA,
+            CommonResources.TEXT_COLOR_SKYBLUE,
+            CommonResources.TEXT_COLOR_LIGHTTURQUOISE,
+            CommonResources.TEXT_COLOR_PALEBLUE,
+            CommonResources.TEXT_COLOR_LIGHTBLUE,
+            CommonResources.TEXT_COLOR_ICEBLUE,
+            CommonResources.TEXT_COLOR_PERIWINKLE,
+            CommonResources.TEXT_COLOR_LAVENDER,
+            CommonResources.TEXT_COLOR_PINK,
+            CommonResources.TEXT_COLOR_TAN,
+            CommonResources.TEXT_COLOR_ROSE,
         };
 
         private static string[] colorNamesMid =
         {
-            Resources.TEXT_COLOR_CORAL,
-            Resources.TEXT_COLOR_RED,
-            Resources.TEXT_COLOR_ORANGE,
-            Resources.TEXT_COLOR_BROWN,
-            Resources.TEXT_COLOR_TAN,
-            Resources.TEXT_COLOR_GOLD,
-            Resources.TEXT_COLOR_YELLOW,
-            Resources.TEXT_COLOR_OLIVEGREEN,
-            Resources.TEXT_COLOR_OLIVEGREEN,
-            Resources.TEXT_COLOR_GREEN,
-            Resources.TEXT_COLOR_GREEN,
-            Resources.TEXT_COLOR_BRIGHTGREEN,
-            Resources.TEXT_COLOR_TEAL,
-            Resources.TEXT_COLOR_AQUA,
-            Resources.TEXT_COLOR_TURQUOISE,
-            Resources.TEXT_COLOR_PALEBLUE,
-            Resources.TEXT_COLOR_BLUE,
-            Resources.TEXT_COLOR_BLUEGRAY,
-            Resources.TEXT_COLOR_INDIGO,
-            Resources.TEXT_COLOR_PURPLE,
-            Resources.TEXT_COLOR_PINK,
-            Resources.TEXT_COLOR_BROWN,
-            Resources.TEXT_COLOR_RED,
+            CommonResources.TEXT_COLOR_CORAL,
+            CommonResources.TEXT_COLOR_RED,
+            CommonResources.TEXT_COLOR_ORANGE,
+            CommonResources.TEXT_COLOR_BROWN,
+            CommonResources.TEXT_COLOR_TAN,
+            CommonResources.TEXT_COLOR_GOLD,
+            CommonResources.TEXT_COLOR_YELLOW,
+            CommonResources.TEXT_COLOR_OLIVEGREEN,
+            CommonResources.TEXT_COLOR_OLIVEGREEN,
+            CommonResources.TEXT_COLOR_GREEN,
+            CommonResources.TEXT_COLOR_GREEN,
+            CommonResources.TEXT_COLOR_BRIGHTGREEN,
+            CommonResources.TEXT_COLOR_TEAL,
+            CommonResources.TEXT_COLOR_AQUA,
+            CommonResources.TEXT_COLOR_TURQUOISE,
+            CommonResources.TEXT_COLOR_PALEBLUE,
+            CommonResources.TEXT_COLOR_BLUE,
+            CommonResources.TEXT_COLOR_BLUEGRAY,
+            CommonResources.TEXT_COLOR_INDIGO,
+            CommonResources.TEXT_COLOR_PURPLE,
+            CommonResources.TEXT_COLOR_PINK,
+            CommonResources.TEXT_COLOR_BROWN,
+            CommonResources.TEXT_COLOR_RED,
         };
 
         private static string[] colorNamesDark =
         {
-            Resources.TEXT_COLOR_BROWN,
-            Resources.TEXT_COLOR_DARKRED,
-            Resources.TEXT_COLOR_BROWN,
-            Resources.TEXT_COLOR_BROWN,
-            Resources.TEXT_COLOR_BROWN,
-            Resources.TEXT_COLOR_DARKYELLOW,
-            Resources.TEXT_COLOR_DARKYELLOW,
-            Resources.TEXT_COLOR_BROWN,
-            Resources.TEXT_COLOR_DARKGREEN,
-            Resources.TEXT_COLOR_DARKGREEN,
-            Resources.TEXT_COLOR_DARKGREEN,
-            Resources.TEXT_COLOR_DARKGREEN,
-            Resources.TEXT_COLOR_DARKTEAL,
-            Resources.TEXT_COLOR_DARKTEAL,
-            Resources.TEXT_COLOR_DARKTEAL,
-            Resources.TEXT_COLOR_DARKBLUE,
-            Resources.TEXT_COLOR_DARKBLUE,
-            Resources.TEXT_COLOR_BLUEGRAY,
-            Resources.TEXT_COLOR_INDIGO,
-            Resources.TEXT_COLOR_DARKPURPLE,
-            Resources.TEXT_COLOR_PLUM,
-            Resources.TEXT_COLOR_BROWN,
-            Resources.TEXT_COLOR_DARKRED,
+            CommonResources.TEXT_COLOR_BROWN,
+            CommonResources.TEXT_COLOR_DARKRED,
+            CommonResources.TEXT_COLOR_BROWN,
+            CommonResources.TEXT_COLOR_BROWN,
+            CommonResources.TEXT_COLOR_BROWN,
+            CommonResources.TEXT_COLOR_DARKYELLOW,
+            CommonResources.TEXT_COLOR_DARKYELLOW,
+            CommonResources.TEXT_COLOR_BROWN,
+            CommonResources.TEXT_COLOR_DARKGREEN,
+            CommonResources.TEXT_COLOR_DARKGREEN,
+            CommonResources.TEXT_COLOR_DARKGREEN,
+            CommonResources.TEXT_COLOR_DARKGREEN,
+            CommonResources.TEXT_COLOR_DARKTEAL,
+            CommonResources.TEXT_COLOR_DARKTEAL,
+            CommonResources.TEXT_COLOR_DARKTEAL,
+            CommonResources.TEXT_COLOR_DARKBLUE,
+            CommonResources.TEXT_COLOR_DARKBLUE,
+            CommonResources.TEXT_COLOR_BLUEGRAY,
+            CommonResources.TEXT_COLOR_INDIGO,
+            CommonResources.TEXT_COLOR_DARKPURPLE,
+            CommonResources.TEXT_COLOR_PLUM,
+            CommonResources.TEXT_COLOR_BROWN,
+            CommonResources.TEXT_COLOR_DARKRED,
         };
 
         public static string GetColorName(Color color)
         {
-            var (hue, sat, lum) = ColorHelper.ConvertToHSLColor(color);
+            var (hue, sat, lum) = ColorFormatHelper.ConvertToHSLColor(color);
 
             hue = (hue == 0 ? 0 : hue / 360) * 255; // this implementation is using normalization to 0-255 instead of 0-360°
             sat = sat * 255;
@@ -176,26 +175,26 @@ namespace ColorPicker.Helpers
             // First, if we're in the achromatic state, return the appropriate achromatic color name.
             if (lum > 240)
             {
-                return Resources.TEXT_COLOR_WHITE;
+                return CommonResources.TEXT_COLOR_WHITE;
             }
             else if (lum < 20)
             {
-                return Resources.TEXT_COLOR_BLACK;
+                return CommonResources.TEXT_COLOR_BLACK;
             }
 
             if (sat <= 20)
             {
                 if (lum > 170)
                 {
-                    return Resources.TEXT_COLOR_LIGHTGRAY;
+                    return CommonResources.TEXT_COLOR_LIGHTGRAY;
                 }
                 else if (lum > 100)
                 {
-                    return Resources.TEXT_COLOR_GRAY;
+                    return CommonResources.TEXT_COLOR_GRAY;
                 }
                 else
                 {
-                    return Resources.TEXT_COLOR_DARKGRAY;
+                    return CommonResources.TEXT_COLOR_DARKGRAY;
                 }
             }
 

src/common/ManagedCommon/CommonResources.Designer.cs

@@ -0,0 +1,441 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Runtime Version:4.0.30319.42000
+//
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+namespace ManagedCommon {
+    using System;
+    
+    
+    /// <summary>
+    ///   A strongly-typed resource class, for looking up localized strings, etc.
+    /// </summary>
+    // This class was auto-generated by the StronglyTypedResourceBuilder
+    // class via a tool like ResGen or Visual Studio.
+    // To add or remove a member, edit your .ResX file then rerun ResGen
+    // with the /str option, or rebuild your VS project.
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "17.0.0.0")]
+    [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
+    [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
+    public class CommonResources {
+        
+        private static global::System.Resources.ResourceManager resourceMan;
+        
+        private static global::System.Globalization.CultureInfo resourceCulture;
+        
+        [global::System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")]
+        internal CommonResources() {
+        }
+        
+        /// <summary>
+        ///   Returns the cached ResourceManager instance used by this class.
+        /// </summary>
+        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
+        public static global::System.Resources.ResourceManager ResourceManager {
+            get {
+                if (object.ReferenceEquals(resourceMan, null)) {
+                    global::System.Resources.ResourceManager temp = new global::System.Resources.ResourceManager("ManagedCommon.CommonResources", typeof(CommonResources).Assembly);
+                    resourceMan = temp;
+                }
+                return resourceMan;
+            }
+        }
+        
+        /// <summary>
+        ///   Overrides the current thread's CurrentUICulture property for all
+        ///   resource lookups using this strongly typed resource class.
+        /// </summary>
+        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
+        public static global::System.Globalization.CultureInfo Culture {
+            get {
+                return resourceCulture;
+            }
+            set {
+                resourceCulture = value;
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Aqua.
+        /// </summary>
+        public static string TEXT_COLOR_AQUA {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_AQUA", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Black.
+        /// </summary>
+        public static string TEXT_COLOR_BLACK {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_BLACK", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Blue.
+        /// </summary>
+        public static string TEXT_COLOR_BLUE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_BLUE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Blue gray.
+        /// </summary>
+        public static string TEXT_COLOR_BLUEGRAY {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_BLUEGRAY", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Bright green.
+        /// </summary>
+        public static string TEXT_COLOR_BRIGHTGREEN {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_BRIGHTGREEN", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Brown.
+        /// </summary>
+        public static string TEXT_COLOR_BROWN {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_BROWN", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Coral.
+        /// </summary>
+        public static string TEXT_COLOR_CORAL {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_CORAL", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Dark blue.
+        /// </summary>
+        public static string TEXT_COLOR_DARKBLUE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_DARKBLUE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Dark gray.
+        /// </summary>
+        public static string TEXT_COLOR_DARKGRAY {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_DARKGRAY", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Dark green.
+        /// </summary>
+        public static string TEXT_COLOR_DARKGREEN {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_DARKGREEN", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Dark purple.
+        /// </summary>
+        public static string TEXT_COLOR_DARKPURPLE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_DARKPURPLE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Dark red.
+        /// </summary>
+        public static string TEXT_COLOR_DARKRED {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_DARKRED", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Dark teal.
+        /// </summary>
+        public static string TEXT_COLOR_DARKTEAL {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_DARKTEAL", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Dark yellow.
+        /// </summary>
+        public static string TEXT_COLOR_DARKYELLOW {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_DARKYELLOW", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Gold.
+        /// </summary>
+        public static string TEXT_COLOR_GOLD {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_GOLD", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Gray.
+        /// </summary>
+        public static string TEXT_COLOR_GRAY {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_GRAY", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Green.
+        /// </summary>
+        public static string TEXT_COLOR_GREEN {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_GREEN", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Ice blue.
+        /// </summary>
+        public static string TEXT_COLOR_ICEBLUE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_ICEBLUE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Indigo.
+        /// </summary>
+        public static string TEXT_COLOR_INDIGO {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_INDIGO", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Lavender.
+        /// </summary>
+        public static string TEXT_COLOR_LAVENDER {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_LAVENDER", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Light blue.
+        /// </summary>
+        public static string TEXT_COLOR_LIGHTBLUE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_LIGHTBLUE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Light gray.
+        /// </summary>
+        public static string TEXT_COLOR_LIGHTGRAY {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_LIGHTGRAY", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Light green.
+        /// </summary>
+        public static string TEXT_COLOR_LIGHTGREEN {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_LIGHTGREEN", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Light orange.
+        /// </summary>
+        public static string TEXT_COLOR_LIGHTORANGE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_LIGHTORANGE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Light turquoise.
+        /// </summary>
+        public static string TEXT_COLOR_LIGHTTURQUOISE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_LIGHTTURQUOISE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Light yellow.
+        /// </summary>
+        public static string TEXT_COLOR_LIGHTYELLOW {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_LIGHTYELLOW", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Lime.
+        /// </summary>
+        public static string TEXT_COLOR_LIME {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_LIME", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Olive green.
+        /// </summary>
+        public static string TEXT_COLOR_OLIVEGREEN {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_OLIVEGREEN", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Orange.
+        /// </summary>
+        public static string TEXT_COLOR_ORANGE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_ORANGE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Pale blue.
+        /// </summary>
+        public static string TEXT_COLOR_PALEBLUE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_PALEBLUE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Periwinkle.
+        /// </summary>
+        public static string TEXT_COLOR_PERIWINKLE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_PERIWINKLE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Pink.
+        /// </summary>
+        public static string TEXT_COLOR_PINK {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_PINK", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Plum.
+        /// </summary>
+        public static string TEXT_COLOR_PLUM {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_PLUM", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Purple.
+        /// </summary>
+        public static string TEXT_COLOR_PURPLE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_PURPLE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Red.
+        /// </summary>
+        public static string TEXT_COLOR_RED {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_RED", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Rose.
+        /// </summary>
+        public static string TEXT_COLOR_ROSE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_ROSE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Sky blue.
+        /// </summary>
+        public static string TEXT_COLOR_SKYBLUE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_SKYBLUE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Tan.
+        /// </summary>
+        public static string TEXT_COLOR_TAN {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_TAN", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Teal.
+        /// </summary>
+        public static string TEXT_COLOR_TEAL {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_TEAL", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Turquoise.
+        /// </summary>
+        public static string TEXT_COLOR_TURQUOISE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_TURQUOISE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to White.
+        /// </summary>
+        public static string TEXT_COLOR_WHITE {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_WHITE", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Yellow.
+        /// </summary>
+        public static string TEXT_COLOR_YELLOW {
+            get {
+                return ResourceManager.GetString("TEXT_COLOR_YELLOW", resourceCulture);
+            }
+        }
+    }
+}

src/common/ManagedCommon/CommonResources.resx

@@ -0,0 +1,288 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="TEXT_COLOR_WHITE" xml:space="preserve">
+    <value>White</value>
+    <comment>White color</comment>
+  </data>
+  <data name="TEXT_COLOR_BLACK" xml:space="preserve">
+    <value>Black</value>
+    <comment>Black color</comment>
+  </data>
+  <data name="TEXT_COLOR_LIGHTGRAY" xml:space="preserve">
+    <value>Light gray</value>
+    <comment>Light gray color</comment>
+  </data>
+  <data name="TEXT_COLOR_GRAY" xml:space="preserve">
+    <value>Gray</value>
+    <comment>Gray color</comment>
+  </data>
+  <data name="TEXT_COLOR_DARKGRAY" xml:space="preserve">
+    <value>Dark gray</value>
+    <comment>Dark gray color</comment>
+  </data>
+  <data name="TEXT_COLOR_CORAL" xml:space="preserve">
+    <value>Coral</value>
+    <comment>Coral color</comment>
+  </data>
+  <data name="TEXT_COLOR_ROSE" xml:space="preserve">
+    <value>Rose</value>
+    <comment>Rose color</comment>
+  </data>
+  <data name="TEXT_COLOR_LIGHTORANGE" xml:space="preserve">
+    <value>Light orange</value>
+    <comment>Light orange color</comment>
+  </data>
+  <data name="TEXT_COLOR_TAN" xml:space="preserve">
+    <value>Tan</value>
+    <comment>Tan color</comment>
+  </data>
+  <data name="TEXT_COLOR_LIGHTYELLOW" xml:space="preserve">
+    <value>Light yellow</value>
+    <comment>Light yellow color</comment>
+  </data>
+  <data name="TEXT_COLOR_LIGHTGREEN" xml:space="preserve">
+    <value>Light green</value>
+    <comment>Light green color</comment>
+  </data>
+  <data name="TEXT_COLOR_LIME" xml:space="preserve">
+    <value>Lime</value>
+    <comment>Lime color</comment>
+  </data>
+  <data name="TEXT_COLOR_AQUA" xml:space="preserve">
+    <value>Aqua</value>
+    <comment>Aqua color</comment>
+  </data>
+  <data name="TEXT_COLOR_SKYBLUE" xml:space="preserve">
+    <value>Sky blue</value>
+    <comment>Sky blue color</comment>
+  </data>
+  <data name="TEXT_COLOR_LIGHTTURQUOISE" xml:space="preserve">
+    <value>Light turquoise</value>
+    <comment>Light turquoise color</comment>
+  </data>
+  <data name="TEXT_COLOR_PALEBLUE" xml:space="preserve">
+    <value>Pale blue</value>
+    <comment>Pale blue color</comment>
+  </data>
+  <data name="TEXT_COLOR_LIGHTBLUE" xml:space="preserve">
+    <value>Light blue</value>
+    <comment>Light blue color</comment>
+  </data>
+  <data name="TEXT_COLOR_ICEBLUE" xml:space="preserve">
+    <value>Ice blue</value>
+    <comment>Ice blue color</comment>
+  </data>
+  <data name="TEXT_COLOR_PERIWINKLE" xml:space="preserve">
+    <value>Periwinkle</value>
+    <comment>Periwinkle color</comment>
+  </data>
+  <data name="TEXT_COLOR_LAVENDER" xml:space="preserve">
+    <value>Lavender</value>
+    <comment>Lavender color</comment>
+  </data>
+  <data name="TEXT_COLOR_PINK" xml:space="preserve">
+    <value>Pink</value>
+    <comment>Pink color</comment>
+  </data>
+  <data name="TEXT_COLOR_RED" xml:space="preserve">
+    <value>Red</value>
+    <comment>Red color</comment>
+  </data>
+  <data name="TEXT_COLOR_ORANGE" xml:space="preserve">
+    <value>Orange</value>
+    <comment>Orange color</comment>
+  </data>
+  <data name="TEXT_COLOR_BROWN" xml:space="preserve">
+    <value>Brown</value>
+    <comment>Brown color</comment>
+  </data>
+  <data name="TEXT_COLOR_GOLD" xml:space="preserve">
+    <value>Gold</value>
+    <comment>Gold color</comment>
+  </data>
+  <data name="TEXT_COLOR_YELLOW" xml:space="preserve">
+    <value>Yellow</value>
+    <comment>Yellow color</comment>
+  </data>
+  <data name="TEXT_COLOR_OLIVEGREEN" xml:space="preserve">
+    <value>Olive green</value>
+    <comment>Olive green color</comment>
+  </data>
+  <data name="TEXT_COLOR_GREEN" xml:space="preserve">
+    <value>Green</value>
+    <comment>Green color</comment>
+  </data>
+  <data name="TEXT_COLOR_BRIGHTGREEN" xml:space="preserve">
+    <value>Bright green</value>
+    <comment>Rose color</comment>
+  </data>
+  <data name="TEXT_COLOR_TEAL" xml:space="preserve">
+    <value>Teal</value>
+    <comment>Teal color</comment>
+  </data>
+  <data name="TEXT_COLOR_TURQUOISE" xml:space="preserve">
+    <value>Turquoise</value>
+    <comment>Turquoise color</comment>
+  </data>
+  <data name="TEXT_COLOR_BLUE" xml:space="preserve">
+    <value>Blue</value>
+    <comment>Blue color</comment>
+  </data>
+  <data name="TEXT_COLOR_BLUEGRAY" xml:space="preserve">
+    <value>Blue gray</value>
+    <comment>Blue gray color</comment>
+  </data>
+  <data name="TEXT_COLOR_INDIGO" xml:space="preserve">
+    <value>Indigo</value>
+    <comment>Indigo color</comment>
+  </data>
+  <data name="TEXT_COLOR_PURPLE" xml:space="preserve">
+    <value>Purple</value>
+    <comment>Purple color</comment>
+  </data>
+  <data name="TEXT_COLOR_DARKRED" xml:space="preserve">
+    <value>Dark red</value>
+    <comment>Dark red color</comment>
+  </data>
+  <data name="TEXT_COLOR_DARKYELLOW" xml:space="preserve">
+    <value>Dark yellow</value>
+    <comment>Dark yellow color</comment>
+  </data>
+  <data name="TEXT_COLOR_DARKGREEN" xml:space="preserve">
+    <value>Dark green</value>
+    <comment>Dark green color</comment>
+  </data>
+  <data name="TEXT_COLOR_DARKTEAL" xml:space="preserve">
+    <value>Dark teal</value>
+    <comment>Dark teal color</comment>
+  </data>
+  <data name="TEXT_COLOR_DARKBLUE" xml:space="preserve">
+    <value>Dark blue</value>
+    <comment>Dark blue color</comment>
+  </data>
+  <data name="TEXT_COLOR_DARKPURPLE" xml:space="preserve">
+    <value>Dark purple</value>
+    <comment>Dark purple color</comment>
+  </data>
+  <data name="TEXT_COLOR_PLUM" xml:space="preserve">
+    <value>Plum</value>
+    <comment>Plum color</comment>
+  </data>
+</root>

src/common/ManagedCommon/ManagedCommon.csproj

@@ -20,4 +20,19 @@
     <ProjectReference Include="..\ManagedTelemetry\Telemetry\ManagedTelemetry.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Compile Update="CommonResources.Designer.cs">
+      <DependentUpon>CommonResources.resx</DependentUpon>
+      <DesignTime>True</DesignTime>
+      <AutoGen>True</AutoGen>
+    </Compile>
+  </ItemGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Update="CommonResources.resx">
+      <SubType>Designer</SubType>
+      <LastGenOutput>CommonResources.Designer.cs</LastGenOutput>
+      <Generator>PublicResXFileCodeGenerator</Generator>
+    </EmbeddedResource>
+  </ItemGroup>
 </Project>

src/modules/colorPicker/ColorPickerUI/ColorPickerUI.csproj

@@ -65,21 +65,21 @@
     <ProjectReference Include="..\..\..\common\Common.UI\Common.UI.csproj" />
     <ProjectReference Include="..\..\..\settings-ui\Settings.UI.Library\Settings.UI.Library.csproj" />
   </ItemGroup>
-  <ItemGroup>
-    <EmbeddedResource Update="Properties\Resources.resx">
-      <Generator>PublicResXFileCodeGenerator</Generator>
-      <LastGenOutput>Resources.Designer.cs</LastGenOutput>
-      <SubType>Designer</SubType>
-    </EmbeddedResource>
-  </ItemGroup>
   <ItemGroup>
     <Content Include="Shaders\GridShader.fx" />
   </ItemGroup>
   <ItemGroup>
     <Compile Update="Properties\Resources.Designer.cs">
+      <DependentUpon>Resources.resx</DependentUpon>
       <DesignTime>True</DesignTime>
       <AutoGen>True</AutoGen>
-      <DependentUpon>Resources.resx</DependentUpon>
     </Compile>
   </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Update="Properties\Resources.resx">
+      <SubType>Designer</SubType>
+      <LastGenOutput>Resources.Designer.cs</LastGenOutput>
+      <Generator>PublicResXFileCodeGenerator</Generator>
+    </EmbeddedResource>
+  </ItemGroup>
 </Project>

src/modules/colorPicker/ColorPickerUI/Controls/ColorFormatControl.xaml.cs

@@ -77,14 +77,16 @@ namespace ColorPicker.Controls
         private static void SelectedColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var self = (ColorFormatControl)d;
-            var colorText = self.ColorFormatModel.Convert((Color)e.NewValue);
+            var colorText = self.ColorFormatModel.GetColorText((Color)e.NewValue);
             self.ColorTextRepresentationTextBlock.Text = colorText;
+            self.ColorTextRepresentationTextBlock.ToolTip = colorText;
             self.SelectedColorCopyHelperText = string.Format(CultureInfo.InvariantCulture, "{0} {1}", self.ColorFormatModel.FormatName, colorText);
         }
 
         private static void ColorFormatModelPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             ((ColorFormatControl)d).FormatNameTextBlock.Text = ((ColorFormatModel)e.NewValue).FormatName;
+            ((ColorFormatControl)d).FormatNameTextBlock.ToolTip = ((ColorFormatModel)e.NewValue).FormatName;
         }
 
         private static void ColorCopiedBorderPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

src/modules/colorPicker/ColorPickerUI/Controls/ColorPickerControl.xaml.cs

@@ -12,6 +12,7 @@ using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using ColorPicker.Helpers;
+using ManagedCommon;
 using ModernWpf.Controls;
 using ModernWpf.Controls.Primitives;
 
@@ -81,7 +82,7 @@ namespace ColorPicker.Controls
             control._ignoreRGBChanges = false;
             control._ignoreHexChanges = false;
 
-            var hsv = ColorHelper.ConvertToHSVColor(System.Drawing.Color.FromArgb(newColor.R, newColor.G, newColor.B));
+            var hsv = ColorFormatHelper.ConvertToHSVColor(System.Drawing.Color.FromArgb(newColor.R, newColor.G, newColor.B));
 
             SetColorVariationsForCurrentColor(d, hsv);
         }
@@ -309,7 +310,7 @@ namespace ColorPicker.Controls
         {
             if (!_ignoreGradientsChanges)
             {
-                var hsv = ColorHelper.ConvertToHSVColor(color);
+                var hsv = ColorFormatHelper.ConvertToHSVColor(color);
 
                 var huePosition = (hsv.hue / 360) * HueGradientSlider.Maximum;
                 var saturationPosition = hsv.saturation * SaturationGradientSlider.Maximum;

src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs

@@ -12,38 +12,6 @@ namespace ColorPicker.Helpers
     /// </summary>
     internal static class ColorHelper
     {
-        /// <summary>
-        /// Convert a given <see cref="Color"/> to a CMYK 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>
-        internal static (double cyan, double magenta, double yellow, double blackKey) ConvertToCMYKColor(Color color)
-        {
-            // special case for black (avoid division by zero)
-            if (color.R == 0 && color.G == 0 && color.B == 0)
-            {
-                return (0d, 0d, 0d, 1d);
-            }
-
-            var red = color.R / 255d;
-            var green = color.G / 255d;
-            var blue = color.B / 255d;
-
-            var blackKey = 1d - Math.Max(Math.Max(red, green), blue);
-
-            // special case for black (avoid division by zero)
-            if (1d - blackKey == 0d)
-            {
-                return (0d, 0d, 0d, 1d);
-            }
-
-            var cyan = (1d - red - blackKey) / (1d - blackKey);
-            var magenta = (1d - green - blackKey) / (1d - blackKey);
-            var yellow = (1d - blue - blackKey) / (1d - blackKey);
-
-            return (cyan, magenta, yellow, blackKey);
-        }
-
         /// <summary>
         /// Convert a given <see cref="Color"/> to a float color styling(0.1f, 0.1f, 0.1f)
         /// </summary>
@@ -51,220 +19,5 @@ namespace ColorPicker.Helpers
         /// <returns>The int / 255d for each value to get value between 0 and 1</returns>
         internal static (double red, double green, double blue) ConvertToDouble(Color color)
             => (color.R / 255d, color.G / 255d, color.B / 255d);
-
-        /// <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)
-        {
-            // HSB and HSV represents the same color space
-            return ConvertToHSVColor(color);
-        }
-
-        /// <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)
-        {
-            // 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;
-
-            return (color.GetHue(), 1d - (min / intensity), intensity);
-        }
-
-        /// <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>
-        /// Convert a given <see cref="Color"/> to a CIE LAB color (LAB)
-        /// </summary>
-        /// <param name="color">The <see cref="Color"/> to convert</param>
-        /// <returns>The lightness [0..100] and two chromaticities [-128..127]</returns>
-        internal static (double lightness, double chromaticityA, double chromaticityB) ConvertToCIELABColor(Color color)
-        {
-            var xyz = ConvertToCIEXYZColor(color);
-            var lab = GetCIELABColorFromCIEXYZ(xyz.x, xyz.y, xyz.z);
-
-            return lab;
-        }
-
-        /// <summary>
-        /// Convert a given <see cref="Color"/> to a CIE XYZ color (XYZ)
-        /// The constants of the formula matches this Wikipedia page, but at a higher precision:
-        /// https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation_(sRGB_to_CIE_XYZ)
-        /// This page provides a method to calculate the constants:
-        /// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
-        /// </summary>
-        /// <param name="color">The <see cref="Color"/> to convert</param>
-        /// <returns>The X [0..1], Y [0..1] and Z [0..1]</returns>
-        internal static (double x, double y, double z) ConvertToCIEXYZColor(Color color)
-        {
-            double r = color.R / 255d;
-            double g = color.G / 255d;
-            double b = color.B / 255d;
-
-            // inverse companding, gamma correction must be undone
-            double rLinear = (r > 0.04045) ? Math.Pow((r + 0.055) / 1.055, 2.4) : (r / 12.92);
-            double gLinear = (g > 0.04045) ? Math.Pow((g + 0.055) / 1.055, 2.4) : (g / 12.92);
-            double bLinear = (b > 0.04045) ? Math.Pow((b + 0.055) / 1.055, 2.4) : (b / 12.92);
-
-            return (
-                (rLinear * 0.41239079926595948) + (gLinear * 0.35758433938387796) + (bLinear * 0.18048078840183429),
-                (rLinear * 0.21263900587151036) + (gLinear * 0.71516867876775593) + (bLinear * 0.07219231536073372),
-                (rLinear * 0.01933081871559185) + (gLinear * 0.11919477979462599) + (bLinear * 0.95053215224966058)
-            );
-        }
-
-        /// <summary>
-        /// Convert a CIE XYZ color <see cref="double"/> to a CIE LAB color (LAB) adapted to sRGB D65 white point
-        /// The constants of the formula used come from this wikipedia page:
-        /// https://en.wikipedia.org/wiki/CIELAB_color_space#Converting_between_CIELAB_and_CIEXYZ_coordinates
-        /// </summary>
-        /// <param name="x">The <see cref="x"/> represents a mix of the three CIE RGB curves</param>
-        /// <param name="y">The <see cref="y"/> represents the luminance</param>
-        /// <param name="z">The <see cref="z"/> is quasi-equal to blue (of CIE RGB)</param>
-        /// <returns>The lightness [0..100] and two chromaticities [-128..127]</returns>
-        private static (double lightness, double chromaticityA, double chromaticityB)
-            GetCIELABColorFromCIEXYZ(double x, double y, double z)
-        {
-            // sRGB reference white (x=0.3127, y=0.3290, Y=1.0), actually CIE Standard Illuminant D65 truncated to 4 decimal places,
-            // then converted to XYZ using the formula:
-            //   X = x * (Y / y)
-            //   Y = Y
-            //   Z = (1 - x - y) * (Y / y)
-            double x_n = 0.9504559270516717;
-            double y_n = 1.0;
-            double z_n = 1.0890577507598784;
-
-            // Scale XYZ values relative to reference white
-            x /= x_n;
-            y /= y_n;
-            z /= z_n;
-
-            // XYZ to CIELab transformation
-            double delta = 6d / 29;
-            double m = (1d / 3) * Math.Pow(delta, -2);
-            double t = Math.Pow(delta, 3);
-
-            double fx = (x > t) ? Math.Pow(x, 1.0 / 3.0) : (x * m) + (16.0 / 116.0);
-            double fy = (y > t) ? Math.Pow(y, 1.0 / 3.0) : (y * m) + (16.0 / 116.0);
-            double fz = (z > t) ? Math.Pow(z, 1.0 / 3.0) : (z * m) + (16.0 / 116.0);
-
-            double l = (116 * fy) - 16;
-            double a = 500 * (fx - fy);
-            double b = 200 * (fy - fz);
-
-            return (l, a, b);
-        }
-
-        /// <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)
-        {
-            if (hue < 60d)
-            {
-                return $"R{Math.Round(hue / 0.6d, 0)}";
-            }
-
-            if (hue < 120d)
-            {
-                return $"Y{Math.Round((hue - 60d) / 0.6d, 0)}";
-            }
-
-            if (hue < 180d)
-            {
-                return $"G{Math.Round((hue - 120d) / 0.6d, 0)}";
-            }
-
-            if (hue < 240d)
-            {
-                return $"C{Math.Round((hue - 180d) / 0.6d, 0)}";
-            }
-
-            if (hue < 300d)
-            {
-                return $"B{Math.Round((hue - 240d) / 0.6d, 0)}";
-            }
-
-            return $"M{Math.Round((hue - 300d) / 0.6d, 0)}";
-        }
     }
 }

src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs

@@ -5,6 +5,7 @@
 using System;
 using System.Drawing;
 using System.Globalization;
+using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 
 namespace ColorPicker.Helpers
@@ -12,7 +13,7 @@ namespace ColorPicker.Helpers
     /// <summary>
     /// Helper class to easier work with color representation
     /// </summary>
-    internal static class ColorRepresentationHelper
+    public static class ColorRepresentationHelper
     {
         /// <summary>
         /// Return a <see cref="string"/> representation of a given <see cref="Color"/>
@@ -20,10 +21,10 @@ namespace ColorPicker.Helpers
         /// <param name="color">The <see cref="Color"/> for the presentation</param>
         /// <param name="colorRepresentationType">The type of the representation</param>
         /// <returns>A <see cref="string"/> representation of a color</returns>
-        internal static string GetStringRepresentationFromMediaColor(System.Windows.Media.Color color, ColorRepresentationType colorRepresentationType)
+        internal static string GetStringRepresentationFromMediaColor(System.Windows.Media.Color color, string colorRepresentationType)
         {
             var drawingcolor = Color.FromArgb(color.A, color.R, color.G, color.B);
-            return GetStringRepresentation(drawingcolor, colorRepresentationType);
+            return GetStringRepresentation(drawingcolor, colorRepresentationType, string.Empty);
         }
 
         /// <summary>
@@ -32,26 +33,26 @@ namespace ColorPicker.Helpers
         /// <param name="color">The <see cref="Color"/> for the presentation</param>
         /// <param name="colorRepresentationType">The type of the representation</param>
         /// <returns>A <see cref="string"/> representation of a color</returns>
-        internal static string GetStringRepresentation(Color color, ColorRepresentationType colorRepresentationType)
+        internal static string GetStringRepresentation(Color color, string colorRepresentationType, string colorFormat)
             => colorRepresentationType switch
             {
-                ColorRepresentationType.CMYK => ColorToCMYK(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),
-                ColorRepresentationType.CIELAB => ColorToCIELAB(color),
-                ColorRepresentationType.CIEXYZ => ColorToCIEXYZ(color),
-                ColorRepresentationType.VEC4 => ColorToFloat(color),
-                ColorRepresentationType.DecimalValue => ColorToDecimal(color),
-                ColorRepresentationType.HexInteger => ColorToHexInteger(color),
+                "CMYK" => ColorToCMYK(color),
+                "HEX" => ColorToHex(color),
+                "HSB" => ColorToHSB(color),
+                "HSI" => ColorToHSI(color),
+                "HSL" => ColorToHSL(color),
+                "HSV" => ColorToHSV(color),
+                "HWB" => ColorToHWB(color),
+                "NCol" => ColorToNCol(color),
+                "RGB" => ColorToRGB(color),
+                "CIELAB" => ColorToCIELAB(color),
+                "CIEXYZ" => ColorToCIEXYZ(color),
+                "VEC4" => ColorToFloat(color),
+                "Decimal" => ColorToDecimal(color),
+                "HEX Int" => ColorToHexInteger(color),
 
                 // Fall-back value, when "_userSettings.CopiedColorRepresentation.Value" is incorrect
-                _ => ColorToHex(color),
+                _ => string.IsNullOrEmpty(colorFormat) ? ColorToHex(color) : ColorFormatHelper.GetStringRepresentation(color, colorFormat),
             };
 
         /// <summary>
@@ -61,7 +62,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a CMYK color</returns>
         private static string ColorToCMYK(Color color)
         {
-            var (cyan, magenta, yellow, blackKey) = ColorHelper.ConvertToCMYKColor(color);
+            var (cyan, magenta, yellow, blackKey) = ColorFormatHelper.ConvertToCMYKColor(color);
 
             cyan = Math.Round(cyan * 100);
             magenta = Math.Round(magenta * 100);
@@ -95,7 +96,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a HSB color</returns>
         private static string ColorToHSB(Color color)
         {
-            var (hue, saturation, brightness) = ColorHelper.ConvertToHSBColor(color);
+            var (hue, saturation, brightness) = ColorFormatHelper.ConvertToHSBColor(color);
 
             hue = Math.Round(hue);
             saturation = Math.Round(saturation * 100);
@@ -139,7 +140,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a HSI color</returns>
         private static string ColorToHSI(Color color)
         {
-            var (hue, saturation, intensity) = ColorHelper.ConvertToHSIColor(color);
+            var (hue, saturation, intensity) = ColorFormatHelper.ConvertToHSIColor(color);
 
             hue = Math.Round(hue);
             saturation = Math.Round(saturation * 100);
@@ -157,7 +158,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a HSL color</returns>
         private static string ColorToHSL(Color color)
         {
-            var (hue, saturation, lightness) = ColorHelper.ConvertToHSLColor(color);
+            var (hue, saturation, lightness) = ColorFormatHelper.ConvertToHSLColor(color);
 
             hue = Math.Round(hue);
             saturation = Math.Round(saturation * 100);
@@ -176,7 +177,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a HSV color</returns>
         private static string ColorToHSV(Color color)
         {
-            var (hue, saturation, value) = ColorHelper.ConvertToHSVColor(color);
+            var (hue, saturation, value) = ColorFormatHelper.ConvertToHSVColor(color);
 
             hue = Math.Round(hue);
             saturation = Math.Round(saturation * 100);
@@ -195,7 +196,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a HWB color</returns>
         private static string ColorToHWB(Color color)
         {
-            var (hue, whiteness, blackness) = ColorHelper.ConvertToHWBColor(color);
+            var (hue, whiteness, blackness) = ColorFormatHelper.ConvertToHWBColor(color);
 
             hue = Math.Round(hue);
             whiteness = Math.Round(whiteness * 100);
@@ -213,7 +214,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a natural color</returns>
         private static string ColorToNCol(Color color)
         {
-            var (hue, whiteness, blackness) = ColorHelper.ConvertToNaturalColor(color);
+            var (hue, whiteness, blackness) = ColorFormatHelper.ConvertToNaturalColor(color);
 
             whiteness = Math.Round(whiteness * 100);
             blackness = Math.Round(blackness * 100);
@@ -240,7 +241,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a CIE LAB color</returns>
         private static string ColorToCIELAB(Color color)
         {
-            var (lightness, chromaticityA, chromaticityB) = ColorHelper.ConvertToCIELABColor(color);
+            var (lightness, chromaticityA, chromaticityB) = ColorFormatHelper.ConvertToCIELABColor(color);
             lightness = Math.Round(lightness, 2);
             chromaticityA = Math.Round(chromaticityA, 2);
             chromaticityB = Math.Round(chromaticityB, 2);
@@ -257,7 +258,7 @@ namespace ColorPicker.Helpers
         /// <returns>A <see cref="string"/> representation of a CIE XYZ color</returns>
         private static string ColorToCIEXYZ(Color color)
         {
-            var (x, y, z) = ColorHelper.ConvertToCIEXYZColor(color);
+            var (x, y, z) = ColorFormatHelper.ConvertToCIEXYZColor(color);
 
             x = Math.Round(x * 100, 4);
             y = Math.Round(y * 100, 4);

src/modules/colorPicker/ColorPickerUI/Helpers/SerializationHelper.cs

@@ -38,7 +38,7 @@ namespace ColorPicker.Helpers
                             var tmp = new Dictionary<string, string>();
                             foreach (var colorFormatModel in colorFormatModels)
                             {
-                                var colorInSpecificFormat = colorFormatModel.Convert(color);
+                                var colorInSpecificFormat = colorFormatModel.GetColorText(color);
                                 if (colorFormatModel.FormatName == "HEX")
                                 {
                                     colorInSpecificFormat = "#" + colorInSpecificFormat;
@@ -65,7 +65,7 @@ namespace ColorPicker.Helpers
                             i = 1;
                             foreach (Color color in (IList)colorsToExport)
                             {
-                                var colorInSpecificFormat = colorFormatModel.Convert(color);
+                                var colorInSpecificFormat = colorFormatModel.GetColorText(color);
                                 if (colorFormatModel.FormatName == "HEX")
                                 {
                                     colorInSpecificFormat = "#" + colorInSpecificFormat;

src/modules/colorPicker/ColorPickerUI/Models/ColorFormatModel.cs

@@ -4,6 +4,7 @@
 
 using System;
 using System.Windows.Media;
+using ManagedCommon;
 
 namespace ColorPicker.Models
 {
@@ -12,5 +13,17 @@ namespace ColorPicker.Models
         public string FormatName { get; set; }
 
         public Func<Color, string> Convert { get; set; }
+
+        public string FormatString { get; set; }
+
+        public string GetColorText(Color color)
+        {
+            if (Convert != null)
+            {
+                return Convert(color);
+            }
+
+            return ColorFormatHelper.GetStringRepresentation(System.Drawing.Color.FromArgb(color.A, color.R, color.G, color.B), FormatString);
+        }
     }
 }

src/modules/colorPicker/ColorPickerUI/Properties/Resources.Designer.cs

@@ -330,384 +330,6 @@ namespace ColorPicker.Properties {
             }
         }
         
-        /// <summary>
-        ///   Looks up a localized string similar to Aqua.
-        /// </summary>
-        public static string TEXT_COLOR_AQUA {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_AQUA", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Black.
-        /// </summary>
-        public static string TEXT_COLOR_BLACK {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_BLACK", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Blue.
-        /// </summary>
-        public static string TEXT_COLOR_BLUE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_BLUE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Blue gray.
-        /// </summary>
-        public static string TEXT_COLOR_BLUEGRAY {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_BLUEGRAY", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Bright green.
-        /// </summary>
-        public static string TEXT_COLOR_BRIGHTGREEN {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_BRIGHTGREEN", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Brown.
-        /// </summary>
-        public static string TEXT_COLOR_BROWN {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_BROWN", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Coral.
-        /// </summary>
-        public static string TEXT_COLOR_CORAL {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_CORAL", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Dark blue.
-        /// </summary>
-        public static string TEXT_COLOR_DARKBLUE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_DARKBLUE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Dark gray.
-        /// </summary>
-        public static string TEXT_COLOR_DARKGRAY {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_DARKGRAY", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Dark green.
-        /// </summary>
-        public static string TEXT_COLOR_DARKGREEN {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_DARKGREEN", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Dark purple.
-        /// </summary>
-        public static string TEXT_COLOR_DARKPURPLE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_DARKPURPLE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Dark red.
-        /// </summary>
-        public static string TEXT_COLOR_DARKRED {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_DARKRED", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Dark teal.
-        /// </summary>
-        public static string TEXT_COLOR_DARKTEAL {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_DARKTEAL", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Dark yellow.
-        /// </summary>
-        public static string TEXT_COLOR_DARKYELLOW {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_DARKYELLOW", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Gold.
-        /// </summary>
-        public static string TEXT_COLOR_GOLD {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_GOLD", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Gray.
-        /// </summary>
-        public static string TEXT_COLOR_GRAY {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_GRAY", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Green.
-        /// </summary>
-        public static string TEXT_COLOR_GREEN {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_GREEN", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Ice blue.
-        /// </summary>
-        public static string TEXT_COLOR_ICEBLUE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_ICEBLUE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Indigo.
-        /// </summary>
-        public static string TEXT_COLOR_INDIGO {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_INDIGO", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Lavender.
-        /// </summary>
-        public static string TEXT_COLOR_LAVENDER {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_LAVENDER", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Light blue.
-        /// </summary>
-        public static string TEXT_COLOR_LIGHTBLUE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_LIGHTBLUE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Light gray.
-        /// </summary>
-        public static string TEXT_COLOR_LIGHTGRAY {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_LIGHTGRAY", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Light green.
-        /// </summary>
-        public static string TEXT_COLOR_LIGHTGREEN {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_LIGHTGREEN", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Light orange.
-        /// </summary>
-        public static string TEXT_COLOR_LIGHTORANGE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_LIGHTORANGE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Light turquoise.
-        /// </summary>
-        public static string TEXT_COLOR_LIGHTTURQUOISE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_LIGHTTURQUOISE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Light yellow.
-        /// </summary>
-        public static string TEXT_COLOR_LIGHTYELLOW {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_LIGHTYELLOW", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Lime.
-        /// </summary>
-        public static string TEXT_COLOR_LIME {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_LIME", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Olive green.
-        /// </summary>
-        public static string TEXT_COLOR_OLIVEGREEN {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_OLIVEGREEN", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Orange.
-        /// </summary>
-        public static string TEXT_COLOR_ORANGE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_ORANGE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Pale blue.
-        /// </summary>
-        public static string TEXT_COLOR_PALEBLUE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_PALEBLUE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Periwinkle.
-        /// </summary>
-        public static string TEXT_COLOR_PERIWINKLE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_PERIWINKLE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Pink.
-        /// </summary>
-        public static string TEXT_COLOR_PINK {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_PINK", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Plum.
-        /// </summary>
-        public static string TEXT_COLOR_PLUM {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_PLUM", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Purple.
-        /// </summary>
-        public static string TEXT_COLOR_PURPLE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_PURPLE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Red.
-        /// </summary>
-        public static string TEXT_COLOR_RED {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_RED", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Rose.
-        /// </summary>
-        public static string TEXT_COLOR_ROSE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_ROSE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Sky blue.
-        /// </summary>
-        public static string TEXT_COLOR_SKYBLUE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_SKYBLUE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Tan.
-        /// </summary>
-        public static string TEXT_COLOR_TAN {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_TAN", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Teal.
-        /// </summary>
-        public static string TEXT_COLOR_TEAL {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_TEAL", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Turquoise.
-        /// </summary>
-        public static string TEXT_COLOR_TURQUOISE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_TURQUOISE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to White.
-        /// </summary>
-        public static string TEXT_COLOR_WHITE {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_WHITE", resourceCulture);
-            }
-        }
-        
-        /// <summary>
-        ///   Looks up a localized string similar to Yellow.
-        /// </summary>
-        public static string TEXT_COLOR_YELLOW {
-            get {
-                return ResourceManager.GetString("TEXT_COLOR_YELLOW", resourceCulture);
-            }
-        }
-        
         /// <summary>
         ///   Looks up a localized string similar to Value slider.
         /// </summary>

src/modules/colorPicker/ColorPickerUI/Properties/Resources.resx

@@ -205,174 +205,6 @@
     <value>Value slider</value>
     <comment>Tool tip that appears when hovering over a slider that represents the color value (from HSV)</comment>
   </data>
-  <data name="TEXT_COLOR_WHITE" xml:space="preserve">
-    <value>White</value>
-    <comment>White color</comment>
-  </data>
-  <data name="TEXT_COLOR_BLACK" xml:space="preserve">
-    <value>Black</value>
-    <comment>Black color</comment>
-  </data>
-  <data name="TEXT_COLOR_LIGHTGRAY" xml:space="preserve">
-    <value>Light gray</value>
-    <comment>Light gray color</comment>
-  </data>
-  <data name="TEXT_COLOR_GRAY" xml:space="preserve">
-    <value>Gray</value>
-    <comment>Gray color</comment>
-  </data>
-  <data name="TEXT_COLOR_DARKGRAY" xml:space="preserve">
-    <value>Dark gray</value>
-    <comment>Dark gray color</comment>
-  </data>
-  <data name="TEXT_COLOR_CORAL" xml:space="preserve">
-    <value>Coral</value>
-    <comment>Coral color</comment>
-  </data>
-  <data name="TEXT_COLOR_ROSE" xml:space="preserve">
-    <value>Rose</value>
-    <comment>Rose color</comment>
-  </data>
-  <data name="TEXT_COLOR_LIGHTORANGE" xml:space="preserve">
-    <value>Light orange</value>
-    <comment>Light orange color</comment>
-  </data>
-  <data name="TEXT_COLOR_TAN" xml:space="preserve">
-    <value>Tan</value>
-    <comment>Tan color</comment>
-  </data>
-  <data name="TEXT_COLOR_LIGHTYELLOW" xml:space="preserve">
-    <value>Light yellow</value>
-    <comment>Light yellow color</comment>
-  </data>
-  <data name="TEXT_COLOR_LIGHTGREEN" xml:space="preserve">
-    <value>Light green</value>
-    <comment>Light green color</comment>
-  </data>
-  <data name="TEXT_COLOR_LIME" xml:space="preserve">
-    <value>Lime</value>
-    <comment>Lime color</comment>
-  </data>
-  <data name="TEXT_COLOR_AQUA" xml:space="preserve">
-    <value>Aqua</value>
-    <comment>Aqua color</comment>
-  </data>
-  <data name="TEXT_COLOR_SKYBLUE" xml:space="preserve">
-    <value>Sky blue</value>
-    <comment>Sky blue color</comment>
-  </data>
-  <data name="TEXT_COLOR_LIGHTTURQUOISE" xml:space="preserve">
-    <value>Light turquoise</value>
-    <comment>Light turquoise color</comment>
-  </data>
-  <data name="TEXT_COLOR_PALEBLUE" xml:space="preserve">
-    <value>Pale blue</value>
-    <comment>Pale blue color</comment>
-  </data>
-  <data name="TEXT_COLOR_LIGHTBLUE" xml:space="preserve">
-    <value>Light blue</value>
-    <comment>Light blue color</comment>
-  </data>
-  <data name="TEXT_COLOR_ICEBLUE" xml:space="preserve">
-    <value>Ice blue</value>
-    <comment>Ice blue color</comment>
-  </data>
-  <data name="TEXT_COLOR_PERIWINKLE" xml:space="preserve">
-    <value>Periwinkle</value>
-    <comment>Periwinkle color</comment>
-  </data>
-  <data name="TEXT_COLOR_LAVENDER" xml:space="preserve">
-    <value>Lavender</value>
-    <comment>Lavender color</comment>
-  </data>
-  <data name="TEXT_COLOR_PINK" xml:space="preserve">
-    <value>Pink</value>
-    <comment>Pink color</comment>
-  </data>
-  <data name="TEXT_COLOR_RED" xml:space="preserve">
-    <value>Red</value>
-    <comment>Red color</comment>
-  </data>
-  <data name="TEXT_COLOR_ORANGE" xml:space="preserve">
-    <value>Orange</value>
-    <comment>Orange color</comment>
-  </data>
-  <data name="TEXT_COLOR_BROWN" xml:space="preserve">
-    <value>Brown</value>
-    <comment>Brown color</comment>
-  </data>
-  <data name="TEXT_COLOR_GOLD" xml:space="preserve">
-    <value>Gold</value>
-    <comment>Gold color</comment>
-  </data>
-  <data name="TEXT_COLOR_YELLOW" xml:space="preserve">
-    <value>Yellow</value>
-    <comment>Yellow color</comment>
-  </data>
-  <data name="TEXT_COLOR_OLIVEGREEN" xml:space="preserve">
-    <value>Olive green</value>
-    <comment>Olive green color</comment>
-  </data>
-  <data name="TEXT_COLOR_GREEN" xml:space="preserve">
-    <value>Green</value>
-    <comment>Green color</comment>
-  </data>
-  <data name="TEXT_COLOR_BRIGHTGREEN" xml:space="preserve">
-    <value>Bright green</value>
-    <comment>Rose color</comment>
-  </data>
-  <data name="TEXT_COLOR_TEAL" xml:space="preserve">
-    <value>Teal</value>
-    <comment>Teal color</comment>
-  </data>
-  <data name="TEXT_COLOR_TURQUOISE" xml:space="preserve">
-    <value>Turquoise</value>
-    <comment>Turquoise color</comment>
-  </data>
-  <data name="TEXT_COLOR_BLUE" xml:space="preserve">
-    <value>Blue</value>
-    <comment>Blue color</comment>
-  </data>
-  <data name="TEXT_COLOR_BLUEGRAY" xml:space="preserve">
-    <value>Blue gray</value>
-    <comment>Blue gray color</comment>
-  </data>
-  <data name="TEXT_COLOR_INDIGO" xml:space="preserve">
-    <value>Indigo</value>
-    <comment>Indigo color</comment>
-  </data>
-  <data name="TEXT_COLOR_PURPLE" xml:space="preserve">
-    <value>Purple</value>
-    <comment>Purple color</comment>
-  </data>
-  <data name="TEXT_COLOR_DARKRED" xml:space="preserve">
-    <value>Dark red</value>
-    <comment>Dark red color</comment>
-  </data>
-  <data name="TEXT_COLOR_DARKYELLOW" xml:space="preserve">
-    <value>Dark yellow</value>
-    <comment>Dark yellow color</comment>
-  </data>
-  <data name="TEXT_COLOR_DARKGREEN" xml:space="preserve">
-    <value>Dark green</value>
-    <comment>Dark green color</comment>
-  </data>
-  <data name="TEXT_COLOR_DARKTEAL" xml:space="preserve">
-    <value>Dark teal</value>
-    <comment>Dark teal color</comment>
-  </data>
-  <data name="TEXT_COLOR_DARKBLUE" xml:space="preserve">
-    <value>Dark blue</value>
-    <comment>Dark blue color</comment>
-  </data>
-  <data name="TEXT_COLOR_DARKPURPLE" xml:space="preserve">
-    <value>Dark purple</value>
-    <comment>Dark purple color</comment>
-  </data>
-  <data name="TEXT_COLOR_PLUM" xml:space="preserve">
-    <value>Plum</value>
-    <comment>Plum color</comment>
-  </data>
   <data name="Select_color" xml:space="preserve">
     <value>Select color</value>
   </data>

src/modules/colorPicker/ColorPickerUI/Settings/IUserSettings.cs

@@ -14,7 +14,9 @@ namespace ColorPicker.Settings
 
         SettingItem<bool> ChangeCursor { get; }
 
-        SettingItem<ColorRepresentationType> CopiedColorRepresentation { get; set; }
+        SettingItem<string> CopiedColorRepresentation { get; set; }
+
+        SettingItem<string> CopiedColorRepresentationFormat { get; set; }
 
         SettingItem<ColorPickerActivationAction> ActivationAction { get; }
 
@@ -22,7 +24,7 @@ namespace ColorPicker.Settings
 
         SettingItem<int> ColorHistoryLimit { get; }
 
-        ObservableCollection<string> VisibleColorFormats { get; }
+        ObservableCollection<System.Collections.Generic.KeyValuePair<string, string>> VisibleColorFormats { get; }
 
         SettingItem<bool> ShowColorName { get; }
 

src/modules/colorPicker/ColorPickerUI/Settings/UserSettings.cs

@@ -39,7 +39,7 @@ namespace ColorPicker.Settings
             _settingsUtils = new SettingsUtils();
             ChangeCursor = new SettingItem<bool>(true);
             ActivationShortcut = new SettingItem<string>(DefaultActivationShortcut);
-            CopiedColorRepresentation = new SettingItem<ColorRepresentationType>(ColorRepresentationType.HEX);
+            CopiedColorRepresentation = new SettingItem<string>(ColorRepresentationType.HEX.ToString());
             ActivationAction = new SettingItem<ColorPickerActivationAction>(ColorPickerActivationAction.OpenEditor);
             ColorHistoryLimit = new SettingItem<int>(20);
             ColorHistory.CollectionChanged += ColorHistory_CollectionChanged;
@@ -55,7 +55,7 @@ namespace ColorPicker.Settings
         {
             if (!_loadingColorsHistory)
             {
-                var settings = _settingsUtils.GetSettingsOrDefault<ColorPickerSettings>(ColorPickerModuleName);
+                var settings = _settingsUtils.GetSettingsOrDefault<ColorPickerSettings, ColorPickerSettingsVersion1>(ColorPickerModuleName, settingsUpgrader: ColorPickerSettings.UpgradeSettings);
                 ColorHistory.CollectionChanged -= ColorHistory_CollectionChanged;
                 settings.Properties.ColorHistory = ColorHistory.ToList();
                 ColorHistory.CollectionChanged += ColorHistory_CollectionChanged;
@@ -67,7 +67,9 @@ namespace ColorPicker.Settings
 
         public SettingItem<bool> ChangeCursor { get; private set; }
 
-        public SettingItem<ColorRepresentationType> CopiedColorRepresentation { get; set; }
+        public SettingItem<string> CopiedColorRepresentation { get; set; }
+
+        public SettingItem<string> CopiedColorRepresentationFormat { get; set; }
 
         public SettingItem<ColorPickerActivationAction> ActivationAction { get; private set; }
 
@@ -75,7 +77,7 @@ namespace ColorPicker.Settings
 
         public SettingItem<int> ColorHistoryLimit { get; }
 
-        public ObservableCollection<string> VisibleColorFormats { get; private set; } = new ObservableCollection<string>();
+        public ObservableCollection<System.Collections.Generic.KeyValuePair<string, string>> VisibleColorFormats { get; private set; } = new ObservableCollection<System.Collections.Generic.KeyValuePair<string, string>>();
 
         public SettingItem<bool> ShowColorName { get; }
 
@@ -101,12 +103,18 @@ namespace ColorPicker.Settings
                                 defaultColorPickerSettings.Save(_settingsUtils);
                             }
 
-                            var settings = _settingsUtils.GetSettingsOrDefault<ColorPickerSettings>(ColorPickerModuleName);
+                            var settings = _settingsUtils.GetSettingsOrDefault<ColorPickerSettings, ColorPickerSettingsVersion1>(ColorPickerModuleName, settingsUpgrader: ColorPickerSettings.UpgradeSettings);
                             if (settings != null)
                             {
                                 ChangeCursor.Value = settings.Properties.ChangeCursor;
                                 ActivationShortcut.Value = settings.Properties.ActivationShortcut.ToString();
+                                if (settings.Properties.CopiedColorRepresentation == null)
+                                {
+                                    settings.Properties.CopiedColorRepresentation = "HEX";
+                                }
+
                                 CopiedColorRepresentation.Value = settings.Properties.CopiedColorRepresentation;
+                                CopiedColorRepresentationFormat = new SettingItem<string>(string.Empty);
                                 ActivationAction.Value = settings.Properties.ActivationAction;
                                 ColorHistoryLimit.Value = settings.Properties.ColorHistoryLimit;
                                 ShowColorName.Value = settings.Properties.ShowColorName;
@@ -128,9 +136,14 @@ namespace ColorPicker.Settings
                                 VisibleColorFormats.Clear();
                                 foreach (var item in settings.Properties.VisibleColorFormats)
                                 {
-                                    if (item.Value)
+                                    if (item.Value.Key)
                                     {
-                                        VisibleColorFormats.Add(item.Key);
+                                        VisibleColorFormats.Add(new System.Collections.Generic.KeyValuePair<string, string>(item.Key, item.Value.Value));
+                                    }
+
+                                    if (item.Key == CopiedColorRepresentation.Value)
+                                    {
+                                        CopiedColorRepresentationFormat.Value = item.Value.Value;
                                     }
                                 }
                             }
@@ -165,7 +178,7 @@ namespace ColorPicker.Settings
         public void SendSettingsTelemetry()
         {
             Logger.LogInfo("Sending settings telemetry");
-            var settings = _settingsUtils.GetSettingsOrDefault<ColorPickerSettings>(ColorPickerModuleName);
+            var settings = _settingsUtils.GetSettingsOrDefault<ColorPickerSettings, ColorPickerSettingsVersion1>(ColorPickerModuleName, settingsUpgrader: ColorPickerSettings.UpgradeSettings);
             var properties = settings?.Properties;
             if (properties == null)
             {

src/modules/colorPicker/ColorPickerUI/Telemetry/ColorPickerSettings.cs

@@ -12,7 +12,7 @@ namespace ColorPicker.Telemetry
     [EventData]
     public class ColorPickerSettings : EventBase, IEvent
     {
-        public ColorPickerSettings(IDictionary<string, bool> editorFormats)
+        public ColorPickerSettings(IDictionary<string, KeyValuePair<bool, string>> editorFormats)
         {
             EditorFormats = editorFormats;
             EventName = "ColorPicker_Settings";
@@ -26,7 +26,7 @@ namespace ColorPicker.Telemetry
 
         public bool ShowColorName { get; set; }
 
-        public IDictionary<string, bool> EditorFormats { get; }
+        public IDictionary<string, KeyValuePair<bool, string>> EditorFormats { get; }
 
         public PartA_PrivTags PartA_PrivTags => PartA_PrivTags.ProductAndServiceUsage;
     }

src/modules/colorPicker/ColorPickerUI/ViewModels/ColorEditorViewModel.cs

@@ -247,7 +247,7 @@ namespace ColorPicker.ViewModels
                 {
                     FormatName = ColorRepresentationType.HEX.ToString(),
 #pragma warning disable CA1304 // Specify CultureInfo
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HEX).ToLower(),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HEX.ToString()).ToLower(),
 #pragma warning restore CA1304 // Specify CultureInfo
                 });
 
@@ -255,82 +255,82 @@ namespace ColorPicker.ViewModels
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.RGB.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.RGB),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.RGB.ToString()),
                 });
 
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.HSL.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HSL),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HSL.ToString()),
                 });
 
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.HSV.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HSV),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HSV.ToString()),
                 });
 
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.CMYK.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.CMYK),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.CMYK.ToString()),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.HSB.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HSB),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HSB.ToString()),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.HSI.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HSI),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HSI.ToString()),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.HWB.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HWB),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HWB.ToString()),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.NCol.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.NCol),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.NCol.ToString()),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.CIELAB.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.CIELAB),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.CIELAB.ToString()),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.CIEXYZ.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.CIEXYZ),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.CIEXYZ.ToString()),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = ColorRepresentationType.VEC4.ToString(),
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.VEC4),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.VEC4.ToString()),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = "Decimal",
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.DecimalValue),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, "Decimal"),
                 });
             _allColorRepresentations.Add(
                 new ColorFormatModel()
                 {
                     FormatName = "HEX Int",
-                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HexInteger),
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, "HEX Int"),
                 });
 
             _userSettings.VisibleColorFormats.CollectionChanged += VisibleColorFormats_CollectionChanged;
@@ -349,11 +349,7 @@ namespace ColorPicker.ViewModels
 
             foreach (var colorFormat in _userSettings.VisibleColorFormats)
             {
-                var colorRepresentation = _allColorRepresentations.FirstOrDefault(it => it.FormatName.ToUpperInvariant() == colorFormat.ToUpperInvariant());
-                if (colorRepresentation != null)
-                {
-                    ColorRepresentations.Add(colorRepresentation);
-                }
+                ColorRepresentations.Add(new ColorFormatModel() { FormatName = colorFormat.Key.ToUpperInvariant(), Convert = null, FormatString = colorFormat.Value });
             }
         }
     }

src/modules/colorPicker/ColorPickerUI/ViewModels/MainViewModel.cs

@@ -15,6 +15,7 @@ using ColorPicker.Settings;
 using ColorPicker.ViewModelContracts;
 using Common.UI;
 using interop;
+using ManagedCommon;
 
 namespace ColorPicker.ViewModels
 {
@@ -174,7 +175,7 @@ namespace ColorPicker.ViewModels
         private void SetColorDetails(System.Drawing.Color color)
         {
             ColorBrush = new SolidColorBrush(Color.FromArgb(color.A, color.R, color.G, color.B));
-            ColorText = ColorRepresentationHelper.GetStringRepresentation(color, _userSettings.CopiedColorRepresentation.Value);
+            ColorText = ColorRepresentationHelper.GetStringRepresentation(color, _userSettings.CopiedColorRepresentation.Value, _userSettings.CopiedColorRepresentationFormat.Value);
             ColorName = ColorNameHelper.GetColorName(color);
         }
 

src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorConverterTest.cs

@@ -6,6 +6,7 @@ using System;
 using System.Drawing;
 using System.Globalization;
 using ColorPicker.Helpers;
+using ManagedCommon;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
 namespace Microsoft.ColorPicker.UnitTests
@@ -53,7 +54,7 @@ namespace Microsoft.ColorPicker.UnitTests
             blue = Convert.ToInt32(Math.Round(255d / 100d * blue));    // [0%..100%] to [0..255]
 
             var color = Color.FromArgb(255, red, green, blue);
-            var result = ColorHelper.ConvertToHSLColor(color);
+            var result = ColorFormatHelper.ConvertToHSLColor(color);
 
             // hue[0°..360°]
             Assert.AreEqual(result.hue, hue, 0.2d);
@@ -102,7 +103,7 @@ namespace Microsoft.ColorPicker.UnitTests
             blue = Convert.ToInt32(Math.Round(255d / 100d * blue));        // [0%..100%] to [0..255]
 
             var color = Color.FromArgb(255, red, green, blue);
-            var result = ColorHelper.ConvertToHSVColor(color);
+            var result = ColorFormatHelper.ConvertToHSVColor(color);
 
             // hue [0°..360°]
             Assert.AreEqual(result.hue, hue, 0.2d);
@@ -151,7 +152,7 @@ namespace Microsoft.ColorPicker.UnitTests
             blue = Convert.ToInt32(Math.Round(255d / 100d * blue));        // [0%..100%] to [0..255]
 
             var color = Color.FromArgb(255, red, green, blue);
-            var result = ColorHelper.ConvertToHSBColor(color);
+            var result = ColorFormatHelper.ConvertToHSBColor(color);
 
             // hue [0°..360°]
             Assert.AreEqual(result.hue, hue, 0.2d);
@@ -195,7 +196,7 @@ namespace Microsoft.ColorPicker.UnitTests
         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);
+            var result = ColorFormatHelper.ConvertToCMYKColor(color);
 
             // cyan[0..1]
             Assert.AreEqual(result.cyan * 100d, cyan, 0.5d);
@@ -245,7 +246,7 @@ namespace Microsoft.ColorPicker.UnitTests
             var blue = int.Parse(hexValue.AsSpan(4, 2), NumberStyles.HexNumber, CultureInfo.InvariantCulture);
 
             var color = Color.FromArgb(255, red, green, blue);
-            var result = ColorHelper.ConvertToHSIColor(color);
+            var result = ColorFormatHelper.ConvertToHSIColor(color);
 
             // hue[0°..360°]
             Assert.AreEqual(result.hue, hue, 0.5d);
@@ -293,7 +294,7 @@ namespace Microsoft.ColorPicker.UnitTests
             var blue = int.Parse(hexValue.AsSpan(4, 2), NumberStyles.HexNumber, CultureInfo.InvariantCulture);
 
             var color = Color.FromArgb(255, red, green, blue);
-            var result = ColorHelper.ConvertToHWBColor(color);
+            var result = ColorFormatHelper.ConvertToHWBColor(color);
 
             // hue[0°..360°]
             Assert.AreEqual(result.hue, hue, 0.5d);
@@ -341,7 +342,7 @@ namespace Microsoft.ColorPicker.UnitTests
             var blue = int.Parse(hexValue.AsSpan(4, 2), NumberStyles.HexNumber, CultureInfo.InvariantCulture);
 
             var color = Color.FromArgb(255, red, green, blue);
-            var result = ColorHelper.ConvertToNaturalColor(color);
+            var result = ColorFormatHelper.ConvertToNaturalColor(color);
 
             // hue
             Assert.AreEqual(result.hue, hue);
@@ -397,7 +398,7 @@ namespace Microsoft.ColorPicker.UnitTests
             var blue = int.Parse(hexValue.AsSpan(4, 2), NumberStyles.HexNumber, CultureInfo.InvariantCulture);
 
             var color = Color.FromArgb(255, red, green, blue);
-            var result = ColorHelper.ConvertToCIELABColor(color);
+            var result = ColorFormatHelper.ConvertToCIELABColor(color);
 
             // lightness[0..100]
             Assert.AreEqual(Math.Round(result.lightness, 2), lightness);
@@ -461,7 +462,7 @@ namespace Microsoft.ColorPicker.UnitTests
             var blue = int.Parse(hexValue.AsSpan(4, 2), NumberStyles.HexNumber, CultureInfo.InvariantCulture);
 
             var color = Color.FromArgb(255, red, green, blue);
-            var result = ColorHelper.ConvertToCIEXYZColor(color);
+            var result = ColorFormatHelper.ConvertToCIEXYZColor(color);
 
             // x[0..0.95047]
             Assert.AreEqual(Math.Round(result.x * 100, 4), x);
@@ -488,7 +489,7 @@ namespace Microsoft.ColorPicker.UnitTests
 
                         try
                         {
-                            _ = ColorHelper.ConvertToCMYKColor(color);
+                            _ = ColorFormatHelper.ConvertToCMYKColor(color);
                         }
 
                         // intentionally trying to catch

src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs

@@ -4,7 +4,6 @@
 
 using System.Drawing;
 using ColorPicker.Helpers;
-using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 
 namespace Microsoft.ColorPicker.UnitTests
@@ -13,24 +12,24 @@ namespace Microsoft.ColorPicker.UnitTests
     public class ColorRepresentationHelperTest
     {
         [TestMethod]
-        [DataRow(ColorRepresentationType.CMYK, "cmyk(0%, 0%, 0%, 100%)")]
-        [DataRow(ColorRepresentationType.HEX, "000000")]
-        [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%, 100%)")]
-        [DataRow(ColorRepresentationType.RGB, "rgb(0, 0, 0)")]
-        [DataRow(ColorRepresentationType.CIELAB, "CIELab(0, 0, 0)")]
-        [DataRow(ColorRepresentationType.CIEXYZ, "XYZ(0, 0, 0)")]
-        [DataRow(ColorRepresentationType.VEC4, "(0f, 0f, 0f, 1f)")]
-        [DataRow(ColorRepresentationType.DecimalValue, "0")]
-        [DataRow(ColorRepresentationType.HexInteger, "0xFF000000")]
+        [DataRow("CMYK", "cmyk(0%, 0%, 0%, 100%)")]
+        [DataRow("HEX", "000000")]
+        [DataRow("NCol", "R0, 0%, 100%")]
+        [DataRow("HSB", "hsb(0, 0%, 0%)")]
+        [DataRow("HSI", "hsi(0, 0%, 0%)")]
+        [DataRow("HSL", "hsl(0, 0%, 0%)")]
+        [DataRow("HSV", "hsv(0, 0%, 0%)")]
+        [DataRow("HWB", "hwb(0, 0%, 100%)")]
+        [DataRow("RGB", "rgb(0, 0, 0)")]
+        [DataRow("CIELAB", "CIELab(0, 0, 0)")]
+        [DataRow("CIEXYZ", "XYZ(0, 0, 0)")]
+        [DataRow("VEC4", "(0f, 0f, 0f, 1f)")]
+        [DataRow("Decimal", "0")]
+        [DataRow("HEX Int", "0xFF000000")]
 
-        public void GetStringRepresentationTest(ColorRepresentationType type, string expected)
+        public void GetStringRepresentationTest(string type, string expected)
         {
-            var result = ColorRepresentationHelper.GetStringRepresentation(Color.Black, type);
+            var result = ColorRepresentationHelper.GetStringRepresentation(Color.Black, type, string.Empty);
             Assert.AreEqual(result, expected);
         }
     }

src/settings-ui/Settings.UI.Library/ColorFormatModel.cs

@@ -4,22 +4,34 @@
 
 using System.ComponentModel;
 using System.Runtime.CompilerServices;
+using ManagedCommon;
 
 namespace Microsoft.PowerToys.Settings.UI.Library
 {
     public class ColorFormatModel : INotifyPropertyChanged
     {
         private string _name;
-        private string _example;
+        private string _format;
         private bool _isShown;
         private bool _canMoveUp = true;
         private bool _canMoveDown = true;
+        private bool _canBeDeleted = true;
+        private bool _isNew;
+        private bool _isValid = true;
 
-        public ColorFormatModel(string name, string example, bool isShown)
+        public ColorFormatModel(string name, string format, bool isShown)
         {
             Name = name;
-            Example = example;
+            Format = format;
             IsShown = isShown;
+            IsNew = false;
+        }
+
+        public ColorFormatModel()
+        {
+            Format = "new Color (R = %Re, G = %Gr, B = %Bl)";
+            IsShown = true;
+            IsNew = true;
         }
 
         public string Name
@@ -32,21 +44,22 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             set
             {
                 _name = value;
-                OnPropertyChanged();
+                OnPropertyChanged(nameof(Name));
             }
         }
 
-        public string Example
+        public string Format
         {
             get
             {
-                return _example;
+                return _format;
             }
 
             set
             {
-                _example = value;
-                OnPropertyChanged();
+                _format = value;
+                OnPropertyChanged(nameof(Format));
+                OnPropertyChanged(nameof(Example));
             }
         }
 
@@ -60,7 +73,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             set
             {
                 _isShown = value;
-                OnPropertyChanged();
+                OnPropertyChanged(nameof(IsShown));
             }
         }
 
@@ -74,7 +87,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             set
             {
                 _canMoveUp = value;
-                OnPropertyChanged();
+                OnPropertyChanged(nameof(CanMoveUp));
             }
         }
 
@@ -88,7 +101,64 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             set
             {
                 _canMoveDown = value;
-                OnPropertyChanged();
+                OnPropertyChanged(nameof(CanMoveDown));
+            }
+        }
+
+        public bool CanBeDeleted
+        {
+            get
+            {
+                return _canBeDeleted;
+            }
+
+            set
+            {
+                if (value != _canBeDeleted)
+                {
+                    _canBeDeleted = value;
+                    OnPropertyChanged(nameof(CanBeDeleted));
+                }
+            }
+        }
+
+        public bool IsNew
+        {
+            get
+            {
+                return _isNew;
+            }
+
+            set
+            {
+                _isNew = value;
+                OnPropertyChanged(nameof(IsNew));
+            }
+        }
+
+        public bool IsValid
+        {
+            get
+            {
+                return _isValid;
+            }
+
+            set
+            {
+                _isValid = value;
+                OnPropertyChanged(nameof(IsValid));
+            }
+        }
+
+        public string Example
+        {
+            get
+            {
+                return ColorFormatHelper.GetStringRepresentation(null, _format);
+            }
+
+            set
+            {
             }
         }
 

src/settings-ui/Settings.UI.Library/ColorPickerProperties.cs

@@ -5,6 +5,7 @@
 using System.Collections.Generic;
 using System.Text.Json;
 using System.Text.Json.Serialization;
+using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 
 namespace Microsoft.PowerToys.Settings.UI.Library
@@ -17,12 +18,24 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             ChangeCursor = false;
             ColorHistory = new List<string>();
             ColorHistoryLimit = 20;
-            VisibleColorFormats = new Dictionary<string, bool>();
-            VisibleColorFormats.Add("HEX", true);
-            VisibleColorFormats.Add("RGB", true);
-            VisibleColorFormats.Add("HSL", true);
+            VisibleColorFormats = new Dictionary<string, KeyValuePair<bool, string>>();
+            VisibleColorFormats.Add("HEX", new KeyValuePair<bool, string>(true, ColorFormatHelper.GetDefaultFormat("HEX")));
+            VisibleColorFormats.Add("RGB", new KeyValuePair<bool, string>(true, ColorFormatHelper.GetDefaultFormat("RGB")));
+            VisibleColorFormats.Add("HSL", new KeyValuePair<bool, string>(true, ColorFormatHelper.GetDefaultFormat("HSL")));
+            VisibleColorFormats.Add("HSV", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("HSV")));
+            VisibleColorFormats.Add("CMYK", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("CMYK")));
+            VisibleColorFormats.Add("HSB", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("HSB")));
+            VisibleColorFormats.Add("HSI", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("HSI")));
+            VisibleColorFormats.Add("HWB", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("HWB")));
+            VisibleColorFormats.Add("NCol", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("NCol")));
+            VisibleColorFormats.Add("CIELAB", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("CIELAB")));
+            VisibleColorFormats.Add("CIEXYZ", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("CIEXYZ")));
+            VisibleColorFormats.Add("VEC4", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("VEC4")));
+            VisibleColorFormats.Add("Decimal", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("Decimal")));
+            VisibleColorFormats.Add("HEX Int", new KeyValuePair<bool, string>(false, ColorFormatHelper.GetDefaultFormat("HEX Int")));
             ShowColorName = false;
             ActivationAction = ColorPickerActivationAction.OpenColorPickerAndThenEditor;
+            CopiedColorRepresentation = "HEX";
         }
 
         public HotkeySettings ActivationShortcut { get; set; }
@@ -32,7 +45,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         public bool ChangeCursor { get; set; }
 
         [JsonPropertyName("copiedcolorrepresentation")]
-        public ColorRepresentationType CopiedColorRepresentation { get; set; }
+        public string CopiedColorRepresentation { get; set; }
 
         [JsonPropertyName("activationaction")]
         public ColorPickerActivationAction ActivationAction { get; set; }
@@ -44,7 +57,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         public int ColorHistoryLimit { get; set; }
 
         [JsonPropertyName("visiblecolorformats")]
-        public Dictionary<string, bool> VisibleColorFormats { get; set; }
+        public Dictionary<string, KeyValuePair<bool, string>> VisibleColorFormats { get; set; }
 
         [JsonPropertyName("showcolorname")]
         [JsonConverter(typeof(BoolPropertyJsonConverter))]

src/settings-ui/Settings.UI.Library/ColorPickerPropertiesVersion1.cs

@@ -0,0 +1,56 @@
+// 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.
+
+using System.Collections.Generic;
+using System.Text.Json;
+using System.Text.Json.Serialization;
+using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class ColorPickerPropertiesVersion1
+    {
+        public ColorPickerPropertiesVersion1()
+        {
+            ActivationShortcut = new HotkeySettings(true, false, false, true, 0x43);
+            ChangeCursor = false;
+            ColorHistory = new List<string>();
+            ColorHistoryLimit = 20;
+            VisibleColorFormats = new Dictionary<string, bool>();
+            VisibleColorFormats.Add("HEX", true);
+            VisibleColorFormats.Add("RGB", true);
+            VisibleColorFormats.Add("HSL", true);
+            ShowColorName = false;
+            ActivationAction = ColorPickerActivationAction.OpenColorPickerAndThenEditor;
+        }
+
+        public HotkeySettings ActivationShortcut { get; set; }
+
+        [JsonPropertyName("changecursor")]
+        [JsonConverter(typeof(BoolPropertyJsonConverter))]
+        public bool ChangeCursor { get; set; }
+
+        [JsonPropertyName("copiedcolorrepresentation")]
+        public ColorRepresentationType CopiedColorRepresentation { get; set; }
+
+        [JsonPropertyName("activationaction")]
+        public ColorPickerActivationAction ActivationAction { get; set; }
+
+        [JsonPropertyName("colorhistory")]
+        public List<string> ColorHistory { get; set; }
+
+        [JsonPropertyName("colorhistorylimit")]
+        public int ColorHistoryLimit { get; set; }
+
+        [JsonPropertyName("visiblecolorformats")]
+        public Dictionary<string, bool> VisibleColorFormats { get; set; }
+
+        [JsonPropertyName("showcolorname")]
+        [JsonConverter(typeof(BoolPropertyJsonConverter))]
+        public bool ShowColorName { get; set; }
+
+        public override string ToString()
+            => JsonSerializer.Serialize(this);
+    }
+}

src/settings-ui/Settings.UI.Library/ColorPickerSettings.cs

@@ -3,8 +3,11 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections.Generic;
+using System.Linq;
 using System.Text.Json;
 using System.Text.Json.Serialization;
+using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
 
 namespace Microsoft.PowerToys.Settings.UI.Library
@@ -19,7 +22,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         public ColorPickerSettings()
         {
             Properties = new ColorPickerProperties();
-            Version = "1";
+            Version = "2";
             Name = ModuleName;
         }
 
@@ -45,5 +48,26 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         // This can be utilized in the future if the settings.json file is to be modified/deleted.
         public bool UpgradeSettingsConfiguration()
             => false;
+
+        public static object UpgradeSettings(object oldSettingsObject)
+        {
+            ColorPickerSettingsVersion1 oldSettings = (ColorPickerSettingsVersion1)oldSettingsObject;
+            ColorPickerSettings newSettings = new ColorPickerSettings();
+            newSettings.Properties.ActivationShortcut = oldSettings.Properties.ActivationShortcut;
+            newSettings.Properties.ChangeCursor = oldSettings.Properties.ChangeCursor;
+            newSettings.Properties.ActivationAction = oldSettings.Properties.ActivationAction;
+            newSettings.Properties.ColorHistory = new List<string>(oldSettings.Properties.ColorHistory);
+            newSettings.Properties.ColorHistoryLimit = oldSettings.Properties.ColorHistoryLimit;
+            newSettings.Properties.ShowColorName = oldSettings.Properties.ShowColorName;
+            newSettings.Properties.ActivationShortcut = oldSettings.Properties.ActivationShortcut;
+            newSettings.Properties.VisibleColorFormats = new Dictionary<string, KeyValuePair<bool, string>>();
+            foreach (KeyValuePair<string, bool> oldValue in oldSettings.Properties.VisibleColorFormats)
+            {
+                newSettings.Properties.VisibleColorFormats.Add(oldValue.Key, new KeyValuePair<bool, string>(oldValue.Value, ColorFormatHelper.GetDefaultFormat(oldValue.Key)));
+            }
+
+            newSettings.Properties.CopiedColorRepresentation = newSettings.Properties.VisibleColorFormats.ElementAt((int)oldSettings.Properties.CopiedColorRepresentation).Key;
+            return newSettings;
+        }
     }
 }

src/settings-ui/Settings.UI.Library/ColorPickerSettingsVersion1.cs

@@ -0,0 +1,49 @@
+// 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.
+
+using System;
+using System.Text.Json;
+using System.Text.Json.Serialization;
+using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class ColorPickerSettingsVersion1 : BasePTModuleSettings, ISettingsConfig
+    {
+        public const string ModuleName = "ColorPicker";
+
+        [JsonPropertyName("properties")]
+        public ColorPickerPropertiesVersion1 Properties { get; set; }
+
+        public ColorPickerSettingsVersion1()
+        {
+            Properties = new ColorPickerPropertiesVersion1();
+            Version = "1";
+            Name = ModuleName;
+        }
+
+        public virtual void Save(ISettingsUtils settingsUtils)
+        {
+            // Save settings to file
+            var options = new JsonSerializerOptions
+            {
+                WriteIndented = true,
+            };
+
+            if (settingsUtils == null)
+            {
+                throw new ArgumentNullException(nameof(settingsUtils));
+            }
+
+            settingsUtils.SaveSettings(JsonSerializer.Serialize(this, options), ModuleName);
+        }
+
+        public string GetModuleName()
+            => Name;
+
+        // This can be utilized in the future if the settings.json file is to be modified/deleted.
+        public bool UpgradeSettingsConfiguration()
+            => false;
+    }
+}

src/settings-ui/Settings.UI.Library/ISettingsUtils.cs

@@ -2,6 +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 System;
 using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
 
 namespace Microsoft.PowerToys.Settings.UI.Library
@@ -21,5 +22,9 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         void DeleteSettings(string powertoy = "");
 
         string GetSettingsFilePath(string powertoy = "", string fileName = "settings.json");
+
+        T GetSettingsOrDefault<T, T2>(string powertoy = "", string fileName = "settings.json", Func<object, object> settingsUpgrader = null)
+            where T : ISettingsConfig, new()
+            where T2 : ISettingsConfig, new();
     }
 }

src/settings-ui/Settings.UI.Library/SettingsUtils.cs

@@ -96,6 +96,50 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             return newSettingsItem;
         }
 
+        /// <summary>
+        /// Get a Deserialized object of the json settings string.
+        /// This function creates a file in the powertoy folder if it does not exist and returns an object with default properties.
+        /// </summary>
+        /// <returns>Deserialized json settings object.</returns>
+        public T GetSettingsOrDefault<T, T2>(string powertoy = DefaultModuleName, string fileName = DefaultFileName, Func<object, object> settingsUpgrader = null)
+            where T : ISettingsConfig, new()
+            where T2 : ISettingsConfig, new()
+        {
+            try
+            {
+                return GetSettings<T>(powertoy, fileName);
+            }
+
+            // Catch json deserialization exceptions when the file is corrupt and has an invalid json.
+            // If there are any deserialization issues like in https://github.com/microsoft/PowerToys/issues/7500, log the error and create a new settings.json file.
+            // This is different from the case where we have trailing zeros following a valid json file, which we have handled by trimming the trailing zeros.
+            catch (JsonException ex)
+            {
+                Logger.LogError($"Exception encountered while loading {powertoy} settings.", ex);
+
+                // try to deserialize to the old format, which is presented in T2
+                try
+                {
+                    T2 oldSettings = GetSettings<T2>(powertoy, fileName);
+                    T newSettings = (T)settingsUpgrader(oldSettings);
+                    return newSettings;
+                }
+                catch (Exception)
+                {
+                    // do nothing, the problem wasn't that the settings was stored in the previous format, continue with the default settings
+                }
+            }
+            catch (FileNotFoundException)
+            {
+                Logger.LogInfo($"Settings file {fileName} for {powertoy} was not found.");
+            }
+
+            // If the settings file does not exist or if the file is corrupt, to create a new object with default parameters and save it to a newly created settings file.
+            T newSettingsItem = new T();
+            SaveSettings(newSettingsItem.ToJsonString(), powertoy, fileName);
+            return newSettingsItem;
+        }
+
         // Given the powerToy folder name and filename to be accessed, this function deserializes and returns the file.
         private T GetFile<T>(string powertoyFolderName = DefaultModuleName, string fileName = DefaultFileName)
         {

src/settings-ui/Settings.UI/OOBE/Views/OobeColorPicker.xaml.cs

@@ -49,7 +49,9 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
         protected override void OnNavigatedTo(NavigationEventArgs e)
         {
             ViewModel.LogOpeningModuleEvent();
-            HotkeyControl.Keys = SettingsRepository<ColorPickerSettings>.GetInstance(new SettingsUtils()).SettingsConfig.Properties.ActivationShortcut.GetKeysList();
+            ColorPickerSettings settings = new SettingsUtils().GetSettingsOrDefault<ColorPickerSettings, ColorPickerSettingsVersion1>(ColorPickerSettings.ModuleName, settingsUpgrader: ColorPickerSettings.UpgradeSettings);
+
+            HotkeyControl.Keys = settings.Properties.ActivationShortcut.GetKeysList();
         }
 
         protected override void OnNavigatedFrom(NavigationEventArgs e)

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -1261,14 +1261,158 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
     <value>Color formats</value>
   </data>
   <data name="ColorPicker_ColorFormats.Description" xml:space="preserve">
-    <value>Select which color formats (and in what order) should show up in the editor</value>
+    <value>Configure the color formats (edit, delete, hide, reorder them)</value>
   </data>
   <data name="MoveUp.Text" xml:space="preserve">
     <value>Move up</value>
   </data>
-  <data name="MoveDown.Text" xml:space="preserve">
+	<data name="MoveDown.Text" xml:space="preserve">
     <value>Move down</value>
   </data>
+  <data name="ColorPickerAddNewFormat.Content" xml:space="preserve">
+    <value>Add custom color format</value>
+  </data>
+  <data name="NewColorFormat.Header" xml:space="preserve">
+    <value>Format</value>
+  </data>
+  <data name="NewColorName.Header" xml:space="preserve">
+    <value>Name</value>
+  </data>
+  <data name="AddCustomColorFormat" xml:space="preserve">
+    <value>Add custom color format</value>
+  </data>
+  <data name="ColorFormatSave" xml:space="preserve">
+    <value>Save</value>
+  </data>
+  <data name="EditCustomColorFormat" xml:space="preserve">
+    <value>Edit custom color format</value>
+  </data>
+  <data name="ColorFormatUpdate" xml:space="preserve">
+    <value>Update</value>
+  </data>
+  <data name="CustomColorFormatDefaultName" xml:space="preserve">
+    <value>My Format</value>
+  </data>
+  <data name="ColorFormatDialog.SecondaryButtonText" xml:space="preserve">
+    <value>Cancel</value>
+  </data>
+  <data name="HelpLine1.Text" xml:space="preserve">
+    <value>The following parameters can be used:</value>
+  </data>
+  <data name="Help_red.Text" xml:space="preserve">
+    <value>red</value>
+  </data>
+  <data name="Help_green.Text" xml:space="preserve">
+    <value>green</value>
+  </data>
+  <data name="Help_blue.Text" xml:space="preserve">
+    <value>blue</value>
+  </data>
+  <data name="Help_alpha.Text" xml:space="preserve">
+    <value>alpha</value>
+  </data>
+  <data name="Help_cyan.Text" xml:space="preserve">
+    <value>cyan</value>
+  </data>
+  <data name="Help_magenta.Text" xml:space="preserve">
+    <value>magenta</value>
+  </data>
+  <data name="Help_yellow.Text" xml:space="preserve">
+    <value>yellow</value>
+  </data>
+  <data name="Help_black_key.Text" xml:space="preserve">
+    <value>black key</value>
+  </data>
+  <data name="Help_hue.Text" xml:space="preserve">
+    <value>hue</value>
+  </data>
+  <data name="Help_hueNat.Text" xml:space="preserve">
+    <value>hue (natural)</value>
+  </data>
+  <data name="Help_saturationI.Text" xml:space="preserve">
+    <value>saturation (HSI)</value>
+  </data>
+  <data name="Help_saturationL.Text" xml:space="preserve">
+    <value>saturation (HSL)</value>
+  </data>
+  <data name="Help_saturationB.Text" xml:space="preserve">
+    <value>saturation (HSB)</value>
+  </data>
+  <data name="Help_brightness.Text" xml:space="preserve">
+    <value>brightness</value>
+  </data>
+  <data name="Help_intensity.Text" xml:space="preserve">
+    <value>intensity</value>
+  </data>
+  <data name="Help_lightnessNat.Text" xml:space="preserve">
+    <value>lightness (nat)</value>
+  </data>
+  <data name="Help_lightnessCIE.Text" xml:space="preserve">
+    <value>lightness (CIE)</value>
+  </data>
+  <data name="Help_value.Text" xml:space="preserve">
+    <value>value</value>
+  </data>
+  <data name="Help_whiteness.Text" xml:space="preserve">
+    <value>whiteness</value>
+  </data>
+  <data name="Help_blackness.Text" xml:space="preserve">
+    <value>blackness</value>
+  </data>
+  <data name="Help_chromaticityA.Text" xml:space="preserve">
+    <value>chromaticityA</value>
+  </data>
+  <data name="Help_chromaticityB.Text" xml:space="preserve">
+    <value>chromaticityB</value>
+  </data>
+  <data name="Help_X_value.Text" xml:space="preserve">
+    <value>X value</value>
+  </data>
+  <data name="Help_Y_value.Text" xml:space="preserve">
+    <value>Y value</value>
+  </data>
+  <data name="Help_Z_value.Text" xml:space="preserve">
+    <value>Z value</value>
+  </data>
+  <data name="Help_decimal_value.Text" xml:space="preserve">
+    <value>decimal value</value>
+  </data>
+  <data name="Help_color_name.Text" xml:space="preserve">
+    <value>color name</value>
+  </data>
+  <data name="HelpLine2.Text" xml:space="preserve">
+    <value>The red, green, blue and alpha values can be formatted to the following formats:</value>
+  </data>
+  <data name="Help_byte.Text" xml:space="preserve">
+    <value>byte value (default)</value>
+  </data>
+  <data name="Help_hexL1.Text" xml:space="preserve">
+    <value>hex lowercase one digit</value>
+  </data>
+  <data name="Help_hexU1.Text" xml:space="preserve">
+    <value>hex uppercase one digit</value>
+  </data>
+  <data name="Help_hexL2.Text" xml:space="preserve">
+    <value>hex lowercase two digits</value>
+  </data>
+  <data name="Help_hexU2.Text" xml:space="preserve">
+    <value>hex uppercase two digits</value>
+  </data>
+  <data name="Help_floatWith.Text" xml:space="preserve">
+    <value>float with leading zero</value>
+  </data>
+  <data name="Help_floatWithout.Text" xml:space="preserve">
+    <value>float without leading zero</value>
+  </data>
+  <data name="HelpLine3.Text" xml:space="preserve">
+    <value>Example:  %ReX means red value in hex uppercase two digits format.</value>
+  </data>
+  <data name="Help_blue.Text" xml:space="preserve">
+    <value>blue</value>
+  </data>
+  <data name="Help_blue.Text" xml:space="preserve">
+    <value>blue</value>
+  </data>
   <data name="ColorPicker_ShowColorName.Header" xml:space="preserve">
     <value>Show color name</value>
   </data>
@@ -1315,7 +1459,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
     <value>Zone index</value>
   </data>
   <data name="ColorPicker_Editor.Header" xml:space="preserve">
-    <value>Editor</value>
+    <value>Color formats</value>
   </data>
   <data name="FancyZones_OverlappingZonesClosestCenter.Content" xml:space="preserve">
     <value>Activate the zone whose center is closest to the cursor</value>

src/settings-ui/Settings.UI/ViewModels/ColorPickerViewModel.cs

@@ -10,10 +10,12 @@ using System.Linq;
 using System.Text.Json;
 using System.Timers;
 using global::PowerToys.GPOWrapper;
+using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
 using Microsoft.PowerToys.Settings.UI.Library.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
+using Windows.ApplicationModel.Resources;
 
 namespace Microsoft.PowerToys.Settings.UI.ViewModels
 {
@@ -35,9 +37,12 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
         private GpoRuleConfigured _enabledGpoRuleConfiguration;
         private bool _enabledStateIsGPOConfigured;
         private bool _isEnabled;
+        private int _colorFormatPreviewIndex;
 
         private Func<string, int> SendConfigMSG { get; }
 
+        private Dictionary<string, string> _colorFormatsPreview;
+
         public ColorPickerViewModel(
             ISettingsUtils settingsUtils,
             ISettingsRepository<GeneralSettings> settingsRepository,
@@ -50,34 +55,20 @@ namespace Microsoft.PowerToys.Settings.UI.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)" },
-                { ColorRepresentationType.CIELAB, "CIE LAB - CIELab(76, 21, 80)" },
-                { ColorRepresentationType.CIEXYZ, "CIE XYZ - xyz(56, 50, 7)" },
-                { ColorRepresentationType.VEC4, "VEC4 - (1.0f, 0.7f, 0f, 1f)" },
-                { ColorRepresentationType.DecimalValue, "Decimal - 16755200" },
-                { ColorRepresentationType.HexInteger, "HEX Integer - 0xFFAA00EE" },
-            };
-
             GeneralSettingsConfig = settingsRepository.SettingsConfig;
 
             _settingsUtils = settingsUtils ?? throw new ArgumentNullException(nameof(settingsUtils));
 
             if (colorPickerSettingsRepository == null)
             {
-                throw new ArgumentNullException(nameof(colorPickerSettingsRepository));
+                // used in release. This method converts the settings stored in the previous form, so we have forwards compatibility
+                _colorPickerSettings = _settingsUtils.GetSettingsOrDefault<ColorPickerSettings, ColorPickerSettingsVersion1>(ColorPickerSettings.ModuleName, settingsUpgrader: ColorPickerSettings.UpgradeSettings);
+            }
+            else
+            {
+                _colorPickerSettings = colorPickerSettingsRepository.SettingsConfig; // used in the unit tests
             }
 
-            _colorPickerSettings = colorPickerSettingsRepository.SettingsConfig;
             _enabledGpoRuleConfiguration = GPOWrapper.GetConfiguredColorPickerEnabledValue();
             if (_enabledGpoRuleConfiguration == GpoRuleConfigured.Disabled || _enabledGpoRuleConfiguration == GpoRuleConfigured.Enabled)
             {
@@ -101,11 +92,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             InitializeColorFormats();
         }
 
-        /// <summary>
-        /// Gets a list with all selectable <see cref="ColorRepresentationType"/>s
-        /// </summary>
-        public IReadOnlyDictionary<ColorRepresentationType, string> SelectableColorRepresentations { get; }
-
         public bool IsEnabled
         {
             get => _isEnabled;
@@ -164,11 +150,16 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             }
         }
 
-        public ColorRepresentationType SelectedColorRepresentationValue
+        public string SelectedColorRepresentationValue
         {
             get => _colorPickerSettings.Properties.CopiedColorRepresentation;
             set
             {
+                if (value == null)
+                {
+                    return; // do not set null value, it occurs when the combobox itemSource gets modified. Right after it well be reset to the correct value
+                }
+
                 if (_colorPickerSettings.Properties.CopiedColorRepresentation != value)
                 {
                     _colorPickerSettings.Properties.CopiedColorRepresentation = value;
@@ -212,66 +203,63 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 
         public ObservableCollection<ColorFormatModel> ColorFormats { get; } = new ObservableCollection<ColorFormatModel>();
 
-        private void InitializeColorFormats()
+        public Dictionary<string, string> ColorFormatsPreview
         {
-            var visibleFormats = _colorPickerSettings.Properties.VisibleColorFormats;
-            var formatsUnordered = new List<ColorFormatModel>();
-
-            var hexFormatName = ColorRepresentationType.HEX.ToString();
-            var rgbFormatName = ColorRepresentationType.RGB.ToString();
-            var hslFormatName = ColorRepresentationType.HSL.ToString();
-            var hsvFormatName = ColorRepresentationType.HSV.ToString();
-            var cmykFormatName = ColorRepresentationType.CMYK.ToString();
-            var hsbFormatName = ColorRepresentationType.HSB.ToString();
-            var hsiFormatName = ColorRepresentationType.HSI.ToString();
-            var hwbFormatName = ColorRepresentationType.HWB.ToString();
-            var ncolFormatName = ColorRepresentationType.NCol.ToString();
-            var cielabFormatName = ColorRepresentationType.CIELAB.ToString();
-            var ciexyzFormatName = ColorRepresentationType.CIEXYZ.ToString();
-            var vec4FormatName = ColorRepresentationType.VEC4.ToString();
-            var hexIntegerFormatName = "HEX Int";
-            var decimalFormatName = "Decimal";
-
-            formatsUnordered.Add(new ColorFormatModel(hexFormatName, "ef68ff", visibleFormats.ContainsKey(hexFormatName) && visibleFormats[hexFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(rgbFormatName, "rgb(239, 104, 255)", visibleFormats.ContainsKey(rgbFormatName) && visibleFormats[rgbFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(hslFormatName, "hsl(294, 100%, 70%)", visibleFormats.ContainsKey(hslFormatName) && visibleFormats[hslFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(hsvFormatName, "hsv(294, 59%, 100%)", visibleFormats.ContainsKey(hsvFormatName) && visibleFormats[hsvFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(cmykFormatName, "cmyk(6%, 59%, 0%, 0%)", visibleFormats.ContainsKey(cmykFormatName) && visibleFormats[cmykFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(hsbFormatName, "hsb(100, 50%, 75%)", visibleFormats.ContainsKey(hsbFormatName) && visibleFormats[hsbFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(hsiFormatName, "hsi(100, 50%, 75%)", visibleFormats.ContainsKey(hsiFormatName) && visibleFormats[hsiFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(hwbFormatName, "hwb(100, 50%, 75%)", visibleFormats.ContainsKey(hwbFormatName) && visibleFormats[hwbFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(ncolFormatName, "R10, 50%, 75%", visibleFormats.ContainsKey(ncolFormatName) && visibleFormats[ncolFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(cielabFormatName, "CIELab(66, 72, -52)", visibleFormats.ContainsKey(cielabFormatName) && visibleFormats[cielabFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(ciexyzFormatName, "XYZ(59, 35, 98)", visibleFormats.ContainsKey(ciexyzFormatName) && visibleFormats[ciexyzFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(vec4FormatName, "(0.94f, 0.41f, 1.00f, 1f)", visibleFormats.ContainsKey(vec4FormatName) && visibleFormats[vec4FormatName]));
-            formatsUnordered.Add(new ColorFormatModel(decimalFormatName, "15689983", visibleFormats.ContainsKey(decimalFormatName) && visibleFormats[decimalFormatName]));
-            formatsUnordered.Add(new ColorFormatModel(hexIntegerFormatName, "0xFFAA00EE", visibleFormats.ContainsKey(hexIntegerFormatName) && visibleFormats[hexIntegerFormatName]));
-
-            foreach (var storedColorFormat in _colorPickerSettings.Properties.VisibleColorFormats)
+            get => _colorFormatsPreview;
+            set
             {
-                var predefinedFormat = formatsUnordered.FirstOrDefault(it => it.Name == storedColorFormat.Key);
-                if (predefinedFormat != null)
-                {
-                    predefinedFormat.PropertyChanged += ColorFormat_PropertyChanged;
-                    ColorFormats.Add(predefinedFormat);
-                    formatsUnordered.Remove(predefinedFormat);
-                }
+                _colorFormatsPreview = value;
+                OnPropertyChanged(nameof(ColorFormatsPreview));
+            }
+        }
+
+        public int ColorFormatsPreviewIndex
+        {
+            get
+            {
+                return _colorFormatPreviewIndex;
             }
 
-            // settings file might not have all formats listed, add remaining ones we support
-            foreach (var remainingColorFormat in formatsUnordered)
+            set
             {
-                remainingColorFormat.PropertyChanged += ColorFormat_PropertyChanged;
-                ColorFormats.Add(remainingColorFormat);
+                if (value != _colorFormatPreviewIndex)
+                {
+                    _colorFormatPreviewIndex = value;
+                    OnPropertyChanged(nameof(ColorFormatsPreviewIndex));
+                }
+            }
+        }
+
+        private void InitializeColorFormats()
+        {
+            foreach (var storedColorFormat in _colorPickerSettings.Properties.VisibleColorFormats)
+            {
+                string format = storedColorFormat.Value.Value;
+                if (format == string.Empty)
+                {
+                    format = ColorFormatHelper.GetDefaultFormat(storedColorFormat.Key);
+                }
+
+                ColorFormatModel customColorFormat = new ColorFormatModel(storedColorFormat.Key, format, storedColorFormat.Value.Key);
+                customColorFormat.PropertyChanged += ColorFormat_PropertyChanged;
+                ColorFormats.Add(customColorFormat);
             }
 
             // Reordering colors with buttons: disable first and last buttons
             ColorFormats[0].CanMoveUp = false;
             ColorFormats[ColorFormats.Count - 1].CanMoveDown = false;
 
+            UpdateColorFormatPreview();
             ColorFormats.CollectionChanged += ColorFormats_CollectionChanged;
         }
 
+        private void UpdateColorFormatPreview()
+        {
+            ColorFormatsPreview = ColorFormats.Select(x => new KeyValuePair<string, string>(x.Name, x.Name + " - " + x.Example)).ToDictionary(x => x.Key, x => x.Value);
+            SetPreviewSelectedIndex();
+            ScheduleSavingOfSettings();
+        }
+
         private void ColorFormats_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
         {
             // Reordering colors with buttons: update buttons availability depending on order
@@ -287,7 +275,20 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 ColorFormats[ColorFormats.Count - 1].CanMoveDown = false;
             }
 
+            if (ColorFormats.Count == 1)
+            {
+                ColorFormats.Single().CanBeDeleted = false;
+            }
+            else
+            {
+                foreach (var color in ColorFormats)
+                {
+                    color.CanBeDeleted = true;
+                }
+            }
+
             UpdateColorFormats();
+            UpdateColorFormatPreview();
             ScheduleSavingOfSettings();
         }
 
@@ -324,10 +325,21 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             _colorPickerSettings.Properties.VisibleColorFormats.Clear();
             foreach (var colorFormat in ColorFormats)
             {
-                _colorPickerSettings.Properties.VisibleColorFormats.Add(colorFormat.Name, colorFormat.IsShown);
+                _colorPickerSettings.Properties.VisibleColorFormats.Add(colorFormat.Name, new KeyValuePair<bool, string>(colorFormat.IsShown, colorFormat.Format));
             }
         }
 
+        internal void AddNewColorFormat(string newColorName, string newColorFormat, bool isShown)
+        {
+            if (ColorFormats.Count > 0)
+            {
+                ColorFormats[0].CanMoveUp = true;
+            }
+
+            ColorFormats.Insert(0, new ColorFormatModel(newColorName, newColorFormat, isShown));
+            SetPreviewSelectedIndex();
+        }
+
         private void NotifySettingsChanged()
         {
             // Using InvariantCulture as this is an IPC message
@@ -357,5 +369,75 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             Dispose(disposing: true);
             GC.SuppressFinalize(this);
         }
+
+        internal ColorFormatModel GetNewColorFormatModel()
+        {
+            var resourceLoader = ResourceLoader.GetForViewIndependentUse();
+            string defaultName = resourceLoader.GetString("CustomColorFormatDefaultName");
+            ColorFormatModel newColorFormatModel = new ColorFormatModel();
+            newColorFormatModel.Name = defaultName;
+            int extensionNumber = 1;
+            while (ColorFormats.Any(x => x.Name.Equals(newColorFormatModel.Name, StringComparison.Ordinal)))
+            {
+                newColorFormatModel.Name = defaultName + " (" + extensionNumber + ")";
+                extensionNumber++;
+            }
+
+            return newColorFormatModel;
+        }
+
+        internal void SetValidity(ColorFormatModel colorFormatModel, string oldName)
+        {
+            if ((colorFormatModel.Format == string.Empty) || (colorFormatModel.Name == string.Empty))
+            {
+                colorFormatModel.IsValid = false;
+            }
+            else if (colorFormatModel.Name == oldName)
+            {
+                colorFormatModel.IsValid = true;
+            }
+            else
+            {
+                colorFormatModel.IsValid = ColorFormats.Count(x => x.Name.ToUpperInvariant().Equals(colorFormatModel.Name.ToUpperInvariant(), StringComparison.Ordinal)) < 2;
+            }
+        }
+
+        internal void DeleteModel(ColorFormatModel colorFormatModel)
+        {
+            ColorFormats.Remove(colorFormatModel);
+            SetPreviewSelectedIndex();
+        }
+
+        internal void UpdateColorFormat(string oldName, ColorFormatModel colorFormat)
+        {
+            if (SelectedColorRepresentationValue == oldName)
+            {
+                SelectedColorRepresentationValue = colorFormat.Name;    // name might be changed by the user
+            }
+
+            UpdateColorFormatPreview();
+        }
+
+        internal void SetPreviewSelectedIndex()
+        {
+            int index = 0;
+
+            foreach (var item in ColorFormats)
+            {
+                if (item.Name == SelectedColorRepresentationValue)
+                {
+                    break;
+                }
+
+                index++;
+            }
+
+            if (index >= ColorFormats.Count)
+            {
+                index = 0;
+            }
+
+            ColorFormatsPreviewIndex = index;
+        }
     }
 }

src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml

@@ -6,12 +6,17 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:labs="using:CommunityToolkit.Labs.WinUI"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library"
+    xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
+    xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library" xmlns:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels" d:DataContext="{d:DesignInstance Type=viewmodels:ColorPickerViewModel}"
     xmlns:ui="using:CommunityToolkit.WinUI.UI"
     x:Name="RootPage"
     AutomationProperties.LandmarkType="Main"
     mc:Ignorable="d">
 
+    <Page.Resources>
+        <converters:BoolToVisibilityConverter x:Key="BoolToVis" />
+    </Page.Resources>
+
     <controls:SettingsPageControl
         x:Uid="ColorPicker"
         ModuleImageSource="ms-appx:///Assets/Modules/ColorPicker.png">
@@ -73,8 +78,9 @@
                             x:Name="ColorPicker_ComboBox"
                             MinWidth="{StaticResource SettingActionControlMinWidth}"
                             DisplayMemberPath="Value"
-                            ItemsSource="{Binding SelectableColorRepresentations}"
+                            ItemsSource="{Binding ColorFormatsPreview, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                             Loaded="ColorPicker_ComboBox_Loaded"
+                            SelectedIndex="{Binding ColorFormatsPreviewIndex, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                             SelectedValue="{Binding SelectedColorRepresentationValue, Mode=TwoWay}"
                             SelectedValuePath="Key" />
                     </labs:SettingsCard>
@@ -102,8 +108,14 @@
                         x:Name="ColorFormatsSetting"
                         x:Uid="ColorPicker_ColorFormats"
                         HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
-                                                 Glyph=&#xE762;}" />
-
+                                                 Glyph=&#xE762;}" >
+                        <Button
+                            x:Uid="ColorPickerAddNewFormat"
+                            Click="NewFormatClick"
+                            Style="{StaticResource AccentButtonStyle}"
+                            HorizontalAlignment="Right"
+                        />
+                    </labs:SettingsCard>
                     <!--  Disabled reordering by dragging  -->
                     <!--  CanReorderItems="True" AllowDrop="True"  -->
                     <ItemsControl
@@ -114,8 +126,8 @@
                             <DataTemplate x:DataType="models:ColorFormatModel">
                                 <labs:SettingsCard
                                     Margin="0,0,0,2"
-                                    Description="{x:Bind Example}"
-                                    Header="{x:Bind Name}">
+                                    Description="{x:Bind Example, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                                    Header="{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                                     <labs:SettingsCard.Resources>
                                         <x:Double x:Key="SettingsCardLeftIndention">42</x:Double>
                                     </labs:SettingsCard.Resources>
@@ -126,11 +138,42 @@
                                             <ColumnDefinition Width="Auto" />
                                             <ColumnDefinition Width="Auto" />
                                         </Grid.ColumnDefinitions>
+                                        <Button
+                                            x:Uid="EditButton"
+                                            Background="Transparent"
+                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                            Grid.RowSpan="2"
+                                            Width="40"
+                                            Height="36"
+                                            HorizontalAlignment="Right"
+                                            Margin="0,0,160,0"
+                                            Content="&#xE70F;"
+                                            Click="EditButton_Click">
+                                            <ToolTipService.ToolTip>
+                                                <TextBlock x:Uid="EditTooltip"/>
+                                            </ToolTipService.ToolTip>
+                                        </Button>
+                                        <Button x:Name="RemoveButton"
+                                            x:Uid="RemoveButton"
+                                            Background="Transparent"
+                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                            Grid.RowSpan="2"
+                                            Width="40"
+                                            Height="36"
+                                            Content="&#xE74D;"
+                                            HorizontalAlignment="Right"
+                                            Margin="0,0,104,0"
+                                            IsEnabled="{x:Bind CanBeDeleted, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                                            Click="RemoveButton_Click">
+                                            <ToolTipService.ToolTip>
+                                                <TextBlock x:Uid="RemoveTooltip"/>
+                                            </ToolTipService.ToolTip>
+                                        </Button>
                                         <ToggleSwitch
                                             x:Uid="Enable_ColorFormat"
                                             HorizontalAlignment="Right"
                                             AutomationProperties.HelpText="{x:Bind Name}"
-                                            IsOn="{x:Bind IsShown, Mode=TwoWay}"
+                                            IsOn="{x:Bind IsShown, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                             OffContent=""
                                             OnContent="" />
                                         <Button
@@ -169,10 +212,160 @@
                                 </labs:SettingsCard>
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
-                        </ItemsControl>
+                    </ItemsControl>
                 </controls:SettingsGroup>
+                <ContentDialog
+                    x:Name="ColorFormatDialog"
+                    x:Uid="ColorFormatDialog"
+                    PrimaryButtonStyle="{ThemeResource AccentButtonStyle}"
+                    SecondaryButtonClick="ColorFormatDialog_CancelButtonClick"
+                    IsPrimaryButtonEnabled="{Binding IsValid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
+                    <ContentDialog.DataContext>
+                        <models:ColorFormatModel />
+                    </ContentDialog.DataContext>
+                    <ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
+                        <StackPanel
+                                Margin="0,12,0,0"
+                                HorizontalAlignment="Stretch"
+                                Spacing="24">
+                            <TextBox
+                                x:Uid="NewColorName"
+                                x:Name="NewColorName"
+                                IsSpellCheckEnabled="False"
+                                TextChanged="NewColorName_TextChanged"
+                                Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                            <TextBox 
+                                x:Uid="NewColorFormat"
+                                Name="NewColorFormat"
+                                IsSpellCheckEnabled="False"
+                                TextChanged="NewColorFormat_TextChanged"
+                                Text="{Binding Format, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                            <!-- The help block -->
+                            <Grid>
+                                <Grid.RowDefinitions>
+                                    <RowDefinition />
+                                    <RowDefinition />
+                                    <RowDefinition Height="30"/>
+                                    <RowDefinition />
+                                    <RowDefinition Height="30"/>
+                                </Grid.RowDefinitions>
+                                <TextBlock x:Uid="HelpLine1"/>
+                                <Grid Grid.Row="1">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                    </Grid.RowDefinitions>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="40px"/>
+                                        <ColumnDefinition Width="120px"/>
+                                        <ColumnDefinition Width="40px"/>
+                                        <ColumnDefinition Width="120px"/>
+                                        <ColumnDefinition Width="40px"/>
+                                        <ColumnDefinition Width="120px"/>
+                                    </Grid.ColumnDefinitions>
+                                    <TextBlock Text = "%Re" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_red" Grid.Column="1"/>
+                                    <TextBlock Text = "%Gr" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_green" Grid.Column="3"/>
+                                    <TextBlock Text = "%Bl" Grid.Column="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_blue" Grid.Column="5"/>
+                                    <TextBlock Text = "%Al" Grid.Row="1" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_alpha" Grid.Row="1" Grid.Column="1"/>
+                                    <TextBlock Text = "%Cy" Grid.Row="1" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_cyan" Grid.Row="1" Grid.Column="3"/>
+                                    <TextBlock Text = "%Ma" Grid.Row="1" Grid.Column="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_magenta" Grid.Row="1" Grid.Column="5"/>
+                                    <TextBlock Text = "%Ye" Grid.Row="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_yellow" Grid.Row="2" Grid.Column="1"/>
+                                    <TextBlock Text = "%Bk" Grid.Row="2" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_black_key" Grid.Row="2" Grid.Column="3"/>
+                                    <TextBlock Text = "%Hu" Grid.Row="2" Grid.Column="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_hue" Grid.Row="2" Grid.Column="5"/>
+                                    <TextBlock Text = "%Si" Grid.Row="3" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_saturationI" Grid.Row="3" Grid.Column="1"/>
+                                    <TextBlock Text = "%Sl" Grid.Row="3" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_saturationL" Grid.Row="3" Grid.Column="3"/>
+                                    <TextBlock Text = "%Sb" Grid.Row="3" Grid.Column="4"  FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_saturationB" Grid.Row="3" Grid.Column="5"/>
+                                    <TextBlock Text = "%Br" Grid.Row="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_brightness" Grid.Row="4" Grid.Column="1"/>
+                                    <TextBlock Text = "%In" Grid.Row="4" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_intensity" Grid.Row="4" Grid.Column="3"/>
+                                    <TextBlock Text = "%Hn" Grid.Row="4" Grid.Column="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_hueNat" Grid.Row="4" Grid.Column="5"/>
+                                    <TextBlock Text = "%Ll" Grid.Row="5" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_lightnessNat" Grid.Row="5" Grid.Column="1"/>
+                                    <TextBlock Text = "%Lc" Grid.Row="5"  Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_lightnessCIE" Grid.Row="5" Grid.Column="3"/>
+                                    <TextBlock Text = "%Va" Grid.Row="5" Grid.Column="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_value" Grid.Row="5" Grid.Column="5"/>
+                                    <TextBlock Text = "%Wh" Grid.Row="6" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_whiteness" Grid.Row="6" Grid.Column="1"/>
+                                    <TextBlock Text = "%Bn" Grid.Row="6" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_blackness" Grid.Row="6" Grid.Column="3"/>
+                                    <TextBlock Text = "%Ca" Grid.Row="6" Grid.Column="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_chromaticityA" Grid.Row="6" Grid.Column="5"/>
+                                    <TextBlock Text = "%Cb" Grid.Row="7" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_chromaticityB" Grid.Row="7" Grid.Column="1"/>
+                                    <TextBlock Text = "%Xv" Grid.Row="7" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_X_value" Grid.Row="7" Grid.Column="3"/>
+                                    <TextBlock Text = "%Yv" Grid.Row="7" Grid.Column="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_Y_value" Grid.Row="7" Grid.Column="5"/>
+                                    <TextBlock Text = "%Zv" Grid.Row="8" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_Z_value" Grid.Row="8" Grid.Column="1"/>
+                                    <TextBlock Text = "%Dv" Grid.Row="8" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_decimal_value" Grid.Row="8" Grid.Column="3"/>
+                                    <TextBlock Text = "%Na" Grid.Row="8" Grid.Column="4" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_color_name" Grid.Row="8" Grid.Column="5"/>
+                                </Grid>
+                                <TextBlock 
+                                    Grid.Row="2" 
+                                    x:Uid="HelpLine2"
+                                    VerticalAlignment="Bottom"/>
+                                <Grid Grid.Row="3">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                        <RowDefinition />
+                                    </Grid.RowDefinitions>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="40px"/>
+                                        <ColumnDefinition Width="200px"/>
+                                        <ColumnDefinition Width="40px"/>
+                                        <ColumnDefinition Width="200px"/>
+                                    </Grid.ColumnDefinitions>
+                                    <TextBlock Text = "b" FontWeight="Bold"/>
+                                    <TextBlock x:Uid="Help_byte" Grid.Column="1"/>
+                                    <TextBlock Text = "h" Grid.Row="1" FontWeight="Bold"/>
+                                    <TextBlock x:Uid = "Help_hexL1" Grid.Row="1" Grid.Column="1"/>
+                                    <TextBlock Text = "H" Grid.Row="1" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid = "Help_hexU1" Grid.Row="1" Grid.Column="3"/>
+                                    <TextBlock Text = "x" Grid.Row="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid = "Help_hexL2" Grid.Row="2" Grid.Column="1"/>
+                                    <TextBlock Text = "X" Grid.Row="2" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid = "Help_hexU2" Grid.Row="2" Grid.Column="3"/>
+                                    <TextBlock Text = "f" Grid.Row="3" FontWeight="Bold"/>
+                                    <TextBlock x:Uid = "Help_floatWith" Grid.Row="3" Grid.Column="1"/>
+                                    <TextBlock Text = "F" Grid.Row="3" Grid.Column="2" FontWeight="Bold"/>
+                                    <TextBlock x:Uid = "Help_floatWithout" Grid.Row="3" Grid.Column="3"/>
+                                </Grid>
+                                <TextBlock 
+                                    Grid.Row="4" 
+                                    x:Uid = "HelpLine3"
+                                    VerticalAlignment="Bottom"/>
+                            </Grid>
+                        </StackPanel>
+                    </ScrollViewer>
+                </ContentDialog>
             </StackPanel>
-
         </controls:SettingsPageControl.ModuleContent>
 
         <controls:SettingsPageControl.PrimaryLinks>

src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml.cs

@@ -2,9 +2,16 @@
 // The Microsoft Corporation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System;
+using System.Collections.Generic;
+using System.Windows.Input;
+using ManagedCommon;
+using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.ViewModels;
 using Microsoft.UI.Xaml.Controls;
+using Windows.ApplicationModel.Resources;
+using Windows.System;
 
 namespace Microsoft.PowerToys.Settings.UI.Views
 {
@@ -12,13 +19,17 @@ namespace Microsoft.PowerToys.Settings.UI.Views
     {
         public ColorPickerViewModel ViewModel { get; set; }
 
+        public ICommand AddCommand => new RelayCommand(Add);
+
+        public ICommand UpdateCommand => new RelayCommand(Update);
+
         public ColorPickerPage()
         {
             var settingsUtils = new SettingsUtils();
             ViewModel = new ColorPickerViewModel(
                 settingsUtils,
                 SettingsRepository<GeneralSettings>.GetInstance(settingsUtils),
-                SettingsRepository<ColorPickerSettings>.GetInstance(settingsUtils),
+                null,
                 ShellPage.SendDefaultIPCMessage);
             DataContext = ViewModel;
             InitializeComponent();
@@ -37,19 +48,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
              * 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;
+            ViewModel.SetPreviewSelectedIndex();
         }
 
         private void ReorderButtonUp_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
@@ -81,5 +80,78 @@ namespace Microsoft.PowerToys.Settings.UI.Views
                 ViewModel.ColorFormats.Move(index, index + 1);
             }
         }
+
+        private void Add()
+        {
+            ColorFormatModel newColorFormat = ColorFormatDialog.DataContext as ColorFormatModel;
+            ViewModel.AddNewColorFormat(newColorFormat.Name, newColorFormat.Format, true);
+            ColorFormatDialog.Hide();
+        }
+
+        private void Update()
+        {
+            ColorFormatModel colorFormat = ColorFormatDialog.DataContext as ColorFormatModel;
+            string oldName = ((KeyValuePair<string, string>)ColorFormatDialog.Tag).Key;
+            ViewModel.UpdateColorFormat(oldName, colorFormat);
+            ColorFormatDialog.Hide();
+        }
+
+        private async void NewFormatClick(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        {
+            var resourceLoader = ResourceLoader.GetForViewIndependentUse();
+            ColorFormatDialog.Title = resourceLoader.GetString("AddCustomColorFormat");
+            ColorFormatModel newColorFormatModel = ViewModel.GetNewColorFormatModel();
+            ColorFormatDialog.DataContext = newColorFormatModel;
+            ColorFormatDialog.Tag = string.Empty;
+            NewColorFormat.Description = " " + ColorFormatHelper.GetStringRepresentation(null, newColorFormatModel.Format);
+            ColorFormatDialog.PrimaryButtonText = resourceLoader.GetString("ColorFormatSave");
+            ColorFormatDialog.PrimaryButtonCommand = AddCommand;
+            await ColorFormatDialog.ShowAsync();
+        }
+
+        private void ColorFormatDialog_CancelButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
+        {
+            if (ColorFormatDialog.Tag is KeyValuePair<string, string>)
+            {
+                ColorFormatModel modifiedColorFormat = ColorFormatDialog.DataContext as ColorFormatModel;
+                KeyValuePair<string, string> oldProperties = (KeyValuePair<string, string>)ColorFormatDialog.Tag;
+                modifiedColorFormat.Name = oldProperties.Key;
+                modifiedColorFormat.Format = oldProperties.Value;
+            }
+
+            ColorFormatDialog.Hide();
+        }
+
+        private void NewColorFormat_TextChanged(object sender, TextChangedEventArgs e)
+        {
+            NewColorFormat.Description = " " + ColorFormatHelper.GetStringRepresentation(null, NewColorFormat.Text);
+            ViewModel.SetValidity(ColorFormatDialog.DataContext as ColorFormatModel, ColorFormatDialog.Tag as string);
+        }
+
+        private void NewColorName_TextChanged(object sender, TextChangedEventArgs e)
+        {
+            ViewModel.SetValidity(ColorFormatDialog.DataContext as ColorFormatModel, ColorFormatDialog.Tag as string);
+        }
+
+        private void RemoveButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        {
+            Button btn = sender as Button;
+            ColorFormatModel colorFormatModel = btn.DataContext as ColorFormatModel;
+            ViewModel.DeleteModel(colorFormatModel);
+        }
+
+        private async void EditButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        {
+            var resourceLoader = ResourceLoader.GetForViewIndependentUse();
+            Button btn = sender as Button;
+            ColorFormatModel colorFormatModel = btn.DataContext as ColorFormatModel;
+            ColorFormatDialog.Title = resourceLoader.GetString("EditCustomColorFormat");
+            ColorFormatDialog.DataContext = colorFormatModel;
+            ColorFormatDialog.Tag = new KeyValuePair<string, string>(colorFormatModel.Name, colorFormatModel.Format);
+            NewColorFormat.Description = " " + ColorFormatHelper.GetStringRepresentation(null, colorFormatModel.Format);
+            ColorFormatDialog.PrimaryButtonText = resourceLoader.GetString("ColorFormatUpdate");
+            ColorFormatDialog.PrimaryButtonCommand = UpdateCommand;
+            await ColorFormatDialog.ShowAsync();
+        }
     }
 }