
这个工具解决什么问题
做设计稿还原、做前端配色、或者只是看到别人页面上一个好看的颜色想拿来用,都会遇到同一个问题:这个颜色的色值到底是多少?Windows 自带的画图虽然有个吸管,但要先把屏幕截下来、粘进画图、切到吸管、点一下、再去调色板里读 RGB,最后还得自己换算成 HEX——五步操作只为拿一个六位字符串。在线取色工具更麻烦:得先把截图上传,网页还常常只给 RGB 不给 HSL,想换算 CMYK 又得再找一个工具。
- 原来的做法:截图 → 粘进画图 → 用吸管取色 → 打开调色板读 RGB → 自己换算成 HEX;要 HSL 或 CMYK 还得再找在线换算器。
- 用这个工具:点「从屏幕取色」,鼠标移到目标上,放大镜实时显示那一像素的颜色和色值,左键一点,HEX / RGB / HSL / CMYK 四组值全部算好,一键复制。
- 省下来的:原来拿一个色值要花一分钟以上,现在两三秒;而且 HSL 和 CMYK 是顺手一起给的,不用再来回换工具。
技术实现
C# + .NET Framework 4.8 写成 WinForms 单窗口程序,编译成单个 exe。选这个栈是因为取色必须调 Windows 的屏幕抓取 API(Graphics.CopyFromScreen),这是原生能力;.NET Framework 4.8 又是 Windows 10/11 自带运行时,用户双击即用,不需要额外安装。
- 全屏遮罩 + 放大镜,而不是「等 3 秒后取鼠标位置」:很多小工具的做法是隐藏自己、等几秒、再读鼠标当前位置的像素。问题是用户还没把鼠标移到目标上就已经取完了,体验很差。本工具用一个无边框全屏遮罩窗体,鼠标移到哪放大镜跟到哪,左键才确认,所见即所得。
- 放大镜用 CopyFromScreen 抓小区域再放大:只抓光标周围 15×15 像素的区域(Bitmap + Graphics.CopyFromScreen),再按 10 倍用最近邻插值(NearestNeighbor)绘制,中心画红色准星标出正在取的那一个像素。抓取区域小,每帧开销极低,鼠标移动很跟手。
- 坐标一律用 Cursor.Position:遮罩上有放大镜和文字两个子控件,鼠标移到子控件上时父窗体收不到 MouseMove 事件,放大镜会「卡住」。改用 Cursor.Position(屏幕坐标)判断位置,并给子控件也挂上同一个处理函数,彻底避开这个坑。
- 手写 HSL / CMYK 换算,不引第三方库:公式是固定的,写出来只有几十行,而且便于逐行核对。HSL 走标准的 max/min 色相公式(H 归一到 0–360°),CMYK 走朴素换算(K = 1 − max(R,G,B))。转换结果与 Python colorsys 的基准值逐位一致。
- HEX 输入框可双向使用:HEX 不只是显示,也可以直接输入:输入 6 位(或 3 位简写)会自动识别并刷新所有色值。做配色时经常是「我有色值想看看长什么样」,双向比单向实用。
- 亮底黑字、暗底白字:预览色块上的色值文字按亮度公式 (R×299+G×587+B×114)/1000 判断,亮色用黑字、暗色用白字,保证在白色和黑色背景上都看得清。
技术栈:C# 5.0、.NET Framework 4.8、WinForms 窗体
已知局限:取到的是屏幕合成后的最终像素值(受系统色彩管理影响),与设计稿里的原始色值可能有极细微差别;放大镜采样按主屏边界做了保护,副屏最右侧极窄区域可能取不到。
操作教程
- 打开程序
双击 exe,窗口打开后默认已经载入一个颜色(主题蓝 #0069CC),预览色块、HEX/RGB/HSL/CMYK 四组值、常用色板都能看到。
预期结果:窗口正常显示,色块上写着 #0069CC,四组色值均已填好。 - 从屏幕取色
点「从屏幕取色」,主窗口隐藏,屏幕变成可点状态。移动鼠标,光标旁边会出现放大镜(显示放大的像素)和实时色值。
预期结果:放大镜跟随鼠标移动,中心红框标出正在取的像素,旁边显示 #RRGGBB 与 RGB 值。 - 确认取色
把红框对准想要的像素,按鼠标左键确认;不想取了按右键或 Esc 取消。
预期结果:窗口恢复显示,预览色块换成新取到的颜色,四组色值全部刷新,该颜色进入「最近取色」。 - 复制色值
点「复制 HEX」得到 #RRGGBB,点「复制 RGB」得到 233,30,99 形式,点「复制全部色值」得到四行完整报告。
预期结果:状态栏提示已复制,粘贴到编辑器里是期望的格式。 - 用色板或历史快速载入
点「常用色板」里任意一格载入该颜色;点「最近取色」里任意一格回到之前取过的颜色。
预期结果:预览与四组色值同步更新。 - 反过来查色值
在 HEX 输入框里直接输入一个六位色值(如 E91E63),所有色值立刻算出来。
预期结果:输入满 6 位后自动刷新预览与 RGB/HSL/CMYK。
取色过程不需要联网,也不需要安装任何运行环境。
常见问题
技术实现与后续维护
本工具由我们自行开发并持续维护,每次迭代都经过本地自测。取色逻辑集中在 PickOverlay 一个类里,色值换算集中在三个静态方法(Hex / RgbToHsl / RgbToCmyk)里,主窗口只负责展示。想改取色交互只动 PickOverlay,想加色彩空间只加静态方法。
技术构成:
src/MainForm.cs—— 唯一源码文件:PickOverlay 全屏取色遮罩 + MainForm 主窗口 + 色值换算函数DOCS/开发文档.md—— 工程结构、取色实现要点、色值公式与扩展点
运行环境:
使用 .NET Framework 4.8 自带的 csc.exe 编译,无需 Visual Studio:
csc /target:winexe /out:屏幕取色与色值转换.exe /platform:anycpu /optimize+ /reference:System.Windows.Forms.dll /reference:System.Drawing.dll src\MainForm.cs
也可以在 Visual Studio 2019/2022 中新建「.NET Framework 4.8」Windows 窗体项目,把 src\MainForm.cs 加入后直接生成。
可扩展方向:
- 在 RgbToHsl 之外补充 HSV / LAB / LCH 等色彩空间
- 取色后自动生成色阶(同色相不同明度的一组色)
- 增加 WCAG 对比度计算,判断配色可读性
- 增加从图片文件提取主色(走中位切分或 K-Means)
本工具免费提供使用,但不对外分发源码。如果你需要在本工具基础上做功能调整、对接内部系统或长期维护,可以联系我们做二次开发,源码与工程文档可在定制合作中一并交付。
需要其它功能?可以定制
这个工具只做一件事:看到屏幕上某个颜色想知道色值,截图再开工具取色太绕。如果你的场景还需要别的处理,可以联系我们做二次开发,按你的实际数据格式和流程定制。
常见的定制需求:
- 取色后自动生成该颜色的浅色/深色衍生色(做设计系统色阶)
- 增加调色板导出:把常用色板导出成 CSS 变量或设计令牌文件
- 增加对比度检查:判断前景色与背景色的 WCAG 对比度是否达标
- 支持从图片文件里批量提取主色(而不是只取单个像素)
- 联系方式:邮箱/微信见站内「联系我们」页面,或在本文下方留言
- 定制说明:请附上你的数据样例(脱敏即可)和期望结果,方便快速评估工作量
- 交付形式:定制项目可交付可执行程序,按需一并交付源码与工程文档,支持长期维护
使用说明与免责声明
- 本工具在本地运行,不联网、不上传任何数据到服务器。
- 涉及文件改写的功能,请在使用前备份原始文件。
- 软件完全免费,可自由使用与转发,请勿用于倒卖。
- 因误操作造成的数据问题请自行承担。

