[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.

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();
+        }
     }
 }