How to Display the Color.Name in a custom ColorEditor in VS Designer?

I am trying to follow this code that adds a new tab in the VS Designer ColorEditor. However, the dropdown shows the ARGB of the colors as shown below, making it hard to work with colors that are kind of similar.

How can I edit the code from the above link to make the ColorEditor display the ColorName's string property? I tried various methods, such as swapping the order in the dictionary.

I've also been searching since last week on how to do this, and I came across this. I also tried this, but this creates an extender provider instead of a tab. At some point, I did consider using this instead of the ColorEditor, but this does not show the mini Color Preview Box.

In the first example, swapped the order of the key-value pair into <string, int>. I also tried using a custom class CustomColor that has the following properties:

public class CustomColor {
    Color Color;
    string Name;
}

I also tried incorporating the accepted answer in the second link, but it does not show a preview box of the color, and it does not use the ColorEditor, but an ExtenderProvider. Specifically, I tried to implement the Find method in CustomColor.cs with the CustomColorTypeConverter.cs, but didn't know how to access the dropdown in the designer.

I hope you understand what I am trying to say, I apologize for any grammar mistakes as English is not my first language.

You just need a custom color converter to take care of converting your theme color names to corresponding value, and the color values to your theme color name.

Use the same CustomColorEditor from my answer in the linked post, then create the following converter:

public class CustomColorConverter : ColorConverter
{
    Dictionary<int, string> colorNames = new Dictionary<int, string>
    {
        {Color.Red.ToArgb(), "Blood"},
        {Color.Green.ToArgb(), "Life potion"},
        {Color.Blue.ToArgb(), "Water"},
    };
    public override object ConvertTo(ITypeDescriptorContext context,
        CultureInfo culture, object value, Type destinationType)
    {
        if (destinationType == typeof(string) &&
            value is Color &&
            colorNames.ContainsKey(((Color)value).ToArgb()))
            return colorNames[((Color)value).ToArgb()];
        return base.ConvertTo(context, culture, value, destinationType);
    }
    public override object ConvertFrom(ITypeDescriptorContext context,
        CultureInfo culture, object value)
    {
        if (value is string)
        {
            foreach (var item in colorNames)
            {
                if (string.Equals(item.Value, (string)value,
                    StringComparison.OrdinalIgnoreCase))
                    return Color.FromArgb(item.Key);
            }
        }
        return base.ConvertFrom(context, culture, value);
    }
}

Then register the converter:

public class MyControl : Control
{
    [Editor(typeof(CustomColorEditor), typeof(UITypeEditor))]
    [TypeConverter(typeof(CustomColorConverter))]
    public Color MyColor { get; set; }
}

Close all designer windows and rebuild the solution. Then if you open your form in design mode, and try to play with MyColor property of MyControl you will notice that when you select Water from the theme colors, it shows Water as the text in property grid; or if you write Blood in the property grid, it selects the Blood color.

Note

You can of course improve the functionality and the code. For example:

• You can put all your named color in a class like ThemeColor, then use it in the editor and the converter

• You can select the theme tab when opening the dropdown if a theme color is selected.