【WinForm UI控件系列】多彩主题选择控件ColorPalette，12种主色AntDesign，120种色值（10个等级色）

提供 Ant Design 风格的主题色选择组件，支持 12 种主色及其 10 个渐变等级（共计120种色值），web色彩风格迁移到了winform种使用（集成到UIForm中）

一、效果图

示例：主色值应用的窗体色调，等级色作为tabpage1的背景色，非常灵活

二、使用手册

ColorPalette 多彩主题选择控件

提供 Ant Design 风格的主题色选择组件，支持 12 种主色及其 10 个渐变等级。

何时使用

当用户需要选择主题色或预览颜色渐变效果时使用。支持：

• 12 种 Ant Design 预设主色（红、橙、金、黄、酸橙绿、绿、青、蓝、极客蓝、紫、品红、粉）
• 点击主色后显示该颜色的 10 个渐变等级
• 自动应用选中的颜色到全局主题

基础用法

最简单的颜色选择器

var colorPalette = new ColorPalette
{
    Location = new Point(30, 30)
};

this.Controls.Add(colorPalette);

监听颜色选择事件

var colorPalette = new ColorPalette();

// 监听颜色选择
colorPalette.ColorSelected += (sender, e) =>
{
    Console.WriteLine($"选择颜色: {e.Name}");
    Console.WriteLine($"颜色值: #{e.Value.R:X2}{e.Value.G:X2}{e.Value.B:X2}");
    Console.WriteLine($"主题色枚举: {e.Color}");
};

this.Controls.Add(colorPalette);

设置列数和色块大小

var colorPalette = new ColorPalette
{
    Location = new Point(30, 30),
    Columns = 4,      // 每行显示4个色块
    ItemSize = 60,     // 色块大小60像素
    ItemSpacing = 10   // 色块间距10像素
};

this.Controls.Add(colorPalette);

等级选择模式

点击主色块后会进入等级选择模式，显示该颜色的 10 个渐变等级（1-10级，数字越小越浅）。

区分主色和等级色

colorPalette.ColorSelected += (sender, e) =>
{
    if (e.IsLevelColor)
    {
        // 选择了等级颜色
        Console.WriteLine($"选择了 {e.Name}，等级 {e.Level}");
    }
    else
    {
        // 选择了主色
        Console.WriteLine($"选择了主色 {e.Name}");
    }
    
    // 使用选中的颜色
    this.BackColor = e.Value;
};

事件参数说明

属性	类型	说明
e.Color	AntThemeColor	主题色枚举（如 Blue、Red）
e.Name	string	颜色名称（如"蓝色"或"蓝色 6"）
e.Value	Color	选中的实际颜色值
e.MainColor	Color	兼容旧代码，同 Value
e.IsLevelColor	bool	是否选择的是等级颜色
e.Level	int	等级值（1-10，仅当 IsLevelColor=true 时有效）

属性说明

ColorPalette 属性

属性名	类型	默认值	说明
Columns	int	6	每行显示的颜色数量
ItemSize	int	48	颜色块的大小（像素）
ItemSpacing	int	12	颜色块之间的间距（像素）
CornerRadius	int	4	颜色块的圆角半径
SelectedColor	AntThemeColor	Blue	当前选中的主题色（只读）
CurrentThemeColor	AntThemeColor	-	当前全局主题色（可读写，自动同步）

辅助方法

方法	说明
GetAntColor(color, level)	获取指定主题色的指定等级颜色
GetCurrentAntColor(level)	获取当前主题色的指定等级颜色
BackToMainColors()	返回主色选择模式

获取颜色值

直接获取选中的颜色

colorPalette.ColorSelected += (sender, e) =>
{
    // e.Value 是选中的颜色值
    Color selectedColor = e.Value;
    
    // 获取十六进制字符串
    string hex = $"#{selectedColor.R:X2}{selectedColor.G:X2}{selectedColor.B:X2}";
    
    // 应用到控件
    button.BackColor = selectedColor;
};

获取特定等级的颜色

// 获取当前主题色的第6级颜色
Color level6 = colorPalette.GetCurrentAntColor(6);

// 获取蓝色主题的第8级颜色
Color blue8 = colorPalette.GetAntColor(AntThemeColor.Blue, 8);

完整示例

public partial class Form1 : Form
{
    private ColorPalette _colorPalette;
    private Button _previewButton;

    public Form1()
    {
        InitializeComponent();
        
        // 创建颜色选择器
        _colorPalette = new ColorPalette
        {
            Location = new Point(30, 30),
            Columns = 4,
            ItemSize = 50,
            ItemSpacing = 8
        };
        
        // 监听颜色选择
        _colorPalette.ColorSelected += OnColorSelected;
        
        // 创建预览按钮
        _previewButton = new Button
        {
            Text = "预览颜色",
            Location = new Point(30, 150),
            Size = new Size(200, 40)
        };
        
        this.Controls.Add(_colorPalette);
        this.Controls.Add(_previewButton);
    }
    
    private void OnColorSelected(object? sender, ColorSelectedEventArgs e)
    {
        // 显示选中的颜色信息
        string info = e.IsLevelColor 
            ? $"{e.Name} (等级{e.Level})" 
            : $"主色: {e.Name}";
        
        Console.WriteLine(info);
        Console.WriteLine($"颜色值: #{e.Value.R:X2}{e.Value.G:X2}{e.Value.B:X2}");
        
        // 应用到预览按钮
        _previewButton.BackColor = e.Value;
        _previewButton.ForeColor = GetContrastColor(e.Value);
    }
    
    private Color GetContrastColor(Color color)
    {
        // 计算对比度，决定文字颜色
        int luminance = (int)(0.299 * color.R + 0.587 * color.G + 0.114 * color.B);
        return luminance > 128 ? Color.Black : Color.White;
    }
}

Ant Design 12 色板

颜色	枚举值	用途
红色	Red	错误、危险
橙色	Orange	警告
金色	Gold	警告
黄色	Yellow	警告
酸橙绿	Lime	成功
绿色	Green	成功
青色	Cyan	信息
蓝色	Blue	主色
极客蓝	GeekBlue	主色
紫色	Purple	主色
品红色	Magenta	主色
粉色	Pink	主色

颜色等级说明

每个主题色都有 10 个渐变等级：

• 等级 1：最浅色（#E6F7FF 类似的浅色调）
• 等级 6：标准色（主色，如 #1890FF）
• 等级 10：最深色（最深沉的色调）

数字越小越浅，数字越大越深。

三、后记

更多功能和控件完善中，持续关注，如有需求或好的建议，请留言(xue5zhijing)