在整理 TNO 风格 UI 素材时很多人会遇到同一个问题画面布局很满意但主题色想整体换一套。手动用画图工具逐个改颜色工作量巨大而且很容易出现暗角、高光、描边颜色没改全的情况。本文提供了一套基于 Python 的换色生成器实现输入配置文件和原始 PNG 素材就能批量产出换色后的 UI 素材并自动生成一个 HTML 对比预览页面。内容覆盖颜色配置、透明通道处理、批量处理、预览生成和常见排错适合有少量 Python 基础、想用脚本替代重复劳动的开发者。1. 背景与核心概念1.1 TNO 风格 UI 素材为什么需要“换色”TNO 在 UI 素材圈通常指一套风格鲜明的界面体系大量半透明面板、简洁线框、特定色相的强调色、统一的文字层级。很多二次创作者会保留它的布局只希望换一套主题色例如从蓝灰色改成红金、墨绿、黑白等。手动换色最大的问题并不在于“改一个主色”而在于 UI 素材往往包含多层颜色关系。例如一个按钮素材通常由底色、高光、阴影、边框、渐变混合组成。如果只把底色替换掉高光和阴影仍然是原来的蓝色调看起来就会非常奇怪。更麻烦的是一套 UI 主题往往有几十张甚至上百张 PNG 素材。人工处理不仅慢还容易出现颜色遗漏。此时非常适合用脚本工具来做“配置驱动的统一换色”。1.2 换色 UI 生成器解决什么问题换色 UI 生成器是一个输入换色配置和原始 UI 素材、输出换色后素材的自动化工具。它把“颜色怎么替换”和“素材怎么处理”两个问题彻底分开。核心能力包括颜色映射指定源颜色与目标颜色的对应关系。批量处理遍历目录自动处理全部 PNG 文件。透明通道保护只替换不透明像素避免出现杂色光晕。预览对比生成 HTML 页面方便检查前后效果。这种工具特别适合以下场景给整套 UI 素材换主题色比如从蓝色切换到红色。保留原来设计稿的布局和层次只调整色彩风格。快速生成多套配色方案用于方案对比。在模组或皮肤开发中统一维护一套可复用的换色配置。当然它也有使用边界。它只能完成“颜色替换”不能重新绘制 UI也不能自动识别哪些区域属于按钮、哪些属于背景。具体的素材分类和颜色筛选仍然需要人工在配置中定义。1.3 本文讲解范围下面是本文要动手实现的生成器功能支持 HEX 颜色配置。支持三种换色策略精确匹配、容差匹配、色相偏移。支持批量处理 PNG 素材。保留透明通道避免边缘脏色。自动生成 HTML 预览页面。通过命令行传入配置文件一条命令完成全流程。整体技术栈非常简单Python Pillow PyYAML。你可以很快读懂并改造它。2. 环境准备与版本说明2.1 安装环境本文示例基于 Python 3.9 或更高版本编写。操作系统不限Windows、macOS、Linux 均可运行。建议使用虚拟环境隔离项目依赖避免污染全局 Python 环境。接下来先创建项目目录和虚拟环境。mkdir tno_recolor_generator cd tno_recolor_generator python -m venv venv # Windows 激活虚拟环境 venv\Scripts\activate # macOS / Linux 激活虚拟环境 source venv/bin/activate激活虚拟环境后创建requirements.txt文件内容如下Pillow9.0.0 PyYAML5.4.0 numpy1.21.0然后安装依赖pip install -r requirements.txt说明一下numpy在本文的纯 Python 版本中不是必须的但如果你后续想优化处理速度强烈建议安装。文末的优化部分会提到基于 NumPy 的向量化思路。版本方面Pillow 9.x 和 10.x 本次示例都兼容PyYAML 5.4 以上均可。如果你的项目已有其他依赖版本以你本地环境为准不要盲目升级。2.2 项目目录结构完整的项目目录结构如下tno_recolor_generator/ ├── main.py # 入口脚本 ├── recolor.py # 换色核心逻辑 ├── color_utils.py # 颜色工具函数 ├── generate_preview.py # 预览页生成器 ├── requirements.txt # 依赖清单 ├── config.yaml # 换色配置 ├── ui_src/ # 原始 UI 素材目录 │ ├── bg.png │ ├── tab_bar.png │ └── button_normal.png └── ui_out/ # 换色结果输出目录ui_src是你放置原始 PNG 素材的目录输出结果会按相同目录结构写入ui_out不会修改原图。这样即使换色效果不满意也能随时回退。3. 核心原理拆解3.1 颜色表示与换色思路在图片处理中最常见的是 RGB 颜色模型。一个像素由红、绿、蓝三个通道组成每个通道取值 0 到 255。比如#2B3A67表示一种偏深的蓝色。RGB 适合描述颜色本身但不太适合做“换色”操作。因为同一组颜色在高光、阴影、渐变中的 RGB 值差异很大如果你只定义一个精确 RGB 值很难覆盖整片区域。相比之下HSV/HSL 颜色模型更适合换色场景。HSV 分别表示色相、饱和度、明度。色相决定颜色属于红、绿、蓝还是其他色系饱和度决定颜色鲜艳程度明度决定亮度。换色的核心思路可以拆成三种精确匹配把某个完全相同的 RGB 值替换成另一个 RGB 值。容差匹配把距离某个 RGB 值在指定范围内的颜色都替换掉适合抗锯齿边缘和渐变区域。色相偏移把一片色相相近的颜色整体平移例如把色相 220 度左右的蓝色全部转成 0 度左右的红色。3.2 三种换色策略对比精确匹配最安全但适用面窄。它适合纯色图标、文字、描边这类颜色非常统一的区域。容差匹配最常用。它允许你设置一个tolerance容差参数值越大能替换的颜色范围就越大。容差过大会误伤无关颜色过小则替换不干净。色相偏移适合处理一个完整色系。它可以保留原图中的饱和度变化和明暗层次只改变色相。也就是说按钮的高光和阴影仍然保持相对关系只是整体从蓝色变成了红色。在使用顺序上建议先执行精确匹配和容差匹配再执行色相偏移。因为色相偏移的覆盖面通常比较大如果先做色相平移后面的精确匹配可能就无法命中原来的 RGB 值了。3.3 透明通道保护处理 PNG 素材时必须注意透明通道。在 RGBA 模式下每个像素有四个通道前三个是 RGB最后一个是 Alpha 透明度。如果某个像素的 Alpha 值为 0表示完全透明。此时它的 RGB 值通常是不可靠的可能是画图软件残留的脏数据。如果对这种像素做颜色替换再导出到某些环境透明边缘可能会出现一圈彩色光晕。所以在换色逻辑中遇到透明度为 0 的像素应该直接跳过不参与任何颜色计算。对于半透明像素可以正常参与换色但要注意保留原始 Alpha 值。3.4 性能优化方向用 Python 逐像素循环处理大图会比较慢。本文的代码为了可读性先用最简单直观的方式实现。如果后续要处理大量高清素材可以从以下几个方向优化使用 NumPy 把图片转换成数组向量化计算颜色距离和映射关系。先缩小图片测试配置确认效果后再全量处理。如果颜色规则固定且图片精度要求不高可以提前生成颜色查找表用一个point操作完成映射。对超大图查询、批量任务可以使用多进程按文件并行处理。文章最后的最佳实践部分会再展开说明。4. 完整实战案例4.1 初始化项目假设你已经创建了tno_recolor_generator目录并激活虚拟环境。接下来创建所有 Python 文件。如果你用的是 Linux / macOS可以直接用命令行创建文件touch main.py recolor.py color_utils.py generate_preview.py config.yaml如果你用的是 Windows可以直接在 IDE 中新建同名文件。下文会按文件逐个讲解。4.2 编写颜色工具模块文件路径color_utils.py这个模块负责颜色格式转换。它提供了三个基础函数hex_to_rgb把#RRGGBB转成(R, G, B)元组。rgb_to_hex把 RGB 元组转成 HEX 字符串。rgb_to_hsv/hsv_to_rgb在 RGB 和 HSV 之间互转方便做色相偏移。代码如下# 文件路径color_utils.py import colorsys def hex_to_rgb(hex_str: str): 将 #RRGGBB 格式的颜色转换为 (R, G, B) 元组。 hex_str hex_str.lstrip(#) if len(hex_str) ! 6: raise ValueError(f无效的HEX颜色值: #{hex_str}) return tuple(int(hex_str[i:i 2], 16) for i in (0, 2, 4)) def rgb_to_hex(rgb): 将 (R, G, B) 元组转换为 #RRGGBB 格式字符串。 return #{:02X}{:02X}{:02X}.format(*rgb) def rgb_to_hsv(rgb): 将 RGB 元组转换为 HSV色相范围 0~360饱和度和明度范围 0~100。 r, g, b [c / 255.0 for c in rgb] h, s, v colorsys.rgb_to_hsv(r, g, b) return h * 360.0, s * 100.0, v * 100.0 def hsv_to_rgb(h, s, v): 将 HSV 数值转换为 RGB 元组自动做范围裁剪。 h (h % 360) / 360.0 s max(0.0, min(100.0, s)) / 100.0 v max(0.0, min(100.0, v)) / 100.0 r, g, b colorsys.hsv_to_rgb(h, s, v) return int(r * 255), int(g * 255), int(b * 255)这里的关键点是 HSV 的色相范围。Python 标准库colorsys中的色相范围是 0 到 1而日常配置里我们更习惯使用 0 到 360。所以我在转换时做了统一换算配置文件里可以直接写 220、0、30 这样的角度值。4.3 编写换色处理模块文件路径recolor.py这个模块是生成器的核心。它负责计算两个 RGB 颜色的距离。根据规则把单个像素 RGB 映射成新的 RGB。打开 PNG 图片逐像素处理并保存结果。完整代码如下# 文件路径recolor.py from pathlib import Path from PIL import Image from color_utils import rgb_to_hsv, hsv_to_rgb def color_distance(c1, c2): 计算两个 RGB 颜色的欧氏距离。 return sum((a - b) ** 2 for a, b in zip(c1, c2)) ** 0.5 def map_pixel(rgb, rules): 根据换色规则返回替换后的 RGB 颜色。 处理顺序 1. 先尝试精确匹配 exact。 2. 再尝试容差匹配 range。 3. 最后尝试色相偏移 shift_hue。 4. 如果都没有命中返回原颜色。 # 第一轮精确 matches 和容差 matches for rule in rules: if rule[type] in (exact, range): if rule[type] exact and rgb rule[from_rgb]: return rule[to_rgb] if rule[type] range: if color_distance(rgb, rule[from_rgb]) rule[tolerance]: return rule[to_rgb] # 第二轮色相偏移 for rule in rules: if rule[type] shift_hue: h, s, v rgb_to_hsv(rgb) if rule[s_min] s rule[s_max] and rule[v_min] v rule[v_max]: target_h h - rule[from_hue] rule[to_hue] return hsv_to_rgb(target_h, s, v) return rgb def process_image(src_path: Path, dst_path: Path, rules): 处理单张图片把换色后的结果保存到 dst_path。 注意 - 统一转为 RGBA 模式兼容带透明通道的 PNG。 - 完全透明的像素不参与颜色替换直接跳过。 - 保留原始 Alpha 值。 with Image.open(src_path) as im: im im.convert(RGBA) pixels im.load() for y in range(im.height): for x in range(im.width): r, g, b, a pixels[x, y] if a 0: continue new_rgb map_pixel((r, g, b), rules) pixels[x, y] (new_rgb[0], new_rgb[1], new_rgb[2], a) dst_path.parent.mkdir(parentsTrue, exist_okTrue) im.save(dst_path)map_pixel中有一个实现细节值得单独说明色相偏移会使用源色相和目标色相的差值对当前像素色相做平移。比如源色相是 220 度的蓝目标色相是 0 度的红偏差是0 - 220 -220。某个像素原本色相是 220 度平移后变成220 - 220 0度于是从蓝变成了红。如果某个像素的色相比源色相稍高比如 230 度平移后会变成 10 度仍然属于红色系。这样就能保留原图的高光和阴影渐变层次。4.4 编写换色配置文件路径config.yaml配置文件把颜色替换策略拆成三个规则类型便于维护和理解。下面是一个把蓝色主题换成红色主题的示例。theme: name: red_theme description: 把默认蓝色 UI 换成红色主题 process: input_dir: ./ui_src output_dir: ./ui_out formats: - .png replace_rules: # 精确匹配深色描边 - type: exact from: #2B3A67 to: #8C1C1C # 容差匹配按钮主色 - type: range from: #3D5A99 to: #A63A3A tolerance: 35 # 色相偏移处理同色系的渐变色、高光、阴影 - type: shift_hue from_hue: 220 to_hue: 0 saturation_range: [10, 100] lightness_range: [5, 95]配置说明theme.name会显示在预览页标题中。process.input_dir和process.output_dir分别控制输入输出目录。formats指定要处理的文件后缀避免误处理其他文件。replace_rules是换色规则数组按从上到下的顺序执行。在色相偏移规则中saturation_range和lightness_range用于限制作用的颜色范围。这里我把饱和度低于 10 的灰色、亮度太暗或太亮的极端颜色排除了避免把原本的黑色文字和白色高光全部染色。4.5 编写入口与预览生成文件路径main.py入口脚本负责读取配置、触发批量处理、生成预览页。完整代码如下# 文件路径main.py import argparse from pathlib import Path import yaml from color_utils import hex_to_rgb from recolor import process_image from generate_preview import generate_preview def load_rules(config): 把 YAML 配置转换为内部规则结构。 rules [] for rule in config[replace_rules]: rule_type rule[type] if rule_type exact: rules.append({ type: exact, from_rgb: hex_to_rgb(rule[from]), to_rgb: hex_to_rgb(rule[to]), }) elif rule_type range: rules.append({ type: range, from_rgb: hex_to_rgb(rule[from]), to_rgb: hex_to_rgb(rule[to]), tolerance: rule[tolerance], }) elif rule_type shift_hue: rules.append({ type: shift_hue, from_hue: float(rule[from_hue]), to_hue: float(rule[to_hue]), s_min: rule[saturation_range][0], s_max: rule[saturation_range][1], v_min: rule[lightness_range][0], v_max: rule[lightness_range][1], }) else: raise ValueError(f未知规则类型: {rule_type}) return rules def main(): parser argparse.ArgumentParser(descriptionTNO 换色 UI 生成器) parser.add_argument(--config, defaultconfig.yaml, help换色配置文件路径) args parser.parse_args() config yaml.safe_load(Path(args.config).read_text(encodingutf-8)) process_config config[process] input_dir Path(process_config[input_dir]) output_dir Path(process_config[output_dir]) formats [fmt.lower() for fmt in process_config[formats]] rules load_rules(config) if not input_dir.exists(): raise FileNotFoundError(f输入目录不存在: {input_dir}) output_dir.mkdir(parentsTrue, exist_okTrue) pairs [] for img_path in sorted(input_dir.rglob(*)): if img_path.suffix.lower() not in formats: continue relative_path img_path.relative_to(input_dir) dst_path output_dir / relative_path dst_path.parent.mkdir(parentsTrue, exist_okTrue) print(f[处理中] {img_path} - {dst_path}) process_image(img_path, dst_path, rules) pairs.append((img_path, dst_path)) preview_path output_dir / preview.html generate_preview(config[theme][name], pairs, preview_path) print(f处理完成共 {len(pairs)} 张图片。) print(f预览页已生成: {preview_path}) if __name__ __main__: main()文件路径generate_preview.py预览生成模块会把每张原图和换色结果并排展示在 HTML 中。为了便于分享我选择把图片以 Base64 的形式内嵌到 HTML 里。# 文件路径generate_preview.py import base64 from pathlib import Path def image_to_data_url(image_path: Path) - str: 把图片文件转换为 data URL方便内嵌到 HTML。 mime image/png data base64.b64encode(image_path.read_bytes()).decode(utf-8) return fdata:{mime};base64,{data} def generate_preview(theme_name: str, pairs, output_path: Path): 生成一个 HTML 预览页左右对比原始素材和处理结果。 pairs 是 [(原始路径, 换色后路径), ...] 的列表。 cards [] for original_path, recolored_path in pairs: original_data image_to_data_url(original_path) recolored_data image_to_data_url(recolored_path) cards.append(f div classcard div classimg-wrap div classlabel原始素材/div img src{original_data} alt原始素材 / /div div classimg-wrap div classlabel换色结果/div img src{recolored_data} alt换色结果 / /div /div ) html f!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title换色预览 - {theme_name}/title style body {{ font-family: Microsoft YaHei, sans-serif; padding: 24px; background: #f5f5f5; }} h1 {{ margin-bottom: 8px; }} .tip {{ color: #666; margin-bottom: 20px; }} .card {{ display: flex; gap: 16px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 16px; }} .img-wrap {{ flex: 1; text-align: center; }} .label {{ font-size: 14px; color: #666; margin-bottom: 8px; }} img {{ max-width: 100%; border: 1px solid #eee; background: #fff; }} /style /head body h1换色 UI 生成示例 - {theme_name}/h1 p classtip左侧为原始 UI 素材右侧为生成器处理后的 UI 素材。/p {.join(cards)} /body /html output_path.write_text(html, encodingutf-8)这里有几个细节需要注意image_to_data_url会把图片完整读入内存如果图片很多生成的 HTML 会比较大。适合在素材量不大时使用。如果你更希望 HTML 文件体积小可以改成img src./xxx.png相对路径方式但这样移动文件时必须保持目录结构完整。预览页的样式并不复杂但它能直观看到换色前后的差异便于快速验收。4.6 运行与验证首先在ui_src目录中放入至少一张测试用 PNG 图片。然后运行python main.py --config config.yaml预期输出类似[处理中] ui_src/bg.png - ui_out/bg.png [处理中] ui_src/tab_bar.png - ui_out/tab_bar.png 处理完成共 2 张图片。 预览页已生成: ui_out/preview.html然后打开ui_out/preview.html你应该能看到左右对比的预览卡片。如果换色效果不理想例如某些颜色没变或某些区域被误替换可以调整config.yaml中的容差、色相范围和规则顺序再重新运行一次即可。整个过程不需要修改 Python 代码。5. 常见问题与排查思路5.1 常见问题总览下面把生成器使用过程中最容易遇到的问题整理成表格。问题现象常见原因解决思路替换后图像出现噪点容差过大误替换了原本不需要变化的颜色减小容差或改用精确匹配透明区域出现彩色边对 alpha 为 0 的透明像素也做了颜色计算检查代码是否跳过了a 0的像素高光和阴影没有变化只替换了主色没有处理同色相不同亮度的层次使用 shift_hue 规则或增加多级容差规则某些颜色没有被替换目标颜色超出了饱和度或明度范围放宽saturation_range/lightness_range图片处理速度很慢Python 逐像素循环使用 NumPy 向量化或先缩小测试图输出目录为空输入目录路径错误或文件后缀不匹配检查input_dir和formats配置报错ModuleNotFoundError未安装 Pillow 或 PyYAML执行pip install -r requirements.txt报错无效的HEX颜色值配置中的颜色不是 6 位十六进制检查#后面的位数5.2 详细排查流程遇到换色结果不理想时建议按下面顺序排查。第一步确认配置是否被正确读取。可以在main.py中临时打印rules结构检查from_rgb、to_rgb是否正确。第二步确认原始素材是否真的是 RGBA 颜色。有些 PNG 虽然没有透明区域但文件模式可能是 RGB 而不是 RGBAconvert(RGBA)已经帮你做了转换问题不大。第三步确认是否需要色相偏移。如果素材中主色附近有大量渐变色仅靠一个range规则很难覆盖干净。此时加入shift_hue规则往往更有效。第四步检查预览 HTML 是否被浏览器缓存。如果修改了图片或配置重新生成后需要在浏览器中强制刷新。第五步如果出现透明边缘脏色检查process_image中是否跳过了a 0的像素。另外半透明像素的边缘也可能有颜色倾向必要时可以加一层“低透明度保护”例如a 10的像素直接忽略而不是只判断a 0。6. 最佳实践与工程建议6.1 素材管理换色操作具有不可逆性建议为原始素材建立独立目录输出目录单独隔离。不要让脚本直接覆盖原图。开发阶段不要一次性处理几十张图。先用一张代表性素材测试调整好配置后再全量处理。这样能节省大量时间。6.2 配置设计配置文件的命名建议带上主题名例如config_blue_to_red.yaml、config_default_theme.yaml。这样多套换色方案可以并存需要哪个直接指定哪个。在配置中尽量使用语义化注释说明每个规则的用途。比如# 主按钮的底色偏蓝色系通过容差匹配覆盖轻微渐变 - type: range from: #3D5A99 to: #A63A3A tolerance: 35当规则数量变多时可以进一步拆分公共颜色变量。虽然 YAML 原生不支持变量但可以在代码里先加载一份调色板文件再与规则做合并这种思路更利于长期维护。6.3 安全边界与版权换色生成器是一个通用图像处理工具它可以处理任何 PNG 素材。但如果你处理的素材来自游戏模组、商业产品或他人设计请注意素材的授权范围。本文的示例仅用于学习和技术演示。如果要发布二次创作内容请先确认原始素材是否允许修改和分发保留原作者署名并遵守对应社区规则。这是工程实践之外同样重要的事。另外在命令行中处理大量图片时不要使用来源不明或包含恶意代码的脚本。本文代码只是本地图像处理不会上传任何数据但在你的项目中引入第三方库时仍然要从可信来源安装。6.4 性能优化与扩展方向如果你需要处理大量高清图片可以把process_image改造成基于 NumPy 的向量化实现。核心思路是把图片转成三维数组然后用广播计算每个像素与规则颜色的距离再用布尔掩码完成替换。这样能大幅减少 Python 层循环。如果希望做成可视化工具可以在现有基础上增加一个简单的 Web 页面上传一组 UI 素材。在页面上配置颜色映射。点击生成返回换色后的 ZIP 包。在线预览前后对比效果。后端可以直接复用本文的recolor.py只需要把文件读取和保存方式从本地路径改成上传下载即可。7. 总结与学习路线到这里你已经实现了一个配置驱动的 TNO 换色 UI 生成器。它完成了从颜色配置、批量处理、透明通道保护到预览页生成的完整流程。通过本文你应该掌握了以下几个关键点精确匹配、容差匹配、色相偏移三种换色策略的适用场景。为什么换色时要考虑透明通道以及如何避免透明边缘脏色。如何用 YAML 管理换色规则做到“不修改代码就调整效果”。如何生成 HTML 预览页快速验收批量处理结果。下一步可以尝试的方向包括把规则扩展到支持多级渐变映射不只是单一颜色替换。加入颜色自动提取功能让工具从 UI 素材中自动识别主色调。使用 Flask 或 FastAPI 做一个 Web 版本把生成器分享给团队内部使用。研究 LAB 颜色空间的距离计算让容差更符合人眼感知。你也可以直接拿一张自己的 PNG 素材把ui_src里放一张测试图调整config.yaml然后运行python main.py --config config.yaml马上就能看到换色前后的差别。动手改一改容差和色相范围很快就能理解这套工具的设计思路。 Python批量换色生成器：配置驱动UI素材调色与预览
在整理 TNO 风格 UI 素材时很多人会遇到同一个问题画面布局很满意但主题色想整体换一套。手动用画图工具逐个改颜色工作量巨大而且很容易出现暗角、高光、描边颜色没改全的情况。本文提供了一套基于 Python 的换色生成器实现输入配置文件和原始 PNG 素材就能批量产出换色后的 UI 素材并自动生成一个 HTML 对比预览页面。内容覆盖颜色配置、透明通道处理、批量处理、预览生成和常见排错适合有少量 Python 基础、想用脚本替代重复劳动的开发者。1. 背景与核心概念1.1 TNO 风格 UI 素材为什么需要“换色”TNO 在 UI 素材圈通常指一套风格鲜明的界面体系大量半透明面板、简洁线框、特定色相的强调色、统一的文字层级。很多二次创作者会保留它的布局只希望换一套主题色例如从蓝灰色改成红金、墨绿、黑白等。手动换色最大的问题并不在于“改一个主色”而在于 UI 素材往往包含多层颜色关系。例如一个按钮素材通常由底色、高光、阴影、边框、渐变混合组成。如果只把底色替换掉高光和阴影仍然是原来的蓝色调看起来就会非常奇怪。更麻烦的是一套 UI 主题往往有几十张甚至上百张 PNG 素材。人工处理不仅慢还容易出现颜色遗漏。此时非常适合用脚本工具来做“配置驱动的统一换色”。1.2 换色 UI 生成器解决什么问题换色 UI 生成器是一个输入换色配置和原始 UI 素材、输出换色后素材的自动化工具。它把“颜色怎么替换”和“素材怎么处理”两个问题彻底分开。核心能力包括颜色映射指定源颜色与目标颜色的对应关系。批量处理遍历目录自动处理全部 PNG 文件。透明通道保护只替换不透明像素避免出现杂色光晕。预览对比生成 HTML 页面方便检查前后效果。这种工具特别适合以下场景给整套 UI 素材换主题色比如从蓝色切换到红色。保留原来设计稿的布局和层次只调整色彩风格。快速生成多套配色方案用于方案对比。在模组或皮肤开发中统一维护一套可复用的换色配置。当然它也有使用边界。它只能完成“颜色替换”不能重新绘制 UI也不能自动识别哪些区域属于按钮、哪些属于背景。具体的素材分类和颜色筛选仍然需要人工在配置中定义。1.3 本文讲解范围下面是本文要动手实现的生成器功能支持 HEX 颜色配置。支持三种换色策略精确匹配、容差匹配、色相偏移。支持批量处理 PNG 素材。保留透明通道避免边缘脏色。自动生成 HTML 预览页面。通过命令行传入配置文件一条命令完成全流程。整体技术栈非常简单Python Pillow PyYAML。你可以很快读懂并改造它。2. 环境准备与版本说明2.1 安装环境本文示例基于 Python 3.9 或更高版本编写。操作系统不限Windows、macOS、Linux 均可运行。建议使用虚拟环境隔离项目依赖避免污染全局 Python 环境。接下来先创建项目目录和虚拟环境。mkdir tno_recolor_generator cd tno_recolor_generator python -m venv venv # Windows 激活虚拟环境 venv\Scripts\activate # macOS / Linux 激活虚拟环境 source venv/bin/activate激活虚拟环境后创建requirements.txt文件内容如下Pillow9.0.0 PyYAML5.4.0 numpy1.21.0然后安装依赖pip install -r requirements.txt说明一下numpy在本文的纯 Python 版本中不是必须的但如果你后续想优化处理速度强烈建议安装。文末的优化部分会提到基于 NumPy 的向量化思路。版本方面Pillow 9.x 和 10.x 本次示例都兼容PyYAML 5.4 以上均可。如果你的项目已有其他依赖版本以你本地环境为准不要盲目升级。2.2 项目目录结构完整的项目目录结构如下tno_recolor_generator/ ├── main.py # 入口脚本 ├── recolor.py # 换色核心逻辑 ├── color_utils.py # 颜色工具函数 ├── generate_preview.py # 预览页生成器 ├── requirements.txt # 依赖清单 ├── config.yaml # 换色配置 ├── ui_src/ # 原始 UI 素材目录 │ ├── bg.png │ ├── tab_bar.png │ └── button_normal.png └── ui_out/ # 换色结果输出目录ui_src是你放置原始 PNG 素材的目录输出结果会按相同目录结构写入ui_out不会修改原图。这样即使换色效果不满意也能随时回退。3. 核心原理拆解3.1 颜色表示与换色思路在图片处理中最常见的是 RGB 颜色模型。一个像素由红、绿、蓝三个通道组成每个通道取值 0 到 255。比如#2B3A67表示一种偏深的蓝色。RGB 适合描述颜色本身但不太适合做“换色”操作。因为同一组颜色在高光、阴影、渐变中的 RGB 值差异很大如果你只定义一个精确 RGB 值很难覆盖整片区域。相比之下HSV/HSL 颜色模型更适合换色场景。HSV 分别表示色相、饱和度、明度。色相决定颜色属于红、绿、蓝还是其他色系饱和度决定颜色鲜艳程度明度决定亮度。换色的核心思路可以拆成三种精确匹配把某个完全相同的 RGB 值替换成另一个 RGB 值。容差匹配把距离某个 RGB 值在指定范围内的颜色都替换掉适合抗锯齿边缘和渐变区域。色相偏移把一片色相相近的颜色整体平移例如把色相 220 度左右的蓝色全部转成 0 度左右的红色。3.2 三种换色策略对比精确匹配最安全但适用面窄。它适合纯色图标、文字、描边这类颜色非常统一的区域。容差匹配最常用。它允许你设置一个tolerance容差参数值越大能替换的颜色范围就越大。容差过大会误伤无关颜色过小则替换不干净。色相偏移适合处理一个完整色系。它可以保留原图中的饱和度变化和明暗层次只改变色相。也就是说按钮的高光和阴影仍然保持相对关系只是整体从蓝色变成了红色。在使用顺序上建议先执行精确匹配和容差匹配再执行色相偏移。因为色相偏移的覆盖面通常比较大如果先做色相平移后面的精确匹配可能就无法命中原来的 RGB 值了。3.3 透明通道保护处理 PNG 素材时必须注意透明通道。在 RGBA 模式下每个像素有四个通道前三个是 RGB最后一个是 Alpha 透明度。如果某个像素的 Alpha 值为 0表示完全透明。此时它的 RGB 值通常是不可靠的可能是画图软件残留的脏数据。如果对这种像素做颜色替换再导出到某些环境透明边缘可能会出现一圈彩色光晕。所以在换色逻辑中遇到透明度为 0 的像素应该直接跳过不参与任何颜色计算。对于半透明像素可以正常参与换色但要注意保留原始 Alpha 值。3.4 性能优化方向用 Python 逐像素循环处理大图会比较慢。本文的代码为了可读性先用最简单直观的方式实现。如果后续要处理大量高清素材可以从以下几个方向优化使用 NumPy 把图片转换成数组向量化计算颜色距离和映射关系。先缩小图片测试配置确认效果后再全量处理。如果颜色规则固定且图片精度要求不高可以提前生成颜色查找表用一个point操作完成映射。对超大图查询、批量任务可以使用多进程按文件并行处理。文章最后的最佳实践部分会再展开说明。4. 完整实战案例4.1 初始化项目假设你已经创建了tno_recolor_generator目录并激活虚拟环境。接下来创建所有 Python 文件。如果你用的是 Linux / macOS可以直接用命令行创建文件touch main.py recolor.py color_utils.py generate_preview.py config.yaml如果你用的是 Windows可以直接在 IDE 中新建同名文件。下文会按文件逐个讲解。4.2 编写颜色工具模块文件路径color_utils.py这个模块负责颜色格式转换。它提供了三个基础函数hex_to_rgb把#RRGGBB转成(R, G, B)元组。rgb_to_hex把 RGB 元组转成 HEX 字符串。rgb_to_hsv/hsv_to_rgb在 RGB 和 HSV 之间互转方便做色相偏移。代码如下# 文件路径color_utils.py import colorsys def hex_to_rgb(hex_str: str): 将 #RRGGBB 格式的颜色转换为 (R, G, B) 元组。 hex_str hex_str.lstrip(#) if len(hex_str) ! 6: raise ValueError(f无效的HEX颜色值: #{hex_str}) return tuple(int(hex_str[i:i 2], 16) for i in (0, 2, 4)) def rgb_to_hex(rgb): 将 (R, G, B) 元组转换为 #RRGGBB 格式字符串。 return #{:02X}{:02X}{:02X}.format(*rgb) def rgb_to_hsv(rgb): 将 RGB 元组转换为 HSV色相范围 0~360饱和度和明度范围 0~100。 r, g, b [c / 255.0 for c in rgb] h, s, v colorsys.rgb_to_hsv(r, g, b) return h * 360.0, s * 100.0, v * 100.0 def hsv_to_rgb(h, s, v): 将 HSV 数值转换为 RGB 元组自动做范围裁剪。 h (h % 360) / 360.0 s max(0.0, min(100.0, s)) / 100.0 v max(0.0, min(100.0, v)) / 100.0 r, g, b colorsys.hsv_to_rgb(h, s, v) return int(r * 255), int(g * 255), int(b * 255)这里的关键点是 HSV 的色相范围。Python 标准库colorsys中的色相范围是 0 到 1而日常配置里我们更习惯使用 0 到 360。所以我在转换时做了统一换算配置文件里可以直接写 220、0、30 这样的角度值。4.3 编写换色处理模块文件路径recolor.py这个模块是生成器的核心。它负责计算两个 RGB 颜色的距离。根据规则把单个像素 RGB 映射成新的 RGB。打开 PNG 图片逐像素处理并保存结果。完整代码如下# 文件路径recolor.py from pathlib import Path from PIL import Image from color_utils import rgb_to_hsv, hsv_to_rgb def color_distance(c1, c2): 计算两个 RGB 颜色的欧氏距离。 return sum((a - b) ** 2 for a, b in zip(c1, c2)) ** 0.5 def map_pixel(rgb, rules): 根据换色规则返回替换后的 RGB 颜色。 处理顺序 1. 先尝试精确匹配 exact。 2. 再尝试容差匹配 range。 3. 最后尝试色相偏移 shift_hue。 4. 如果都没有命中返回原颜色。 # 第一轮精确 matches 和容差 matches for rule in rules: if rule[type] in (exact, range): if rule[type] exact and rgb rule[from_rgb]: return rule[to_rgb] if rule[type] range: if color_distance(rgb, rule[from_rgb]) rule[tolerance]: return rule[to_rgb] # 第二轮色相偏移 for rule in rules: if rule[type] shift_hue: h, s, v rgb_to_hsv(rgb) if rule[s_min] s rule[s_max] and rule[v_min] v rule[v_max]: target_h h - rule[from_hue] rule[to_hue] return hsv_to_rgb(target_h, s, v) return rgb def process_image(src_path: Path, dst_path: Path, rules): 处理单张图片把换色后的结果保存到 dst_path。 注意 - 统一转为 RGBA 模式兼容带透明通道的 PNG。 - 完全透明的像素不参与颜色替换直接跳过。 - 保留原始 Alpha 值。 with Image.open(src_path) as im: im im.convert(RGBA) pixels im.load() for y in range(im.height): for x in range(im.width): r, g, b, a pixels[x, y] if a 0: continue new_rgb map_pixel((r, g, b), rules) pixels[x, y] (new_rgb[0], new_rgb[1], new_rgb[2], a) dst_path.parent.mkdir(parentsTrue, exist_okTrue) im.save(dst_path)map_pixel中有一个实现细节值得单独说明色相偏移会使用源色相和目标色相的差值对当前像素色相做平移。比如源色相是 220 度的蓝目标色相是 0 度的红偏差是0 - 220 -220。某个像素原本色相是 220 度平移后变成220 - 220 0度于是从蓝变成了红。如果某个像素的色相比源色相稍高比如 230 度平移后会变成 10 度仍然属于红色系。这样就能保留原图的高光和阴影渐变层次。4.4 编写换色配置文件路径config.yaml配置文件把颜色替换策略拆成三个规则类型便于维护和理解。下面是一个把蓝色主题换成红色主题的示例。theme: name: red_theme description: 把默认蓝色 UI 换成红色主题 process: input_dir: ./ui_src output_dir: ./ui_out formats: - .png replace_rules: # 精确匹配深色描边 - type: exact from: #2B3A67 to: #8C1C1C # 容差匹配按钮主色 - type: range from: #3D5A99 to: #A63A3A tolerance: 35 # 色相偏移处理同色系的渐变色、高光、阴影 - type: shift_hue from_hue: 220 to_hue: 0 saturation_range: [10, 100] lightness_range: [5, 95]配置说明theme.name会显示在预览页标题中。process.input_dir和process.output_dir分别控制输入输出目录。formats指定要处理的文件后缀避免误处理其他文件。replace_rules是换色规则数组按从上到下的顺序执行。在色相偏移规则中saturation_range和lightness_range用于限制作用的颜色范围。这里我把饱和度低于 10 的灰色、亮度太暗或太亮的极端颜色排除了避免把原本的黑色文字和白色高光全部染色。4.5 编写入口与预览生成文件路径main.py入口脚本负责读取配置、触发批量处理、生成预览页。完整代码如下# 文件路径main.py import argparse from pathlib import Path import yaml from color_utils import hex_to_rgb from recolor import process_image from generate_preview import generate_preview def load_rules(config): 把 YAML 配置转换为内部规则结构。 rules [] for rule in config[replace_rules]: rule_type rule[type] if rule_type exact: rules.append({ type: exact, from_rgb: hex_to_rgb(rule[from]), to_rgb: hex_to_rgb(rule[to]), }) elif rule_type range: rules.append({ type: range, from_rgb: hex_to_rgb(rule[from]), to_rgb: hex_to_rgb(rule[to]), tolerance: rule[tolerance], }) elif rule_type shift_hue: rules.append({ type: shift_hue, from_hue: float(rule[from_hue]), to_hue: float(rule[to_hue]), s_min: rule[saturation_range][0], s_max: rule[saturation_range][1], v_min: rule[lightness_range][0], v_max: rule[lightness_range][1], }) else: raise ValueError(f未知规则类型: {rule_type}) return rules def main(): parser argparse.ArgumentParser(descriptionTNO 换色 UI 生成器) parser.add_argument(--config, defaultconfig.yaml, help换色配置文件路径) args parser.parse_args() config yaml.safe_load(Path(args.config).read_text(encodingutf-8)) process_config config[process] input_dir Path(process_config[input_dir]) output_dir Path(process_config[output_dir]) formats [fmt.lower() for fmt in process_config[formats]] rules load_rules(config) if not input_dir.exists(): raise FileNotFoundError(f输入目录不存在: {input_dir}) output_dir.mkdir(parentsTrue, exist_okTrue) pairs [] for img_path in sorted(input_dir.rglob(*)): if img_path.suffix.lower() not in formats: continue relative_path img_path.relative_to(input_dir) dst_path output_dir / relative_path dst_path.parent.mkdir(parentsTrue, exist_okTrue) print(f[处理中] {img_path} - {dst_path}) process_image(img_path, dst_path, rules) pairs.append((img_path, dst_path)) preview_path output_dir / preview.html generate_preview(config[theme][name], pairs, preview_path) print(f处理完成共 {len(pairs)} 张图片。) print(f预览页已生成: {preview_path}) if __name__ __main__: main()文件路径generate_preview.py预览生成模块会把每张原图和换色结果并排展示在 HTML 中。为了便于分享我选择把图片以 Base64 的形式内嵌到 HTML 里。# 文件路径generate_preview.py import base64 from pathlib import Path def image_to_data_url(image_path: Path) - str: 把图片文件转换为 data URL方便内嵌到 HTML。 mime image/png data base64.b64encode(image_path.read_bytes()).decode(utf-8) return fdata:{mime};base64,{data} def generate_preview(theme_name: str, pairs, output_path: Path): 生成一个 HTML 预览页左右对比原始素材和处理结果。 pairs 是 [(原始路径, 换色后路径), ...] 的列表。 cards [] for original_path, recolored_path in pairs: original_data image_to_data_url(original_path) recolored_data image_to_data_url(recolored_path) cards.append(f div classcard div classimg-wrap div classlabel原始素材/div img src{original_data} alt原始素材 / /div div classimg-wrap div classlabel换色结果/div img src{recolored_data} alt换色结果 / /div /div ) html f!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title换色预览 - {theme_name}/title style body {{ font-family: Microsoft YaHei, sans-serif; padding: 24px; background: #f5f5f5; }} h1 {{ margin-bottom: 8px; }} .tip {{ color: #666; margin-bottom: 20px; }} .card {{ display: flex; gap: 16px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 16px; }} .img-wrap {{ flex: 1; text-align: center; }} .label {{ font-size: 14px; color: #666; margin-bottom: 8px; }} img {{ max-width: 100%; border: 1px solid #eee; background: #fff; }} /style /head body h1换色 UI 生成示例 - {theme_name}/h1 p classtip左侧为原始 UI 素材右侧为生成器处理后的 UI 素材。/p {.join(cards)} /body /html output_path.write_text(html, encodingutf-8)这里有几个细节需要注意image_to_data_url会把图片完整读入内存如果图片很多生成的 HTML 会比较大。适合在素材量不大时使用。如果你更希望 HTML 文件体积小可以改成img src./xxx.png相对路径方式但这样移动文件时必须保持目录结构完整。预览页的样式并不复杂但它能直观看到换色前后的差异便于快速验收。4.6 运行与验证首先在ui_src目录中放入至少一张测试用 PNG 图片。然后运行python main.py --config config.yaml预期输出类似[处理中] ui_src/bg.png - ui_out/bg.png [处理中] ui_src/tab_bar.png - ui_out/tab_bar.png 处理完成共 2 张图片。 预览页已生成: ui_out/preview.html然后打开ui_out/preview.html你应该能看到左右对比的预览卡片。如果换色效果不理想例如某些颜色没变或某些区域被误替换可以调整config.yaml中的容差、色相范围和规则顺序再重新运行一次即可。整个过程不需要修改 Python 代码。5. 常见问题与排查思路5.1 常见问题总览下面把生成器使用过程中最容易遇到的问题整理成表格。问题现象常见原因解决思路替换后图像出现噪点容差过大误替换了原本不需要变化的颜色减小容差或改用精确匹配透明区域出现彩色边对 alpha 为 0 的透明像素也做了颜色计算检查代码是否跳过了a 0的像素高光和阴影没有变化只替换了主色没有处理同色相不同亮度的层次使用 shift_hue 规则或增加多级容差规则某些颜色没有被替换目标颜色超出了饱和度或明度范围放宽saturation_range/lightness_range图片处理速度很慢Python 逐像素循环使用 NumPy 向量化或先缩小测试图输出目录为空输入目录路径错误或文件后缀不匹配检查input_dir和formats配置报错ModuleNotFoundError未安装 Pillow 或 PyYAML执行pip install -r requirements.txt报错无效的HEX颜色值配置中的颜色不是 6 位十六进制检查#后面的位数5.2 详细排查流程遇到换色结果不理想时建议按下面顺序排查。第一步确认配置是否被正确读取。可以在main.py中临时打印rules结构检查from_rgb、to_rgb是否正确。第二步确认原始素材是否真的是 RGBA 颜色。有些 PNG 虽然没有透明区域但文件模式可能是 RGB 而不是 RGBAconvert(RGBA)已经帮你做了转换问题不大。第三步确认是否需要色相偏移。如果素材中主色附近有大量渐变色仅靠一个range规则很难覆盖干净。此时加入shift_hue规则往往更有效。第四步检查预览 HTML 是否被浏览器缓存。如果修改了图片或配置重新生成后需要在浏览器中强制刷新。第五步如果出现透明边缘脏色检查process_image中是否跳过了a 0的像素。另外半透明像素的边缘也可能有颜色倾向必要时可以加一层“低透明度保护”例如a 10的像素直接忽略而不是只判断a 0。6. 最佳实践与工程建议6.1 素材管理换色操作具有不可逆性建议为原始素材建立独立目录输出目录单独隔离。不要让脚本直接覆盖原图。开发阶段不要一次性处理几十张图。先用一张代表性素材测试调整好配置后再全量处理。这样能节省大量时间。6.2 配置设计配置文件的命名建议带上主题名例如config_blue_to_red.yaml、config_default_theme.yaml。这样多套换色方案可以并存需要哪个直接指定哪个。在配置中尽量使用语义化注释说明每个规则的用途。比如# 主按钮的底色偏蓝色系通过容差匹配覆盖轻微渐变 - type: range from: #3D5A99 to: #A63A3A tolerance: 35当规则数量变多时可以进一步拆分公共颜色变量。虽然 YAML 原生不支持变量但可以在代码里先加载一份调色板文件再与规则做合并这种思路更利于长期维护。6.3 安全边界与版权换色生成器是一个通用图像处理工具它可以处理任何 PNG 素材。但如果你处理的素材来自游戏模组、商业产品或他人设计请注意素材的授权范围。本文的示例仅用于学习和技术演示。如果要发布二次创作内容请先确认原始素材是否允许修改和分发保留原作者署名并遵守对应社区规则。这是工程实践之外同样重要的事。另外在命令行中处理大量图片时不要使用来源不明或包含恶意代码的脚本。本文代码只是本地图像处理不会上传任何数据但在你的项目中引入第三方库时仍然要从可信来源安装。6.4 性能优化与扩展方向如果你需要处理大量高清图片可以把process_image改造成基于 NumPy 的向量化实现。核心思路是把图片转成三维数组然后用广播计算每个像素与规则颜色的距离再用布尔掩码完成替换。这样能大幅减少 Python 层循环。如果希望做成可视化工具可以在现有基础上增加一个简单的 Web 页面上传一组 UI 素材。在页面上配置颜色映射。点击生成返回换色后的 ZIP 包。在线预览前后对比效果。后端可以直接复用本文的recolor.py只需要把文件读取和保存方式从本地路径改成上传下载即可。7. 总结与学习路线到这里你已经实现了一个配置驱动的 TNO 换色 UI 生成器。它完成了从颜色配置、批量处理、透明通道保护到预览页生成的完整流程。通过本文你应该掌握了以下几个关键点精确匹配、容差匹配、色相偏移三种换色策略的适用场景。为什么换色时要考虑透明通道以及如何避免透明边缘脏色。如何用 YAML 管理换色规则做到“不修改代码就调整效果”。如何生成 HTML 预览页快速验收批量处理结果。下一步可以尝试的方向包括把规则扩展到支持多级渐变映射不只是单一颜色替换。加入颜色自动提取功能让工具从 UI 素材中自动识别主色调。使用 Flask 或 FastAPI 做一个 Web 版本把生成器分享给团队内部使用。研究 LAB 颜色空间的距离计算让容差更符合人眼感知。你也可以直接拿一张自己的 PNG 素材把ui_src里放一张测试图调整config.yaml然后运行python main.py --config config.yaml马上就能看到换色前后的差别。动手改一改容差和色相范围很快就能理解这套工具的设计思路。