Color Picker - show color name (#8553)

* Added color name ported from WinUI implementation

* Added new words into expect.txt

* Change color name foreground

* Moved show color name checkbox

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

@@ -166,6 +166,7 @@ bitmask
 bla
 blockquote
 blog
+BLUEGRAY
 BLURBEHIND
 BLURREGION
 bmi
@@ -180,6 +181,7 @@ BPBF
 bpp
 Breadcrumb
 bricelam
+BRIGHTGREEN
 Browsable
 bsd
 bsearch
@@ -391,11 +393,19 @@ CYSMICON
 cz
 Dac
 dacl
+DARKBLUE
+DARKGRAY
+DARKGREEN
+DARKPURPLE
+DARKRED
+DARKTEAL
+DARKYELLOW
 Dataflows
 DATAW
 davidegiacometti
 Dayof
 Dbg
+DBLEPSILON
 DBLCLKS
 DCOM
 dcomp
@@ -898,6 +908,7 @@ IBeam
 IBind
 icase
 iccex
+ICEBLUE
 IClass
 ico
 ICollection
@@ -1165,6 +1176,12 @@ LEVELID
 LExit
 lhs
 LIBID
+LIGHTBLUE
+LIGHTGRAY
+LIGHTGREEN
+LIGHTORANGE
+LIGHTTURQUOISE
+LIGHTYELLOW
 lindex
 linecap
 Linkmenu
@@ -1503,6 +1520,7 @@ OLECHAR
 oledb
 oledbcommand
 oledbconnection
+OLIVEGREEN
 OLogo
 Onboarding
 onebranch
@@ -1537,6 +1555,7 @@ OWNDC
 PACL
 PAINTSTRUCT
 PAIT
+PALEBLUE
 PALETTEWINDOW
 Pano
 paramref
@@ -1910,6 +1929,7 @@ Shortcuttool
 shortdate
 SHORTPATH
 should've
+showcolorname
 SHOWDEFAULT
 SHOWELEVATIONPROMPT
 SHOWMAXIMIZED
@@ -1944,6 +1964,7 @@ SKIPDOTNETINSTALL
 SKIPOWNPROCESS
 sku
 Skype
+SKYBLUE
 SLGP
 Slideshow
 sln

src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerProperties.cs

@@ -21,6 +21,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
             VisibleColorFormats.Add("HEX", true);
             VisibleColorFormats.Add("RGB", true);
             VisibleColorFormats.Add("HSL", true);
+            ShowColorName = false;
             ActivationAction = ColorPickerActivationAction.OpenColorPickerAndThenEditor;
         }
 
@@ -47,6 +48,10 @@ namespace Microsoft.PowerToys.Settings.UI.Library
         [System.Diagnostics.CodeAnalysis.SuppressMessage("Usage", "CA2227:Collection properties should be read only", Justification = "Need to change this collection")]
         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/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs

@@ -188,6 +188,20 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
             }
         }
 
+        public bool ShowColorName
+        {
+            get => _colorPickerSettings.Properties.ShowColorName;
+            set
+            {
+                if (_colorPickerSettings.Properties.ShowColorName != value)
+                {
+                    _colorPickerSettings.Properties.ShowColorName = value;
+                    OnPropertyChanged(nameof(ShowColorName));
+                    NotifySettingsChanged();
+                }
+            }
+        }
+
         public ObservableCollection<ColorFormatModel> ColorFormats { get; } = new ObservableCollection<ColorFormatModel>();
 
         private void InitializeColorFormats()

src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -870,4 +870,7 @@
   <data name="ColorPicker_ColorFormatsDescription.Text" xml:space="preserve">
     <value>Editor color formats (Change the order by dragging)</value>
   </data>
+  <data name="ColorPicker_ShowColorName.Content" xml:space="preserve">
+    <value>Show color name</value>
+  </data>
 </root>

src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml

