提供 Ant Design 风格的主题色选择组件支持 12 种主色及其 10 个渐变等级共计120种色值web色彩风格迁移到了winform种使用集成到UIForm中一、效果图示例主色值应用的窗体色调等级色作为tabpage1的背景色非常灵活二、使用手册ColorPalette 多彩主题选择控件提供 Ant Design 风格的主题色选择组件支持 12 种主色及其 10 个渐变等级。何时使用当用户需要选择主题色或预览颜色渐变效果时使用。支持12 种 Ant Design 预设主色红、橙、金、黄、酸橙绿、绿、青、蓝、极客蓝、紫、品红、粉点击主色后显示该颜色的 10 个渐变等级自动应用选中的颜色到全局主题基础用法最简单的颜色选择器varcolorPalettenewColorPalette{LocationnewPoint(30,30)};this.Controls.Add(colorPalette);监听颜色选择事件varcolorPalettenewColorPalette();// 监听颜色选择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);设置列数和色块大小varcolorPalettenewColorPalette{LocationnewPoint(30,30),Columns4,// 每行显示4个色块ItemSize60,// 色块大小60像素ItemSpacing10// 色块间距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.BackColore.Value;};事件参数说明属性类型说明e.ColorAntThemeColor主题色枚举如 Blue、Rede.Namestring颜色名称如蓝色或蓝色 6e.ValueColor选中的实际颜色值e.MainColorColor兼容旧代码同 Valuee.IsLevelColorbool是否选择的是等级颜色e.Levelint等级值1-10仅当 IsLevelColortrue 时有效属性说明ColorPalette 属性属性名类型默认值说明Columnsint6每行显示的颜色数量ItemSizeint48颜色块的大小像素ItemSpacingint12颜色块之间的间距像素CornerRadiusint4颜色块的圆角半径SelectedColorAntThemeColorBlue当前选中的主题色只读CurrentThemeColorAntThemeColor-当前全局主题色可读写自动同步辅助方法方法说明GetAntColor(color, level)获取指定主题色的指定等级颜色GetCurrentAntColor(level)获取当前主题色的指定等级颜色BackToMainColors()返回主色选择模式获取颜色值直接获取选中的颜色colorPalette.ColorSelected(sender,e){// e.Value 是选中的颜色值ColorselectedColore.Value;// 获取十六进制字符串stringhex$#{selectedColor.R:X2}{selectedColor.G:X2}{selectedColor.B:X2};// 应用到控件button.BackColorselectedColor;};获取特定等级的颜色// 获取当前主题色的第6级颜色Colorlevel6colorPalette.GetCurrentAntColor(6);// 获取蓝色主题的第8级颜色Colorblue8colorPalette.GetAntColor(AntThemeColor.Blue,8);完整示例publicpartialclassForm1:Form{privateColorPalette_colorPalette;privateButton_previewButton;publicForm1(){InitializeComponent();// 创建颜色选择器_colorPalettenewColorPalette{LocationnewPoint(30,30),Columns4,ItemSize50,ItemSpacing8};// 监听颜色选择_colorPalette.ColorSelectedOnColorSelected;// 创建预览按钮_previewButtonnewButton{Text预览颜色,LocationnewPoint(30,150),SizenewSize(200,40)};this.Controls.Add(_colorPalette);this.Controls.Add(_previewButton);}privatevoidOnColorSelected(object?sender,ColorSelectedEventArgse){// 显示选中的颜色信息stringinfoe.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.BackColore.Value;_previewButton.ForeColorGetContrastColor(e.Value);}privateColorGetContrastColor(Colorcolor){// 计算对比度决定文字颜色intluminance(int)(0.299*color.R0.587*color.G0.114*color.B);returnluminance128?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)
【WinForm UI控件系列】多彩主题选择控件ColorPalette，12种主色AntDesign，120种色值（10个等级色）
发布时间：2026/5/25 15:22:29
提供 Ant Design 风格的主题色选择组件支持 12 种主色及其 10 个渐变等级共计120种色值web色彩风格迁移到了winform种使用集成到UIForm中一、效果图示例主色值应用的窗体色调等级色作为tabpage1的背景色非常灵活二、使用手册ColorPalette 多彩主题选择控件提供 Ant Design 风格的主题色选择组件支持 12 种主色及其 10 个渐变等级。何时使用当用户需要选择主题色或预览颜色渐变效果时使用。支持12 种 Ant Design 预设主色红、橙、金、黄、酸橙绿、绿、青、蓝、极客蓝、紫、品红、粉点击主色后显示该颜色的 10 个渐变等级自动应用选中的颜色到全局主题基础用法最简单的颜色选择器varcolorPalettenewColorPalette{LocationnewPoint(30,30)};this.Controls.Add(colorPalette);监听颜色选择事件varcolorPalettenewColorPalette();// 监听颜色选择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);设置列数和色块大小varcolorPalettenewColorPalette{LocationnewPoint(30,30),Columns4,// 每行显示4个色块ItemSize60,// 色块大小60像素ItemSpacing10// 色块间距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.BackColore.Value;};事件参数说明属性类型说明e.ColorAntThemeColor主题色枚举如 Blue、Rede.Namestring颜色名称如蓝色或蓝色 6e.ValueColor选中的实际颜色值e.MainColorColor兼容旧代码同 Valuee.IsLevelColorbool是否选择的是等级颜色e.Levelint等级值1-10仅当 IsLevelColortrue 时有效属性说明ColorPalette 属性属性名类型默认值说明Columnsint6每行显示的颜色数量ItemSizeint48颜色块的大小像素ItemSpacingint12颜色块之间的间距像素CornerRadiusint4颜色块的圆角半径SelectedColorAntThemeColorBlue当前选中的主题色只读CurrentThemeColorAntThemeColor-当前全局主题色可读写自动同步辅助方法方法说明GetAntColor(color, level)获取指定主题色的指定等级颜色GetCurrentAntColor(level)获取当前主题色的指定等级颜色BackToMainColors()返回主色选择模式获取颜色值直接获取选中的颜色colorPalette.ColorSelected(sender,e){// e.Value 是选中的颜色值ColorselectedColore.Value;// 获取十六进制字符串stringhex$#{selectedColor.R:X2}{selectedColor.G:X2}{selectedColor.B:X2};// 应用到控件button.BackColorselectedColor;};获取特定等级的颜色// 获取当前主题色的第6级颜色Colorlevel6colorPalette.GetCurrentAntColor(6);// 获取蓝色主题的第8级颜色Colorblue8colorPalette.GetAntColor(AntThemeColor.Blue,8);完整示例publicpartialclassForm1:Form{privateColorPalette_colorPalette;privateButton_previewButton;publicForm1(){InitializeComponent();// 创建颜色选择器_colorPalettenewColorPalette{LocationnewPoint(30,30),Columns4,ItemSize50,ItemSpacing8};// 监听颜色选择_colorPalette.ColorSelectedOnColorSelected;// 创建预览按钮_previewButtonnewButton{Text预览颜色,LocationnewPoint(30,150),SizenewSize(200,40)};this.Controls.Add(_colorPalette);this.Controls.Add(_previewButton);}privatevoidOnColorSelected(object?sender,ColorSelectedEventArgse){// 显示选中的颜色信息stringinfoe.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.BackColore.Value;_previewButton.ForeColorGetContrastColor(e.Value);}privateColorGetContrastColor(Colorcolor){// 计算对比度决定文字颜色intluminance(int)(0.299*color.R0.587*color.G0.114*color.B);returnluminance128?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)
