ColorSmith
Visual Studio エディター用の色見本と本格的なカラー ピッカー。色見本はコードが実際に色を定義している場所にだけ表示され、ページ本文の「red」という単語やコメント内の #123 に付くことはありません。
無料 · Visual Studio 2022 と 2026 · UI は 14 言語 · テレメトリなし
なぜ新しいカラー拡張機能なのか
スマートな検出
言語ごとに専用の字句解析器があり、文字列・コメント・コードを区別します。色名に色見本が付くのは色のコンテキスト (Foreground="Red"、color: red) の中だけで、普通のテキストには付きません。
開く価値のあるピッカー
HEX、RGB、HSL、OKLCH、ルーペ付きのスポイト、明るい色と暗い色、ファイル内の色、お気に入り、WCAG コントラスト。結果はコードで使われている表記のまま書き戻されます。
無料、条件なし
サブスクリプションも試用期間も催促画面もテレメトリもありません。設定はお使いのマシンに保存されます。
あなたの言語で
英語、チェコ語、ドイツ語、スペイン語、フランス語、イタリア語、日本語、韓国語、ポーランド語、ポルトガル語 (ブラジル)、ロシア語、トルコ語、中国語 (簡体字・繁体字)。Visual Studio の言語に従います。
機能
- エディター内の色見本: 16 進カラー、CSS 関数 (
rgb()、hsl()、hwb()、oklch()、oklab())、名前付きの色、.NET メンバー (Colors.Red、Brushes.Teal、SKColors.Gold)、リテラル引数の呼び出し (Color.FromArgb(255, 61, 139, 255)、new Color32(…)、QColor(…)、RGB(…)) に対応します。 - 4 つの表示モード: 値の前の四角、余白の四角、下線 (既定)、値の背景。テキストが動くのは最初のモードだけです。
- 色見本をクリックするとピッカーが開きます。値はその場で、元の表記のまま置き換えられます。
- カラー カード: ポインターを合わせると、複数の色空間での値、最も近い名前付きの色、白と黒に対するコントラストが表示されます。
- 複合値: 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]。 - ソリューション内で置換: 1 つの色をすべての場所で、それぞれの表記のまま変更します。「似た色合い」も検索できます。
- IntelliSense での色のプレビュー: 入力候補一覧で色が選択されている間、その色のチップがカーソルの上に表示されます。
言語
| 言語 | 色見本が付くもの |
|---|---|
| C#, Visual Basic, F# | 16 進文字列、Colors.X / Brushes.X / Color.X、リテラル引数の Color.FromArgb / FromRgb、Unity の Color / Color32、SkiaSharp、MAUI |
| C / C++ | 16 進文字列、RGB()、D2D1::ColorF、QColor、IM_COL32 |
| JavaScript / TypeScript | 16 進と CSS の文字列、色のプロパティに代入された名前 (fillStyle = 'red')、new THREE.Color()、JSX 内の Tailwind クラス |
| Python | 16 進文字列、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> ブロック、Razor の C# ブロック、Tailwind クラス |
カラー ピッカー
色見本をクリックするか、カラー カードの 編集 をクリックします。ピッカーは値の横に開き、どの表記で書き戻すか (この例では Color.FromArgb()) を表示します。
- 彩度/明度のエリアと、色相・不透明度のバー。
- HEX、RGB、HSL、OKLCH で入力できます。その下の行には、コードに書き込まれる内容がそのまま表示されます。
- スポイトで画面上のどこからでも色を取得できます。ルーペにカーソル下のピクセルが表示され、方向キーで 1 ピクセル、Shift+方向キーで 10 ピクセル移動します。
- 形式を指定してコピー: XAML/.NET または CSS 用の HEX、
rgb()、hsl()、oklch()、Color.FromArgb、Unity のColor、0xAARRGGBB。 - 現在の色の明るい色と暗い色、このファイル内の色、お気に入り (星ボタン)、最近使用した色。
- コントラスト (WCAG): エディター背景、白、黒の上にテキストとして置いたときのコントラストを、AA / AAA / 大きい文字 の判定付きで表示します。
- 最も近い名前付きの色 (≈ DodgerBlue)。クリックすると正確な名前を使用します。
- Enter で適用、Esc でキャンセル。ピッカーの外側をクリックしても適用されます。セクションは折りたたむことができ、その状態は記憶されます。? ボタンでこのページが開きます。
複合値とリソースの色はピッカーでは読み取り専用です。内部の色を編集するか、リソースを定義箇所で編集してください。
カラー カード
色にポインターを合わせるとカードが表示されます。下線モードと背景モードでは、カードにボタンも表示されます。編集 はピッカーを開き、コピー は値をコピーし、ソリューション内の色を置換… はソリューション全体の置換を開始します。色見本を Alt+クリックすると、何も開かずに値をコピーします。
light-dark(): 両方の値と分割された色見本。
検出のしくみ
ColorSmith は 1 つの大きな正規表現でテキストを検索するわけではありません。各ファイルはその言語の字句解析器によって文字列、コメント、コードに分けられ、場所から色であることが明らかな場合にだけ値を色として扱います。疑わしい場合、色見本は表示されません。
| 色見本あり | 色見本なし |
|---|---|
Foreground="Red", color: red; | <p>Red is my favorite color</p> |
"#3D8BFF", // #3D8BFF | // fixed in #123 (コメント内の短い 16 進) |
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 桁の 16 進
#XXXXXXXX は、.NET、XAML、Qt ではアルファが先頭 (#AARRGGBB)、CSS と JavaScript ではアルファが末尾 (#RRGGBBAA) です。Unity や Web 向けのコードはアルファを末尾に置くため、C#、VB、C++ の文字列での順序は設定で指定します。
ソリューション内で置換
色の上で電球 (Ctrl+.) を使うか、カラー カードのボタンから開きます。ソリューション フォルダー全体 (bin、obj、node_modules を除く) から、あらゆる表記のその色を探します。置換する箇所を選ぶと、各箇所が元の表記のまま書き換えられます。変更されたファイルは保存されずに開かれ、ファイルごとに 1 回の操作で元に戻せるので、保存前にすべてを確認できます。
設定
ツール → オプション → SmithWorks → ColorSmith。各オプションのすぐ下に説明があります。
| オプション | 既定値 |
|---|---|
| 色見本を表示 | オン |
| 表示モード | 下線 |
| 色見本のサイズ | 中 |
| IntelliSense での色のプレビュー | オン |
| ソリューション内で置換 | オン |
| コメント内の 16 進カラー | オン |
| Tailwind CSS クラス | オン |
| リソースの色 | オン |
| C#、VB、C++ の 8 桁 16 進 | #AARRGGBB |
| 最大ファイル サイズ (KB) | 4096 |
| 言語 | すべてオン |
設定は、ピッカーのお気に入りや最近使用した色とともに %LocalAppData%\ColorSmith に保存されます。
よくある質問
色に色見本が表示されないのはなぜですか？
多くの場合、その場所があいまいなためです。色のコンテキスト外の名前、変数を引数にした呼び出し、コメント内の短い 16 進、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
- 最初の公開リリース。
- ピッカーにヘルプ ボタン、設定に「ドキュメント」リンクを追加。