@@ -101,16 +101,16 @@
                          Margin="{StaticResource SmallTopMargin}" 
                          IsEnabled="{Binding IsEnabled}"
                          GroupName="ColorPickerActivationAction">
-                <RadioButton.Content>
+                    <RadioButton.Content>
                         <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
                         <Run x:Uid="ColorPickerOnly"/>
                         <LineBreak/>
                         <Run x:Uid="ColorPickerOnly_Description" Foreground="{ThemeResource SystemBaseMediumColor}"/>
-                    </TextBlock>
+                        </TextBlock>
-                </RadioButton.Content>
+                    </RadioButton.Content>
-            </RadioButton>
+                </RadioButton>
             </StackPanel>
-            
+
             <TextBlock x:Uid="ColorFormats"
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
@@ -126,7 +126,12 @@
                       Loaded="ColorPicker_ComboBox_Loaded"
                       SelectedValue="{Binding SelectedColorRepresentationValue, Mode=TwoWay}"
                       SelectedValuePath="Key" />
-
+            
+            <CheckBox x:Uid="ColorPicker_ShowColorName"
+                          IsChecked="{Binding ShowColorName, Mode=TwoWay}"
+                          Margin="{StaticResource SmallTopMargin}"
+                          IsEnabled="{Binding IsEnabled}"/>
+            
             <TextBlock Margin="{StaticResource MediumTopMargin}"
                        x:Name="ColorFormatsListViewLabel"
                        TextWrapping="WrapWholeWords"
@@ -232,6 +237,12 @@
                                 NavigateUri="https://github.com/martinchrzan/ColorPicker/">
                     <TextBlock Text="Martin Chrzan's Color Picker" TextWrapping="Wrap" />
                 </HyperlinkButton>
+
+                <HyperlinkButton Margin="0,-3,0,0"
+                                NavigateUri="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c">
+                    <TextBlock Text="Niels Laute's UX concept" TextWrapping="Wrap" />
+                </HyperlinkButton>
+                
             </StackPanel>
         </RelativePanel>
     </Grid>

src/modules/colorPicker/ColorPickerUI/Behaviors/AppearAnimationBehavior.cs

@@ -45,6 +45,10 @@ namespace ColorPicker.Behaviors
             };
 
             AssociatedObject.BeginAnimation(UIElement.OpacityProperty, opacityAppear);
+
+            // force re-evaluation of tooltip size
+            AssociatedObject.SizeToContent = SizeToContent.Manual;
+            AssociatedObject.SizeToContent = SizeToContent.WidthAndHeight;
         }
 
         private void Hide()

src/modules/colorPicker/ColorPickerUI/Converters/BoolToInvertedVisibilityConverter.cs

