[ColorPicker] Add hexadecimal integer format (#21354)

* ColorPicker: Add hexadecimal integer format

* Fix typo: integral -> integer

* Rename as Hex Int

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

@@ -48,6 +48,7 @@ namespace ColorPicker.Helpers
                 ColorRepresentationType.CIEXYZ => ColorToCIEXYZ(color),
                 ColorRepresentationType.VEC4 => ColorToFloat(color),
                 ColorRepresentationType.DecimalValue => ColorToDecimal(color),
+                ColorRepresentationType.HexInteger => ColorToHexInteger(color),
 
                 // Fall-back value, when "_userSettings.CopiedColorRepresentation.Value" is incorrect
                 _ => ColorToHex(color),
@@ -76,7 +77,7 @@ namespace ColorPicker.Helpers
         /// <summary>
         /// Return a hexadecimal <see cref="string"/> representation of a RGB color
         /// </summary>
-        /// <param name="color">The see cref="Color"/> for the hexadecimal presentation</param>
+        /// <param name="color">The <see cref="Color"/> for the hexadecimal presentation</param>
         /// <returns>A hexadecimal <see cref="string"/> representation of a RGB color</returns>
         private static string ColorToHex(Color color)
         {
@@ -266,5 +267,20 @@ namespace ColorPicker.Helpers
                    $", {y.ToString(CultureInfo.InvariantCulture)}" +
                    $", {z.ToString(CultureInfo.InvariantCulture)})";
         }
+
+        /// <summary>
+        /// Return a hexadecimal integer <see cref="string"/> representation of a RGB color
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> for the hexadecimal integer presentation</param>
+        /// <returns>A hexadecimal integer <see cref="string"/> representation of a RGB color</returns>
+        private static string ColorToHexInteger(Color color)
+        {
+            const string hexFormat = "X2";
+
+            return "0xFF"
+                + $"{color.R.ToString(hexFormat, CultureInfo.InvariantCulture)}"
+                + $"{color.G.ToString(hexFormat, CultureInfo.InvariantCulture)}"
+                + $"{color.B.ToString(hexFormat, CultureInfo.InvariantCulture)}";
+        }
     }
 }

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

@@ -326,6 +326,12 @@ namespace ColorPicker.ViewModels
                     FormatName = "Decimal",
                     Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.DecimalValue),
                 });
+            _allColorRepresentations.Add(
+                new ColorFormatModel()
+                {
+                    FormatName = "HEX Int",
+                    Convert = (Color color) => ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.HexInteger),
+                });
 
             _userSettings.VisibleColorFormats.CollectionChanged += VisibleColorFormats_CollectionChanged;
 

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

@@ -26,6 +26,7 @@ namespace Microsoft.ColorPicker.UnitTests
         [DataRow(ColorRepresentationType.CIEXYZ, "XYZ(0, 0, 0)")]
         [DataRow(ColorRepresentationType.VEC4, "(0f, 0f, 0f, 1f)")]
         [DataRow(ColorRepresentationType.DecimalValue, "0")]
+        [DataRow(ColorRepresentationType.HexInteger, "0xFF000000")]
 
         public void GetStringRepresentationTest(ColorRepresentationType type, string expected)
         {

src/settings-ui/Settings.UI.Library/Enumerations/ColorRepresentationType.cs

@@ -75,5 +75,10 @@ namespace Microsoft.PowerToys.Settings.UI.Library.Enumerations
         /// Color presentation as integer decimal value 0-16777215
         /// </summary>
         DecimalValue = 12,
+
+        /// <summary>
+        /// Color presentation as an 8-digit hexadecimal integer (0xFFFFFFFF)
+        /// </summary>
+        HexInteger = 13,
     }
 }

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

@@ -65,6 +65,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
                 { 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;
@@ -228,6 +229,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             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]));
@@ -243,6 +245,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             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)
             {