ColorSmith
Próbki kolorów i pełnoprawny selektor kolorów w edytorze Visual Studio. Próbka pojawia się tylko tam, gdzie kod naprawdę definiuje kolor — nigdy przy słowie „red” w tekście strony ani przy #123 w komentarzu.
Za darmo · Visual Studio 2022 i 2026 · 14 języków interfejsu · bez telemetrii
Po co kolejne rozszerzenie do kolorów
Inteligentne wykrywanie
Każdy język ma własny lekser, który odróżnia ciągi, komentarze i kod. Nazwa koloru dostaje próbkę tylko w kontekście koloru (Foreground="Red", color: red), a nie w zwykłym tekście.
Selektor, który warto otworzyć
HEX, RGB, HSL i OKLCH, pipeta z lupą, jaśniejsze i ciemniejsze odcienie, kolory z pliku, ulubione, kontrast WCAG. Wynik trafia z powrotem do kodu w zapisie, którego kod już używa.
Za darmo, bez haczyków
Bez subskrypcji, wersji próbnej, natrętnych okienek i telemetrii. Ustawienia zostają na Twoim komputerze.
Mówi Twoim językiem
Angielski, czeski, niemiecki, hiszpański, francuski, włoski, japoński, koreański, polski, portugalski (Brazylia), rosyjski, turecki, chiński (uproszczony i tradycyjny). Dopasowuje się do języka Visual Studio.
Funkcje
- Próbki w edytorze dla kolorów hex, funkcji CSS (
rgb(),hsl(),hwb(),oklch(),oklab()), nazwanych kolorów, składowych .NET (Colors.Red,Brushes.Teal,SKColors.Gold) oraz wywołań z argumentami literałowymi (Color.FromArgb(255, 61, 139, 255),new Color32(…),QColor(…),RGB(…)). - Cztery tryby wyświetlania: kwadrat przed wartością, kwadrat na marginesie, podkreślenie (domyślnie) lub tło samej wartości. Tylko pierwszy z nich przesuwa tekst.
- Kliknij próbkę, aby otworzyć selektor; edycja zastępuje wartość w miejscu i zachowuje jej zapis.
- Karta koloru po wskazaniu myszą: wartości w kilku przestrzeniach barw, najbliższy nazwany kolor i kontrast na białym i czarnym.
- Wartości złożone: CSS
light-dark()(podzielona próbka),color-mix()(wyliczony wynik), gradienty CSS i pędzle gradientowe XAML. - Zasoby:
{StaticResource AccentBrush},{DynamicResource …},{ThemeResource …}ivar(--accent)są rozwiązywane na podstawie plików XAML i CSS rozwiązania; wartości dla jasnego i ciemnego motywu dają podzieloną próbkę. - Klasy kolorów Tailwind CSS:
bg-sky-500,hover:text-white/80,bg-[#1da1f2]. - Zamiana w rozwiązaniu: zmień jeden kolor wszędzie, w każdym miejscu w jego własnym zapisie, opcjonalnie z wyszukiwaniem „podobnych odcieni”.
- Podgląd koloru w IntelliSense: gdy na liście uzupełniania zaznaczony jest kolor, nad kursorem pojawia się znacznik z tym kolorem.
Języki
| Język | Co dostaje próbkę |
|---|---|
| C#, Visual Basic, F# | ciągi hex, Colors.X / Brushes.X / Color.X, Color.FromArgb / FromRgb z literałami, Unity Color / Color32, SkiaSharp, MAUI |
| C / C++ | ciągi hex, RGB(), D2D1::ColorF, QColor, IM_COL32 |
| JavaScript / TypeScript | ciągi hex i CSS, nazwy przypisywane do właściwości kolorów (fillStyle = 'red'), new THREE.Color(), klasy Tailwind w JSX |
| Python | ciągi hex, matplotlib "tab:blue", QColor(…), nazwy tylko jako argumenty kolorów (color="red", Tkinter bg=) |
| XAML / AXAML | właściwości kolorów, settery, zasoby <Color>, pędzle gradientowe, odwołania do zasobów, MAUI AppThemeBinding |
| CSS / SCSS / LESS | tylko wartości deklaracji, zmienne, light-dark(), color-mix(), gradienty, var() |
| HTML / Vue / SVG / Razor | atrybuty style, atrybuty kolorów, bloki <style> i <script>, bloki C# w Razor, klasy Tailwind |
Selektor kolorów
Kliknij próbkę albo Edytuj w karcie koloru. Selektor otwiera się obok wartości i pokazuje, w jakim zapisie ją zapisze (w przykładzie Color.FromArgb()).
- Pole nasycenia i jasności, paski odcienia i przezroczystości.
- Wprowadzanie w formatach HEX, RGB, HSL i OKLCH; wiersz poniżej pokazuje dokładnie to, co zostanie zapisane w kodzie.
- Pipeta pobiera kolor z dowolnego miejsca na ekranie. Lupa pokazuje piksele pod kursorem; strzałki przesuwają go o jeden piksel, Shift+strzałki o dziesięć.
- Kopiuj jako HEX dla XAML/.NET lub CSS,
rgb(),hsl(),oklch(),Color.FromArgb, UnityColorlub0xAARRGGBB. - Jaśniejsze i ciemniejsze odcienie bieżącego koloru, kolory w tym pliku, ulubione (przycisk z gwiazdką) i ostatnio użyte kolory.
- Kontrast (WCAG) koloru jako tekstu na tle edytora, na białym lub czarnym, z oznaczeniami AA / AAA / Duży.
- Najbliższy nazwany kolor (≈ DodgerBlue); kliknij go, aby użyć dokładnej nazwy.
- Enter zatwierdza, Esc anuluje; kliknięcie poza selektorem również zatwierdza. Sekcje można zwijać, a selektor to zapamiętuje. Przycisk ? otwiera tę stronę.
Kolory złożone i kolory zasobów są w selektorze tylko do odczytu: edytuj kolory, z których się składają, lub zasób w miejscu jego definicji.
Karta koloru
Wskaż kolor myszą, aby zobaczyć jego kartę. W trybach podkreślenia i tła karta ma też przyciski: Edytuj otwiera selektor, Kopiuj kopiuje wartość, Zamień kolor w rozwiązaniu… uruchamia zamianę w całym rozwiązaniu. Alt+kliknięcie próbki kopiuje wartość bez otwierania czegokolwiek.
light-dark(): obie wartości i podzielona próbka.
Jak działa wykrywanie
ColorSmith nie przeszukuje tekstu jednym wielkim wyrażeniem regularnym. Lekser danego języka dzieli każdy plik na ciągi, komentarze i kod, a wartość staje się kolorem tylko wtedy, gdy miejsce nie pozostawia wątpliwości. W razie wątpliwości próbki nie ma.
| Dostaje próbkę | Zostaje bez próbki |
|---|---|
Foreground="Red", color: red; | <p>Red is my favorite color</p> |
"#3D8BFF", // #3D8BFF | // fixed in #123 (krótki hex w komentarzach) |
Color.FromArgb(255, 61, 139, 255) | Color.FromArgb(alpha, r, g, b) (wartość nieznana) |
bg-sky-500, text-white/80 | text-lg, border-2, bg-cover |
color="red" w Pythonie | status = "red", (255, 0, 0) |
a { color: navy } | selektory #main, .red, font-family: Red Hat |
8-cyfrowy hex
#XXXXXXXX oznacza alfę na początku w .NET, XAML i Qt (#AARRGGBB) oraz alfę na końcu w CSS i JavaScript (#RRGGBBAA). Dla ciągów w C#, VB i C++ kolejność ustawia się w opcjach, bo Unity i kod webowy używają alfy na końcu.
Zamiana w rozwiązaniu
Otwórz ją żarówką (Ctrl+.) na kolorze lub przyciskiem w karcie koloru. Znajduje kolor we wszystkich zapisach w całym folderze rozwiązania (bez bin, obj i node_modules), pozwala wybrać miejsca i przepisuje każde w jego własnym zapisie. Zmienione pliki pozostają otwarte bez zapisu, z jednym krokiem cofania na plik, więc przed zapisaniem możesz wszystko przejrzeć.
Ustawienia
Narzędzia → Opcje → SmithWorks → ColorSmith. Każda opcja ma opis tuż pod sobą.
| Opcja | Domyślnie |
|---|---|
| Pokazuj próbki kolorów | wł. |
| Tryb wyświetlania | Podkreślenie |
| Rozmiar próbki | Średni |
| Podgląd koloru w IntelliSense | wł. |
| Zamiana w rozwiązaniu | wł. |
| Kolory hex w komentarzach | wł. |
| Klasy Tailwind CSS | wł. |
| Kolory zasobów | wł. |
| 8-cyfrowy hex w C#, VB i C++ | #AARRGGBB |
| Maksymalny rozmiar pliku (KB) | 4096 |
| Języki | wszystkie wł. |
Ustawienia są przechowywane w %LocalAppData%\ColorSmith razem z ulubionymi i ostatnio użytymi kolorami selektora.
FAQ
Dlaczego przy moim kolorze nie ma próbki?
Najpewniej miejsce jest niejednoznaczne: nazwa poza kontekstem koloru, wywołanie ze zmienną w argumencie, krótki hex w komentarzu lub wartość zbudowana z var()/calc(). Sprawdź też, czy język jest włączony w ustawieniach i czy plik mieści się w limicie rozmiaru.
Czy kolory mogą się pojawiać jako ikony na liście IntelliSense?
Nie. Visual Studio nie pozwala rozszerzeniu zmieniać ikon elementów uzupełniania pochodzących od innych dostawców. Zamiast tego ColorSmith pokazuje znacznik koloru nad kursorem.
Czy próbka przesuwa mój kod?
Tylko w trybie „kwadrat przed wartością”. Tryby margines, podkreślenie i tło nigdy nie przesuwają tekstu.
Czy mogę edytować kolor zasobu w miejscu jego użycia?
Jeszcze nie. Karta pokazuje wartość dla każdego motywu wraz z plikiem i wierszem; zmień ją w miejscu definicji.
Czy ColorSmith wysyła jakieś dane?
Nie. Nie ma telemetrii ani dostępu do sieci.
Gdzie zgłosić problem lub zaproponować funkcję?
Utwórz zgłoszenie w repozytorium Feedback w serwisie GitHub — są tam formularze dla błędów i pomysłów. Możesz też skorzystać z karty Q&A w Marketplace.
Historia zmian
1.0.2
- Opinie: przycisk na pasku tytułu selektora i link „Wyślij opinię” w ustawieniach otwierają repozytorium Feedback w serwisie GitHub.
- Ustawienia przeniesiono do Narzędzia → Opcje → SmithWorks → ColorSmith, obok innych rozszerzeń SmithWorks.
1.0.1
- Przycisk Ustawienia (koło zębate) na pasku tytułu selektora otwiera Narzędzia → Opcje → ColorSmith.
- Jednorazowa, łatwa do zamknięcia prośba o ocenę rozszerzenia po dłuższym używaniu oraz link „Oceń w Marketplace” w ustawieniach.
1.0.0
- Pierwsze publiczne wydanie.
- Przycisk pomocy w selektorze i link Dokumentacja w ustawieniach.