@@ -0,0 +1,29 @@
+// 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.Globalization;
+using System.Windows;
+using System.Windows.Data;
+
+namespace ColorPicker.Converters
+{
+    public class BoolToInvertedVisibilityConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if ((bool)value)
+            {
+                return Visibility.Collapsed;
+            }
+
+            return Visibility.Visible;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

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

@@ -0,0 +1,264 @@
+// 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.Drawing;
+using ColorPicker.Properties;
+
+namespace ColorPicker.Helpers
+{
+    public static class ColorNameHelper
+    {
+        public const float DBLEPSILON = 2.2204460492503131e-16f;
+
+        // For the purposes of naming colors, there are four steps that we go through.
+        //
+        // 1. For numerical ease, we convert the HSL values from the range [0, 1]
+        // to the range [0, 255].
+        //
+        // 2. If luminosity is sufficiently high or low (> 240 or < 20), or if
+        // saturation is sufficiently low (<= 20), then we declare that we're in the
+        // achromatic range.  In this case, we return either white, black, or three
+        // different shades of gray (depending on luminosity).
+        //
+        // 3. If we do have a chromatic color, the first thing we need to determine
+        // about it is what the hue limits are for its saturation value - at different
+        // levels of saturation, we have different hue values that we'll consider the
+        // boundaries for different classes of named colors.  The hue limits for various
+        // saturation values are as below.
+        //
+        // The numbers correspond to the following color buckets, with 0 meaning that
+        // that bucket does not apply to the given saturation value:
+        //
+        // 1 - coral, 2 - red, 3 - orange, 4 - brown, 5 - tan, 6 - gold, 7 - yellow, 8 - olive green (with brown),
+        // 9 - olive green (with green) 10 - lime green, 11 - green - 12 - bright green 13 - teal, 14 - aqua,
+        // 15 - turquoise, 16 - pale blue, 17 - blue, 18 - blue-gray, 19 - indigo, 20 - purple, 21 - pink, 22 - brown, 23 - red
+        private static int[] hueLimitsForSatLevel1 = // Sat: 20-75
+        {
+        // 1,  2,  3,  4,  5,  6,  7,  8,  9,  10,  11,  12,  13,  14,  15,  16,  17,  18,  19,  20,  21,  22,  23
+            8,  0,  0, 44,  0,  0,  0, 63,  0,   0, 122,   0, 134,   0,   0,   0,   0, 166, 176, 241,   0, 256,   0,
+        };
+
+        private static int[] hueLimitsForSatLevel2 = // Sat: 75-115
+        {
+        // 1,  2,  3,  4,  5,  6,  7,  8,  9,  10,  11,  12,  13,  14,  15,  16,  17,  18,  19,  20,  21,  22,  23
+            0, 10,  0, 32, 46,  0,  0,  0, 61,   0, 106,   0, 136, 144,   0,   0,   0, 158, 166, 241,   0,   0, 256,
+        };
+
+        private static int[] hueLimitsForSatLevel3 = // Sat: 115-150
+        {
+        // 1,  2,  3,  4,  5,  6,  7,  8,  9,  10,  11,  12,  13,  14,  15,  16,  17,  18,  19,  20,  21,  22,  23
+            0,  8,  0,  0, 39, 46,  0,  0,  0,  71, 120,   0, 131, 144,   0,   0, 163,   0, 177, 211, 249,   0, 256,
+        };
+
+        private static int[] hueLimitsForSatLevel4 = // Sat: 150-240
+        {
+        // 1,  2,  3,  4,  5,  6,  7,  8,  9,  10,  11,  12,  13,  14,  15,  16,  17,  18,  19,  20,  21,  22,  23
+            0, 11, 26,  0,  0, 38, 45,  0,  0,  56, 100, 121, 129,   0, 140,   0, 180,   0,   0, 224, 241,   0, 256,
+        };
+
+        private static int[] hueLimitsForSatLevel5 = // Sat: 240-255
+        {
+        // 1,  2,  3,  4,  5,  6,  7,  8,  9,  10,  11,  12,  13,  14,  15,  16,  17,  18,  19,  20,  21,  22,  23
+            0, 13, 27,  0,  0, 36, 45,  0,  0,  59, 118,   0, 127, 136, 142,   0, 185,   0,   0, 216, 239,   0, 256,
+        };
+
+        // 4. Once we have the color bucket, next we have three sub-buckets that we need to worry about,
+        // corresponding to three different levels of luminosity.  For example, if we're in the "blue" bucket,
+        // that might correspond to light blue, blue, or dark blue, depending on luminosity.
+        // For each bucket, the luminosity cutoffs for the purposes of discerning between light, mid, and dark colors
+        // are different, so we define luminosity limits for low and high luminosity for each bucket, as follows:
+        private static int[] lumLimitsForHueIndexLow =
+        {
+        // 1,   2,   3,   4,   5,   6,   7,    8,  9,    10, 11,  12,  13,  14,   15, 16,  17,  18,  19,  20,  21,  22,  23
+            130, 100, 115, 100, 100, 100, 110,  75, 100,  90, 100, 100, 100, 100,  80, 100, 100, 100, 100, 100, 100, 100, 100,
+        };
+
+        private static int[] lumLimitsForHueIndexHigh =
+        {
+        // 1,   2,   3,   4,   5,   6,   7,   8,   9,   10,  11,  12,  13,  14,  15,  16,  17,  18,  19,  20,  21,  22,  23
+            170, 170, 170, 155, 170, 170, 170, 170, 170, 115, 170, 170, 170, 170, 170, 170, 170, 170, 150, 150, 170, 140, 165,
+        };
+
+        // 5. Finally, once we have a luminosity sub-bucket in the saturation color bucket, we have everything we need
+        // to retrieve a name.  For each of the 23 buckets, we have names associated with light, mid, and dark variations
+        // 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,
+        };
+
+        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,
+        };
+
+        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,
+        };
+
+        public static string GetColorName(Color color)
+        {
+            var (hue, sat, lum) = ColorHelper.ConvertToHSLColor(color);
+
+            hue = (hue == 0 ? 0 : hue / 360) * 255; // this implementation is using normalization to 0-255 instead of 0-360°
+            sat = sat * 255;
+            lum = lum * 255;
+
+            // First, if we're in the achromatic state, return the appropriate achromatic color name.
+            if (lum > 240)
+            {
+                return Resources.TEXT_COLOR_WHITE;
+            }
+            else if (lum < 20)
+            {
+                return Resources.TEXT_COLOR_BLACK;
+            }
+
+            if (sat <= 20)
+            {
+                if (lum > 170)
+                {
+                    return Resources.TEXT_COLOR_LIGHTGRAY;
+                }
+                else if (lum > 100)
+                {
+                    return Resources.TEXT_COLOR_GRAY;
+                }
+                else
+                {
+                    return Resources.TEXT_COLOR_DARKGRAY;
+                }
+            }
+
+            // If we have a chromatic color, we need to first get the hue limits for the saturation value.
+            int[] pHueLimits;
+            if (sat > 20 && sat <= 75)
+            {
+                pHueLimits = hueLimitsForSatLevel1;
+            }
+            else if (sat > 75 && sat <= 115)
+            {
+                pHueLimits = hueLimitsForSatLevel2;
+            }
+            else if (sat > 115 && sat <= 150)
+            {
+                pHueLimits = hueLimitsForSatLevel3;
+            }
+            else if (sat > 150 && sat <= 240)
+            {
+                pHueLimits = hueLimitsForSatLevel4;
+            }
+            else
+            {
+                pHueLimits = hueLimitsForSatLevel5;
+            }
+
+            // Now that we have that, we can get the color index, which represents which
+            // of the 23 buckets we're located in.
+            int colorIndex = -1;
+            for (int i = 0; i < colorNamesMid.Length; ++i)
+            {
+                if (hue < pHueLimits[i])
+                {
+                    colorIndex = i;
+                    break;
+                }
+            }
+
+            // Assuming we got a color index (and we always should get one), then next we need to
+            // figure out which luminosity sub-bucket we're located in.
+            // Once we have that, we'll return the color name from the appropriate array.
+            if (colorIndex != -1)
+            {
+                if (lum > lumLimitsForHueIndexHigh[colorIndex])
+                {
+                    return colorNamesLight[colorIndex];
+                }
+                else if (lum < lumLimitsForHueIndexLow[colorIndex])
+                {
+                    return colorNamesDark[colorIndex];
+                }
+                else
+                {
+                    return colorNamesMid[colorIndex];
+                }
+            }
+
+            return string.Empty;
+        }
+
+        public static bool AreClose(double a, double b)
+        {
+            return (float)Math.Abs(a - b) <= DBLEPSILON * (float)Math.Abs(a);
+        }
+    }
+}

