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 和以網頁為主的程式碼會將 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
- 首個公開版本。
- 選色工具中的說明按鈕，以及設定中的「文件」連結。