ColorSmith
为 Visual Studio 编辑器提供颜色样本和真正好用的取色器。样本只出现在代码真正定义颜色的地方——绝不会出现在页面文本中的单词“red”上，也不会出现在注释里的 #123 上。
免费 · Visual Studio 2022 和 2026 · 14 种界面语言 · 无遥测
为什么还要一个颜色扩展
智能检测
每种语言都有自己的词法分析器，能区分字符串、注释和代码。颜色名称只有在颜色上下文中（Foreground="Red"、color: red）才会显示样本，普通文本中不会。
值得打开的取色器
HEX、RGB、HSL 和 OKLCH，带放大镜的吸管，浅色与深色，文件中的颜色，收藏，WCAG 对比度。结果会以代码已在使用的写法写回。
免费，没有附加条件
没有订阅、没有试用期、没有催促弹窗、没有遥测。设置只保存在你的计算机上。
说你的语言
英语、捷克语、德语、西班牙语、法语、意大利语、日语、韩语、波兰语、葡萄牙语（巴西）、俄语、土耳其语、中文（简体和繁体）。跟随 Visual Studio 的语言。
功能
- 编辑器中的样本：支持十六进制颜色、CSS 函数（
rgb()、hsl()、hwb()、oklch()、oklab()）、命名颜色、.NET 成员（Colors.Red、Brushes.Teal、SKColors.Gold）以及带字面量参数的调用（Color.FromArgb(255, 61, 139, 255)、new Color32(…)、QColor(…)、RGB(…)）。 - 四种显示模式：值前的方块、边距中的方块、下划线（默认）或值的背景。只有第一种会移动文本。
- 单击样本即可打开取色器；修改会直接替换原值，并保持其写法。
- 颜色卡片：悬停时显示多个色彩空间中的值、最接近的命名颜色，以及在白色和黑色背景上的对比度。
- 复合值：CSS
light-dark()（拆分样本）、color-mix()（计算结果）、CSS 渐变和 XAML 渐变画笔。 - 资源：
{StaticResource AccentBrush}、{DynamicResource …}、{ThemeResource …}和var(--accent)会从解决方案的 XAML 和 CSS 文件中解析；浅色和深色主题的值显示为拆分样本。 - Tailwind CSS 颜色类：
bg-sky-500、hover:text-white/80、bg-[#1da1f2]。 - 在解决方案中替换：一次修改所有位置的同一颜色，每处保持各自的写法，还可选择搜索“相似色调”。
- IntelliSense 中的颜色预览：当完成列表中选中一个颜色时，光标上方会显示该颜色的小标签。
语言
| 语言 | 哪些内容会显示样本 |
|---|---|
| C#, Visual Basic, F# | 十六进制字符串，Colors.X / Brushes.X / Color.X，带字面量的 Color.FromArgb / FromRgb，Unity Color / Color32，SkiaSharp，MAUI |
| C / C++ | 十六进制字符串，RGB()，D2D1::ColorF，QColor，IM_COL32 |
| JavaScript / TypeScript | 十六进制和 CSS 字符串，赋值给颜色目标的名称（fillStyle = 'red'），new THREE.Color()，JSX 中的 Tailwind 类 |
| Python | 十六进制字符串，matplotlib "tab:blue"，QColor(…)，仅作为颜色参数的名称（color="red"、Tkinter bg=） |
| XAML / AXAML | 颜色属性、setter、<Color> 资源、渐变画笔、资源引用、MAUI AppThemeBinding |
| CSS / SCSS / LESS | 仅声明值、变量、light-dark()、color-mix()、渐变、var() |
| HTML / Vue / SVG / Razor | style 属性、颜色属性、<style> 和 <script> 块、Razor C# 块、Tailwind 类 |
取色器
单击样本，或单击颜色卡片中的编辑。取色器会在值旁边打开，并显示将写回的写法（示例中为 Color.FromArgb()）。
- 饱和度/明度区域，色相和不透明度滑条。
- 支持以 HEX、RGB、HSL 和 OKLCH 输入；下方一行准确显示将写入代码的内容。
- 吸管可从屏幕任意位置拾取颜色。放大镜显示光标下的像素；方向键每次移动 1 像素，Shift+方向键每次移动 10 像素。
- 复制为：适用于 XAML/.NET 或 CSS 的 HEX、
rgb()、hsl()、oklch()、Color.FromArgb、UnityColor或0xAARRGGBB。 - 当前颜色的浅色与深色、此文件中的颜色、收藏（星形按钮）和最近使用的颜色。
- 对比度 (WCAG)：该颜色作为文本在编辑器背景、白色或黑色上的对比度，并标注 AA / AAA / 大字。
- 最接近的命名颜色（≈ DodgerBlue）；单击即可使用该名称。
- Enter 应用，Esc 取消；单击取色器外部也会应用。各部分可以折叠，取色器会记住折叠状态。? 按钮会打开本页。
复合颜色和资源颜色在取色器中为只读：请编辑其中的颜色，或在资源定义处编辑资源。
颜色卡片
将鼠标悬停在颜色上即可查看其卡片。在下划线和背景模式中，卡片上还有按钮：编辑打开取色器，复制复制值，在解决方案中替换颜色…启动整个解决方案范围的替换。按住 Alt 单击样本可直接复制值，不打开任何窗口。
light-dark()：两个值和拆分样本。
检测原理
ColorSmith 不会用一个庞大的正则表达式搜索文本。每个文件都由对应语言的词法分析器拆分为字符串、注释和代码，只有当位置毫无疑问时，值才会被识别为颜色。有疑问时，不显示样本。
| 显示样本 | 不显示样本 |
|---|---|
Foreground="Red", color: red; | <p>Red is my favorite color</p> |
"#3D8BFF", // #3D8BFF | // fixed in #123（注释中的短十六进制值） |
Color.FromArgb(255, 61, 139, 255) | Color.FromArgb(alpha, r, g, b)（值未知） |
bg-sky-500, text-white/80 | text-lg, border-2, bg-cover |
Python 中的 color="red" | status = "red", (255, 0, 0) |
a { color: navy } | #main、.red 选择器，font-family: Red Hat |
8 位十六进制
#XXXXXXXX 在 .NET、XAML 和 Qt 中表示 Alpha 在前（#AARRGGBB），在 CSS 和 JavaScript 中表示 Alpha 在后（#RRGGBBAA）。由于 Unity 和面向 Web 的代码将 Alpha 放在最后，C#、VB 和 C++ 字符串中的顺序由设置决定。
在解决方案中替换
在颜色上使用灯泡（Ctrl+.）或颜色卡片中的按钮打开。它会在整个解决方案文件夹（不含 bin、obj 和 node_modules）中查找该颜色的所有写法，让你选择要替换的位置，并按各自的写法重写。更改的文件以未保存状态打开，每个文件只需一步撤消，因此可以在保存前检查全部更改。
设置
工具 → 选项 → SmithWorks → ColorSmith。每个选项下方都有说明。
| 选项 | 默认值 |
|---|---|
| 显示颜色样本 | 开 |
| 显示模式 | 下划线 |
| 样本大小 | 中 |
| IntelliSense 中的颜色预览 | 开 |
| 在解决方案中替换 | 开 |
| 注释中的十六进制颜色 | 开 |
| Tailwind CSS 类 | 开 |
| 资源颜色 | 开 |
| C#、VB 和 C++ 中的 8 位十六进制 | #AARRGGBB |
| 最大文件大小 (KB) | 4096 |
| 语言 | 全部开启 |
设置与取色器的收藏和最近使用的颜色一起保存在 %LocalAppData%\ColorSmith 中。
常见问题
为什么我的颜色没有样本？
很可能是位置有歧义：颜色上下文之外的名称、带变量参数的调用、注释中的短十六进制值，或用 var()/calc() 构建的值。另请检查设置中是否已开启该语言，以及文件是否小于大小限制。
颜色能以图标形式显示在 IntelliSense 列表中吗？
不能。Visual Studio 不允许扩展更改其他提供程序的完成项图标。ColorSmith 改为在光标上方显示颜色小标签。
样本会让代码移位吗？
只有“值前的方块”模式会。边距、下划线和背景模式从不移动文本。
能在使用资源颜色的位置直接编辑它吗？
暂时不能。卡片会显示每个主题的值及其文件和行号；请在定义处修改。
ColorSmith 会发送任何数据吗？
不会。没有遥测，也不访问网络。
在哪里报告问题或提出功能建议？
请在 GitHub 上的 Feedback 仓库中提交 issue——那里有用于报告错误和提出建议的表单。也可以使用 Marketplace 上的 Q&A 选项卡。
更新日志
1.0.2
- 反馈：取色器标题栏中的按钮和设置中的“发送反馈”链接可打开 GitHub 上的 Feedback 仓库。
- 设置已移至“工具 → 选项 → SmithWorks → ColorSmith”，与其他 SmithWorks 扩展放在一起。
1.0.1
- 取色器标题栏中的设置按钮（齿轮）可打开“工具 → 选项 → ColorSmith”。
- 长期使用后仅显示一次、可轻松关闭的评价请求，以及设置中的“在 Marketplace 上评价”链接。
1.0.0
- 首个公开版本。
- 取色器中的帮助按钮和设置中的“文档”链接。