src/modules/colorPicker/ColorPickerUI/MainWindow.xaml

@@ -6,14 +6,13 @@
         mc:Ignorable="d"
         xmlns:e="http://schemas.microsoft.com/xaml/behaviors"
         xmlns:behaviors="clr-namespace:ColorPicker.Behaviors"
-        Height="64"
         WindowStyle="None"
         Opacity="0.01"
         ShowInTaskbar="False"
         ResizeMode="NoResize"
         Topmost="True"
         Background="Transparent"
-        SizeToContent="Width"
+        SizeToContent="WidthAndHeight"
         AllowsTransparency="True">
     <e:Interaction.Behaviors>
         <behaviors:ChangeWindowPositionBehavior/>

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

@@ -222,6 +222,384 @@ 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

@@ -193,4 +193,172 @@
     <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>
 </root>

src/modules/colorPicker/ColorPickerUI/Resources/Styles.xaml

@@ -4,6 +4,7 @@
                     xmlns:converters="clr-namespace:ColorPicker.Converters">
     <!--CONVERTERS-->
     <BooleanToVisibilityConverter x:Key="bool2VisibilityConverter" />
+    <converters:BoolToInvertedVisibilityConverter x:Key="bool2InvertedVisibilityConverter"/>
     <converters:ColorToBrushConverter x:Key="colorToBrushConverter"/>
     <converters:ColorToStringConverter x:Key="colorToStringConverter"/>
     <converters:NumberToVisibilityConverter x:Key="numberToVisibilityConverter"/>

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

