ColorSmith
Образцы цвета и полноценный выбор цвета в редакторе Visual Studio. Образец появляется только там, где код действительно задаёт цвет, — и никогда у слова «red» в тексте страницы или у #123 в комментарии.
Бесплатно · Visual Studio 2022 и 2026 · 14 языков интерфейса · без телеметрии
Зачем ещё одно расширение для цветов
Умное распознавание
У каждого языка свой лексер, который отличает строки, комментарии и код. Имя цвета получает образец только в цветовом контексте (Foreground="Red", color: red), а не в обычном тексте.
Выбор цвета, который хочется открывать
HEX, RGB, HSL и OKLCH, пипетка с лупой, светлые и тёмные оттенки, цвета из файла, избранное, контраст по WCAG. Результат записывается обратно в той записи, которую уже использует код.
Бесплатно и без подвохов
Без подписки, пробного периода, назойливых окон и телеметрии. Настройки хранятся только на вашем компьютере.
Говорит на вашем языке
Английский, чешский, немецкий, испанский, французский, итальянский, японский, корейский, польский, португальский (Бразилия), русский, турецкий, китайский (упрощённый и традиционный). Язык берётся из Visual Studio.
Возможности
- Образцы в редакторе для hex-цветов, 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# | hex-строки, Colors.X / Brushes.X / Color.X, Color.FromArgb / FromRgb с литералами, Unity Color / Color32, SkiaSharp, MAUI |
| C / C++ | hex-строки, RGB(), D2D1::ColorF, QColor, IM_COL32 |
| JavaScript / TypeScript | hex- и CSS-строки, имена, присвоенные цветовым свойствам (fillStyle = 'red'), new THREE.Color(), классы Tailwind в JSX |
| Python | hex-строки, matplotlib "tab:blue", QColor(…), имена только в цветовых аргументах (color="red", Tkinter bg=) |
| XAML / AXAML | цветовые свойства, сеттеры, ресурсы <Color>, градиентные кисти, ссылки на ресурсы, MAUI AppThemeBinding |
| CSS / SCSS / LESS | только значения объявлений, переменные, light-dark(), color-mix(), градиенты, var() |
| HTML / Vue / SVG / Razor | атрибуты style, цветовые атрибуты, блоки <style> и <script>, блоки C# в Razor, классы Tailwind |
Выбор цвета
Щёлкните по образцу или нажмите Изменить в карточке цвета. Окно выбора цвета открывается рядом со значением и показывает, в какой записи оно будет записано обратно (в примере — Color.FromArgb()).
- Поле насыщенности и яркости, полосы оттенка и прозрачности.
- Ввод в HEX, RGB, HSL и OKLCH; строка ниже показывает ровно то, что будет записано в код.
- Пипетка берёт цвет в любом месте экрана. Лупа показывает пиксели под курсором; стрелки сдвигают его на один пиксель, Shift+стрелки — на десять.
- Копировать как HEX для XAML/.NET или CSS,
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 (короткий hex в комментариях) |
Color.FromArgb(255, 61, 139, 255) | Color.FromArgb(alpha, r, g, b) (значение неизвестно) |
bg-sky-500, text-white/80 | text-lg, border-2, bg-cover |
color="red" в Python | status = "red", (255, 0, 0) |
a { color: navy } | селекторы #main, .red, font-family: Red Hat |
8-значный hex
#XXXXXXXX в .NET, XAML и Qt означает альфу в начале (#AARRGGBB), а в CSS и JavaScript — альфу в конце (#RRGGBBAA). Для строк в C#, VB и C++ порядок задаётся в настройках, потому что Unity и веб-ориентированный код ставят альфу в конец.
Замена в решении
Открывается лампочкой (Ctrl+.) на цвете или кнопкой в карточке цвета. Находит цвет во всех записях по всей папке решения (кроме bin, obj и node_modules), даёт выбрать места и переписывает каждое в его собственной записи. Изменённые файлы открываются несохранёнными, с одним шагом отмены на файл, так что всё можно проверить до сохранения.
Настройки
Средства → Параметры → SmithWorks → ColorSmith. Под каждым параметром есть описание.
| Параметр | По умолчанию |
|---|---|
| Показывать образцы цвета | вкл. |
| Способ отображения | Подчёркивание |
| Размер образца | Средний |
| Цвет в IntelliSense | вкл. |
| Замена в решении | вкл. |
| Hex-цвета в комментариях | вкл. |
| Классы Tailwind CSS | вкл. |
| Цвета ресурсов | вкл. |
| 8-значный hex в C#, VB и C++ | #AARRGGBB |
| Максимальный размер файла (КБ) | 4096 |
| Языки | все вкл. |
Настройки хранятся в %LocalAppData%\ColorSmith вместе с избранными и недавними цветами окна выбора цвета.
Вопросы и ответы
Почему у моего цвета нет образца?
Скорее всего, место неоднозначно: имя вне цветового контекста, вызов с переменной в аргументе, короткий hex в комментарии или значение, собранное через var()/calc(). Проверьте также, что язык включён в настройках, а файл меньше ограничения по размеру.
Можно ли показывать цвета значками прямо в списке IntelliSense?
Нет. Visual Studio не даёт расширению менять значки элементов автодополнения от других поставщиков. Вместо этого ColorSmith показывает плашку с цветом над курсором.
Сдвигает ли образец мой код?
Только в режиме «квадрат перед значением». Режимы «на полях», «подчёркивание» и «фон» текст не сдвигают.
Можно ли изменить цвет ресурса там, где он используется?
Пока нет. Карточка показывает значение для каждой темы с файлом и строкой; меняйте его там, где ресурс определён.
Отправляет ли ColorSmith какие-нибудь данные?
Нет. Телеметрии нет, доступа к сети тоже.
Где сообщить о проблеме или предложить идею?
Создайте issue в репозитории Feedback на GitHub — там есть формы для ошибок и идей. Также можно воспользоваться вкладкой Q&A на Marketplace.
История изменений
1.0.2
- Обратная связь: кнопка в заголовке окна выбора цвета и ссылка «Обратная связь» в настройках открывают репозиторий Feedback на GitHub.
- Настройки переехали в Средства → Параметры → SmithWorks → ColorSmith, рядом с другими расширениями SmithWorks.
1.0.1
- Кнопка настроек (шестерёнка) в заголовке окна выбора цвета открывает Средства → Параметры → ColorSmith.
- Однократная, легко скрываемая просьба оценить расширение после долгого использования и ссылка «Оценить на Marketplace» в настройках.
1.0.0
- Первый публичный выпуск.
- Кнопка справки в окне выбора цвета и ссылка «Документация» в настройках.