ColorSmith
Barevné vzorky a plnohodnotný výběr barvy pro editor Visual Studia. Vzorek se objeví jen tam, kde kód barvu skutečně definuje — nikdy u slova „red“ v textu stránky ani u #123 v komentáři.
Zdarma · Visual Studio 2022 a 2026 · 14 jazyků rozhraní · žádná telemetrie
Proč další rozšíření pro barvy
Chytré rozpoznávání
Každý jazyk má vlastní lexer, který rozliší řetězce, komentáře a kód. Název barvy dostane vzorek jen v barevném kontextu (Foreground="Red", color: red), nikoli v běžném textu.
Výběr barvy, který stojí za otevření
HEX, RGB, HSL a OKLCH, kapátko s lupou, světlejší a tmavší odstíny, barvy ze souboru, oblíbené, kontrast podle WCAG. Výsledek se zapíše zpět v zápisu, který kód už používá.
Zdarma a bez háčků
Žádné předplatné, zkušební verze, otravná okna ani telemetrie. Nastavení zůstává ve vašem počítači.
Mluví vaším jazykem
Angličtina, čeština, němčina, španělština, francouzština, italština, japonština, korejština, polština, portugalština (Brazílie), ruština, turečtina, čínština (zjednodušená a tradiční). Řídí se jazykem Visual Studia.
Funkce
- Vzorky v editoru pro hex barvy, funkce CSS (
rgb(),hsl(),hwb(),oklch(),oklab()), pojmenované barvy, členy .NET (Colors.Red,Brushes.Teal,SKColors.Gold) a volání s literálovými argumenty (Color.FromArgb(255, 61, 139, 255),new Color32(…),QColor(…),RGB(…)). - Čtyři režimy zobrazení: čtverec před hodnotou, čtverec na okraji, podtržení (výchozí) nebo pozadí samotné hodnoty. Text posouvá jen první z nich.
- Kliknutím na vzorek otevřete výběr barvy; úprava nahradí hodnotu na místě a zachová její zápis.
- Karta barvy po najetí myší: hodnoty v několika barevných prostorech, nejbližší pojmenovaná barva a kontrast na bílé a černé.
- Složené hodnoty: CSS
light-dark()(rozdělený vzorek),color-mix()(vypočtený výsledek), přechody CSS a přechodové štětce XAML. - Prostředky:
{StaticResource AccentBrush},{DynamicResource …},{ThemeResource …}avar(--accent)se dohledají v souborech XAML a CSS v řešení; světlá a tmavá varianta dají rozdělený vzorek. - Barevné třídy Tailwind CSS:
bg-sky-500,hover:text-white/80,bg-[#1da1f2]. - Nahrazení v řešení: změňte jednu barvu všude, na každém místě v jeho vlastním zápisu, volitelně i s hledáním „podobných odstínů“.
- Náhled barvy v IntelliSense: když je v seznamu dokončování vybraná barva, zobrazí se nad kurzorem štítek s touto barvou.
Jazyky
| Jazyk | Co dostane vzorek |
|---|---|
| C#, Visual Basic, F# | hex řetězce, Colors.X / Brushes.X / Color.X, Color.FromArgb / FromRgb s literály, Unity Color / Color32, SkiaSharp, MAUI |
| C / C++ | hex řetězce, RGB(), D2D1::ColorF, QColor, IM_COL32 |
| JavaScript / TypeScript | hex a CSS řetězce, názvy přiřazené do barevných vlastností (fillStyle = 'red'), new THREE.Color(), třídy Tailwind v JSX |
| Python | hex řetězce, matplotlib "tab:blue", QColor(…), názvy jen jako barevné argumenty (color="red", Tkinter bg=) |
| XAML / AXAML | barevné vlastnosti, settery, prostředky <Color>, přechodové štětce, odkazy na prostředky, MAUI AppThemeBinding |
| CSS / SCSS / LESS | jen hodnoty deklarací, proměnné, light-dark(), color-mix(), přechody, var() |
| HTML / Vue / SVG / Razor | atributy style, barevné atributy, bloky <style> a <script>, bloky C# v Razoru, třídy Tailwind |
Výběr barvy
Klikněte na vzorek nebo na Upravit v kartě barvy. Výběr barvy se otevře vedle hodnoty a ukáže, v jakém zápisu ji zapíše zpět (v příkladu Color.FromArgb()).
- Plocha sytosti a jasu, pruhy odstínu a průhlednosti.
- Zadání v HEX, RGB, HSL a OKLCH; řádek pod ním ukazuje přesně to, co se zapíše do kódu.
- Kapátko vezme barvu kdekoli na obrazovce. Lupa ukazuje pixely pod kurzorem; šipky jím posunou o jeden pixel, Shift+šipky o deset.
- Kopírovat jako HEX pro XAML/.NET nebo CSS,
rgb(),hsl(),oklch(),Color.FromArgb, UnityColornebo0xAARRGGBB. - Světlejší a tmavší odstíny aktuální barvy, barvy v tomto souboru, oblíbené (tlačítko s hvězdičkou) a nedávné barvy.
- Kontrast (WCAG) barvy jako textu na pozadí editoru, na bílé nebo na černé, se značkami AA / AAA / Velký.
- Nejbližší pojmenovaná barva (≈ DodgerBlue); kliknutím použijete přesný název.
- Enter potvrdí, Esc zruší; potvrdí i kliknutí mimo výběr barvy. Sekce lze sbalit a výběr barvy si to pamatuje. Tlačítko ? otevře tuto stránku.
Složené barvy a barvy prostředků jsou ve výběru barvy jen pro čtení: upravte barvy uvnitř nich, případně prostředek v místě jeho definice.
Karta barvy
Najeďte myší na barvu a zobrazí se její karta. V režimech podtržení a pozadí má karta i tlačítka: Upravit otevře výběr barvy, Kopírovat zkopíruje hodnotu, Nahradit barvu v řešení… spustí nahrazení v celém řešení. Alt+kliknutí na vzorek zkopíruje hodnotu, aniž by cokoli otevřelo.
light-dark(): obě hodnoty a rozdělený vzorek.
Jak funguje rozpoznávání
ColorSmith neprohledává text jedním velkým regulárním výrazem. Lexer daného jazyka rozdělí každý soubor na řetězce, komentáře a kód a hodnota se stane barvou, jen když místo nenechává žádné pochybnosti. V případě pochybností vzorek nebude.
| Dostane vzorek | Zůstane bez vzorku |
|---|---|
Foreground="Red", color: red; | <p>Red is my favorite color</p> |
"#3D8BFF", // #3D8BFF | // fixed in #123 (krátký hex v komentářích) |
Color.FromArgb(255, 61, 139, 255) | Color.FromArgb(alpha, r, g, b) (hodnota není známa) |
bg-sky-500, text-white/80 | text-lg, border-2, bg-cover |
color="red" v Pythonu | status = "red", (255, 0, 0) |
a { color: navy } | selektory #main, .red, font-family: Red Hat |
8místný hex
#XXXXXXXX znamená v .NET, XAML a Qt alfu na začátku (#AARRGGBB) a v CSS a JavaScriptu alfu na konci (#RRGGBBAA). U řetězců v C#, VB a C++ je pořadí nastavitelné, protože Unity a kód orientovaný na web používají alfu na konci.
Nahrazení v řešení
Otevřete ho žárovkou (Ctrl+.) na barvě nebo tlačítkem v kartě barvy. Najde barvu ve všech zápisech v celé složce řešení (kromě bin, obj a node_modules), nechá vás vybrat místa a každé přepíše v jeho vlastním zápisu. Změněné soubory se otevřou neuložené, s jedním krokem zpět na soubor, takže vše můžete před uložením zkontrolovat.
Nastavení
Nástroje → Možnosti → SmithWorks → ColorSmith. Každá možnost má hned pod sebou popis.
| Možnost | Výchozí |
|---|---|
| Zobrazovat barevné vzorky | zapnuto |
| Režim zobrazení | Podtržení |
| Velikost vzorku | Střední |
| Náhled barvy v IntelliSense | zapnuto |
| Nahrazení v řešení | zapnuto |
| Hex barvy v komentářích | zapnuto |
| Třídy Tailwind CSS | zapnuto |
| Barvy prostředků | zapnuto |
| 8místný hex v C#, VB a C++ | #AARRGGBB |
| Maximální velikost souboru (kB) | 4096 |
| Jazyky | vše zapnuto |
Nastavení se ukládá do %LocalAppData%\ColorSmith spolu s oblíbenými a nedávnými barvami z výběru barvy.
Časté dotazy
Proč u mé barvy není vzorek?
Nejspíš je místo nejednoznačné: název mimo barevný kontext, volání s proměnnou v argumentu, krátký hex v komentáři nebo hodnota sestavená přes var()/calc(). Zkontrolujte také, že je jazyk v nastavení zapnutý a soubor je menší než limit velikosti.
Mohou se barvy zobrazovat jako ikony přímo v seznamu IntelliSense?
Ne. Visual Studio nedovoluje rozšíření měnit ikony položek dokončování od jiných poskytovatelů. ColorSmith místo toho zobrazí nad kurzorem štítek s barvou.
Posouvá vzorek můj kód?
Jen v režimu „čtverec před hodnotou“. Režimy okraj, podtržení a pozadí text nikdy neposouvají.
Můžu upravit barvu prostředku v místě, kde se používá?
Zatím ne. Karta ukazuje hodnotu pro každý motiv i se souborem a řádkem; změňte ji v místě definice.
Odesílá ColorSmith nějaká data?
Ne. Nemá žádnou telemetrii ani přístup k síti.
Kde nahlásit problém nebo navrhnout funkci?
Založte issue v repozitáři Feedback na GitHubu — jsou tam formuláře pro chyby a nápady. Můžete také použít kartu Q&A na Marketplace.
Historie změn
1.0.2
- Zpětná vazba: tlačítko v záhlaví výběru barvy a odkaz „Odeslat zpětnou vazbu“ v nastavení otevřou repozitář Feedback na GitHubu.
- Nastavení se přesunulo do Nástroje → Možnosti → SmithWorks → ColorSmith, vedle ostatních rozšíření SmithWorks.
1.0.1
- Tlačítko Nastavení (ozubené kolo) v záhlaví výběru barvy otevře Nástroje → Možnosti → ColorSmith.
- Jednorázová, snadno odmítnutelná prosba o ohodnocení rozšíření po delším používání a odkaz „Ohodnotit na Marketplace“ v nastavení.
1.0.0
- První veřejné vydání.
- Tlačítko nápovědy ve výběru barvy a odkaz Dokumentace v nastavení.