@@ -23,5 +23,7 @@ namespace ColorPicker.Settings
         SettingItem<int> ColorHistoryLimit { get; }
 
         ObservableCollection<string> VisibleColorFormats { get; }
+
+        SettingItem<bool> ShowColorName { get; }
     }
 }

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

@@ -42,6 +42,7 @@ namespace ColorPicker.Settings
             ActivationAction = new SettingItem<ColorPickerActivationAction>(ColorPickerActivationAction.OpenEditor);
             ColorHistoryLimit = new SettingItem<int>(20);
             ColorHistory.CollectionChanged += ColorHistory_CollectionChanged;
+            ShowColorName = new SettingItem<bool>(false);
 
             LoadSettingsFromJson();
 
@@ -73,6 +74,8 @@ namespace ColorPicker.Settings
 
         public ObservableCollection<string> VisibleColorFormats { get; private set; } = new ObservableCollection<string>();
 
+        public SettingItem<bool> ShowColorName { get; }
+
         private void LoadSettingsFromJson()
         {
             // TODO this IO call should by Async, update GetFileWatcher helper to support async
@@ -103,6 +106,7 @@ namespace ColorPicker.Settings
                                 CopiedColorRepresentation.Value = settings.Properties.CopiedColorRepresentation;
                                 ActivationAction.Value = settings.Properties.ActivationAction;
                                 ColorHistoryLimit.Value = settings.Properties.ColorHistoryLimit;
+                                ShowColorName.Value = settings.Properties.ShowColorName;
 
                                 if (settings.Properties.ColorHistory == null)
                                 {

src/modules/colorPicker/ColorPickerUI/ViewModelContracts/IMainViewModel.cs

@@ -17,5 +17,15 @@ namespace ColorPicker.ViewModelContracts
         /// Gets the current selected color as a <see cref="Brush"/>
         /// </summary>
         Brush ColorBrush { get; }
+
+        /// <summary>
+        /// Gets the color name
+        /// </summary>
+        string ColorName { get; }
+
+        /// <summary>
+        /// Gets a value indicating whether gets the show color name
+        /// </summary>
+        bool ShowColorName { get; }
     }
 }

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

@@ -37,6 +37,11 @@ namespace ColorPicker.ViewModels
         /// </summary>
         private Brush _colorBrush;
 
+        /// <summary>
+        /// Backing field for <see cref="ColorName"/>
+        /// </summary>
+        private string _colorName;
+
         [ImportingConstructor]
         public MainViewModel(
             IMouseInfoProvider mouseInfoProvider,
@@ -56,6 +61,7 @@ namespace ColorPicker.ViewModels
                 mouseInfoProvider.OnMouseWheel += MouseInfoProvider_OnMouseWheel;
             }
 
+            _userSettings.ShowColorName.PropertyChanged += (s, e) => { OnPropertyChanged(nameof(ShowColorName)); };
             keyboardMonitor?.Start();
         }
 
@@ -85,6 +91,21 @@ namespace ColorPicker.ViewModels
             }
         }
 
+        public string ColorName
+        {
+            get => _colorName;
+            private set
+            {
+                _colorName = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public bool ShowColorName
+        {
+            get => _userSettings.ShowColorName.Value;
+        }
+
         /// <summary>
         /// Tell the color picker that the color on the position of the mouse cursor have changed
         /// </summary>
@@ -94,6 +115,10 @@ namespace ColorPicker.ViewModels
         {
             ColorBrush = new SolidColorBrush(Color.FromArgb(color.A, color.R, color.G, color.B));
             ColorText = ColorRepresentationHelper.GetStringRepresentation(color, _userSettings.CopiedColorRepresentation.Value);
+            if (_userSettings.ShowColorName.Value)
+            {
+                ColorName = ColorNameHelper.GetColorName(color);
+            }
         }
 
         /// <summary>

src/modules/colorPicker/ColorPickerUI/Views/MainView.xaml

@@ -22,26 +22,70 @@
                     ShadowDepth="1" />
             </Border.Effect>-->
 
-            <Grid Margin="2">
+            <Grid>
-                <Grid.ColumnDefinitions>
+                <!--only color format - one line -->
-                    <ColumnDefinition Width="36"/>
+                <Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2InvertedVisibilityConverter}}">
-                    <ColumnDefinition Width="Auto"/>
+                    <Grid.ColumnDefinitions>
-                </Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="36"/>
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
 
-                <Border Background="{Binding ColorBrush}"
+                    <Border Background="{Binding ColorBrush}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     BorderBrush="{DynamicResource WindowBorderBrush}"
                     BorderThickness="1"
-                    x:Name="ColorBorder"
+                    x:Name="ColorBorderSmall"
                     CornerRadius="4"/>
 
-            <TextBlock Margin="8,5,8,8"
+                    <TextBlock Margin="8,5,8,8"
                        FontSize="16"
                        FontWeight="SemiBold"
                        Foreground="{DynamicResource PrimaryForegroundBrush}"
                        Grid.Column="1"
                        Text="{Binding ColorText}"/>
+                </Grid>
+
+                <!--color format and color name - two lines-->
+                <Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2VisibilityConverter}}">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="26"/>
+                        <RowDefinition Height="26"/>
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="52"/>
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
+
+                    <Border Background="{Binding ColorBrush}"
+                        HorizontalAlignment="Stretch"
+                        Grid.RowSpan="2"
+                        VerticalAlignment="Stretch"
+                        BorderBrush="{DynamicResource WindowBorderBrush}"
+                        BorderThickness="1"
+                        Margin="1"
+                        x:Name="ColorBorderBig"
+                        CornerRadius="4"/>
+
+                    <TextBlock Margin="8,5,6,0"
+                           FontSize="16"
+                           Grid.Row="0"
+                           FontWeight="SemiBold"
+                           Foreground="{DynamicResource PrimaryForegroundBrush}"
+                           Grid.Column="1"
+                           Text="{Binding ColorText}"/>
+
+                    <TextBlock Margin="8,0,8,2"
+                           Height="26"
+                           Grid.Row="1"
+                           Grid.Column="1"
+                           Grid.ColumnSpan="2"
+                           FontSize="16"
+                           FontWeight="SemiBold"
+                           Foreground="{DynamicResource PrimaryForegroundBrush}"
+                           Opacity="0.6"
+                           Text="{Binding ColorName}"/>
+                </Grid>
             </Grid>
         </Border>
     </Grid>