Colors-LE

Colors-LE：手間いらずのカラー抽出

キーを1回押すだけで、現在のファイルからすべての色を抽出
CSS、SCSS、LESS、Stylus、HTML、JavaScript、TypeScript、SVG

役に立ちましたか？ 開発者に見つけてもらうには、スターや評価が役立ちます — ★ GitHub · ★ Open VSX · ★ Marketplace

できること

ファイルを開いて Colors-LE: Extract Colors を実行すると、ドキュメント内のすべての色が新しいエディターに抽出されます。そこから重複の除去、並べ替え、変換、フィルタリング、分析、検証ができます。VS Code、およびCursorやVSCodiumなどのVS Codeベースのエディターで動作します（Open VSXからインストール可能）。

• パレットの監査 — スタイルシート、マークアップ、コード内のすべてのhex、rgb()/rgba()、hsl()/hsla()、hwb()、lab()/lch()、oklab()/oklch()、color()、名前付きカラー
• デザインシステムのレビュー — 分布を分析し、類似色をクラスタリングして、ほぼ重複した色を見つけます
• アクセシビリティチェック — Validateコマンドを使って、WCAG AA/AAAに基づくコントラスト比を確認します

インストール

AI エージェントから使う

同じエンジンがMCPサーバーとして動作するため、コマンドを実行する代わりに、エージェントから直接呼び出せます。

extract_colors(content, format?, filename?, dedupe?, maxResults?)

表記と1始まりの行番号・列番号を含むすべての色を返します。デフォルトでは500件に制限され、大きなスタイルシートでエージェントのコンテキストウィンドウがあふれないよう、meta.truncatedも返します。

サーバーはコンテンツを受け取ってデータを返します。ファイルの読み取りや、独自のネットワークリクエストは行いません。npmではcolors-le-mcpとして、MCP レジストリではio.github.nolindnaidoo/colors-leとして公開されています。

{
  "mcpServers": {
    "colors-le": {
      "command": "npx",
      "args": ["-y", "colors-le-mcp"]
    }
  }
}

npm install -g colors-le-mcp

{
  "mcpServers": {
    "colors-le": { "command": "colors-le-mcp" }
  }
}

echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | npx -y colors-le-mcp

ドキュメントが拒否されることはありません。 独自のリーダーを持たない言語は生テキストとして読み取られ、どちらの形式で処理されたかは metadata.fileType に示されます。

認識される構文：#rgb、#rgba、#rrggbb、#rrggbbaa、カンマ区切り形式の rgb()／rgba()／hsl()／hsla()、CSS Color 4 の最新構文（/ でアルファ値を指定するスペース区切りの rgb()／hsl()、hwb()、lab()、lch()、oklab()、oklch()、および9つの事前定義済み色空間における color()）、角度単位が deg、rad、grad、turn のもの、および none（関数呼び出しは複数行にまたがる場合があります）、さらに rebeccapurple と transparent を含む CSS の色名。位置は各リテラルの実際の1始まりの行／列です。コメントから色が生成されることはなく、文字列内のコメント記号はコメントの開始として扱われません。

既知の制限事項（文書化済みであり、不具合ではありません）：相対色（rgb(from red r g b)）、色関数内の calc() と var() は読み取られません。sRGB の範囲外の色は変換時にクリップされます。あらゆる JS 文字列内の16進数が一致するため、URL フラグメントも対象になります。: または = のない Stylus の値では、16進数／関数形式のリテラルのみが検出され、色名は検出されません。生テキストのスキャンでは値の区間が行末まで続くため、同じ行に2つのトークンがある場合、色名のほうは検出されません。

フォルダーまたはワークスペース全体を対象にする

Extract は、開いているドキュメントを読み取ります。スキャンでは、ディスク上の多数のファイルを読み取り、プロジェクトのパレットをレポートにまとめます。

• ワークスペース全体：コマンドパレットから Colors-LE: Extract Colors from Workspace を実行します。
• 1 つのフォルダー：エクスプローラーで右クリックして Extract Colors from Folder を選ぶか、Colors-LE: Extract Colors from Folder を実行してフォルダーを選択します。

色は表記にかかわらずそれぞれ 1 回だけ、使用頻度の高い順に一覧表示されます。表記、記述された回数、使用箇所も示されます。

# Colors-LE workspace report

`my-project` · 3 file(s) read · 3 distinct color(s), 7 occurrence(s) in 3 file(s)

| Color | Written as | Occurrences | Files |
|---|---|---|---|
| `#ff0000` | `#FF0000`, `#f00`, `red`, `rgb(255, 0, 0)` | 4 | 2 |
| `#00ff00` | `#00ff00` | 2 | 2 |
| `#0000ff` | `#0000ff` | 1 | 1 |

## `#ff0000` (4)

- `styles/a.css` · **1:12**, **1:30**, **2:12**
- `styles/b.css` · **1:12**

## `#00ff00` (2)

- `styles/a.css` · **2:31**
- `styles/b.css` · **1:43**

## `#0000ff` (1)

- `theme.json` · **2:14**

同じ色は 1 行にまとめられます。 #f00、#FF0000、red、rgb(255, 0, 0) は 4 通りの表記ですが、1 つの色として表にまとめて表示されます。アルファ値が異なる色は別々に扱われます。半透明の赤は、別の色になります。var() のように、単独では sRGB の色ではない値は、記述されたままの値で比較されます。

これは colors-le.showPositions がオンの場合です。デフォルトではオフで、その場合は各行にファイルと色の出現回数が表示されます：styles/a.css (3)。クリップボードにコピーされる内容は、Extract と同様に colors-le.clipboardIncludesPositions に従います。

スキャンで読み取る内容。 ファイルはディスクから読み取られるため、保存されていない編集内容は反映されません。安全上のサイズ上限を超えるファイルや、UTF-8 テキストではないファイルは読み取られません。5,000 ファイルまたは一覧表示された出現箇所が 10,000 件に達すると停止します。レポートの末尾には、読み取られなかった各項目が 1 行ずつ表示されるため、短いレポートをクリーンなプロジェクトと誤解することはありません。

スキップされる内容と変更方法。 3 つのスイッチはデフォルトでオンになっており、設定でそれぞれ個別にオフにできます。

スイッチをオフにせずに結果を調整できるリストが 2 つあります。さらにスキップするには、scanExcludes にパターンを追加します。スイッチによってスキップされるものを読み取るには、scanAlwaysInclude に追加します。

{
	// Also skip the test fixtures.
	"colors-le.workspace.scanExcludes": ["**/fixtures/**"],
	// Read the vendored code, though the built-in list skips it.
	"colors-le.workspace.scanAlwaysInclude": ["**/vendor/**"]
}

Colors-LE: Open Settings を実行すると、これらすべての設定が設定エディターで開きます。

スキャンの動作を決める設定は、設定にあります。

CLI

npm から npm install -g colors-le でインストールする（または npx colors-le で実行する）か、crates.io から cargo install colors-le でインストールして、ターミナルまたは CI のステップで同じ抽出を実行できます。どちらも同じコマンドをインストールし、crate/ に記載されているとおり、出力はバイト単位で完全に一致します。 変換、分析、検証は対話形式で実行され、エディター内で完結します。

colors-le .                              # every colour in the tree; JSON on stdout when piped
colors-le --palette brand.txt .          # what is not in the palette
colors-le --values --dedupe . | sort -u  # write the palette in the first place
colors-le mcp                            # the same extraction over MCP on stdio

npm (colors-le) または crates.io (colors-le) からインストールできます。どちらも同じ colors-le コマンドをインストールします。

npm install -g colors-le   # or run it once: npx colors-le
cargo install colors-le

終了コード：0 は問題なし、1 は該当なし、またはパレット外の色、2 は質問の形式が不正です。

表記ではなく色で照合します。 16進数で記述されたパレットでも、rgb() で記述された違反を検出できます。#FFF、#ffffff、rgb(255, 255, 255) は同じ項目だからです。アルファ値は識別情報の一部であり、名前付きの色は同じ名前の色とのみ一致します。white と #ffffff は同じピクセルですが、同じ判定ではありません。

コマンド

デフォルトでは、どのコマンドにもキーは割り当てられていません。エディターの Keyboard Shortcuts で、任意のコマンドにキーを割り当てられます。

設定

言語

英語以外に 12 言語に対応しています。

ドイツ語 · スペイン語 · フランス語 · インドネシア語 · イタリア語 · 日本語 · 韓国語 · ポルトガル語（ブラジル） · ロシア語 · ウクライナ語 · ベトナム語 · 中国語（簡体字）

両方の部分に対応しています。マニフェスト（コマンドタイトル、設定名、説明）と、拡張機能の実行中に表示されるすべてのもの（通知、ステータスバー、クイックピック、プロンプト）です。拡張機能は VS Code の表示言語に従うため、エディターで現在設定されている言語と一致します。独自の設定はありません。

プライバシーとセキュリティ

• ネットワークアクセスはありません。 拡張機能がデータを外部に送信することはありません。telemetryEnabled 設定は、確認できるローカルの出力チャンネル（Colors-LE Telemetry）にイベントを書き込むだけです。
• MCP サーバーも同じ方針です。 コンテンツを引数として受け取り、データを返します。ファイルシステムへのアクセス、ネットワーク呼び出し、テレメトリーはありません。エージェントにはすでにファイル読み取りツールがあるため、サーバー内で重複して実装しても機能は増えず、パストラバーサルの攻撃対象領域が広がるだけです。サーバーがどちらかにアクセスできるものをインポートした場合、check:mcp-bundle によってビルドが失敗します。
• エラー通知では、ホームディレクトリと認証情報の形式に似た断片が伏せられます。
• 評価プロンプトは最大 2 回だけ表示されます。 3 回目の正常な使用時に、評価するかどうかを一度尋ねます。Later を選択するか、プロンプトを閉じた場合は、20 回目にもう一度だけ尋ねます。Don't Ask Again を選ぶと、以降は表示されません。notificationsLevel を自分で important または silent に設定すると、評価プロンプトは無効になります。使用回数は VS Code の拡張機能ストレージに保存され、外部に送信されることはありません。Rate を選ぶと、ブラウザーでインストール元の一覧（VS Code Marketplace または Open VSX）が開きます。

ドキュメント

パフォーマンス

Apple M5 Pro、RAM 24 GB、Node 24.3.0 でウォームアップ後に7回実行した中央値です。入力はチェックインされているのではなく、scripts/benchmark.ts によって生成されるため、上記のサイズは実測値そのものです。bun run benchmark で再現できます。

これらの値はマシン固有であり、CI では保証されません — ビルドのゲートとなるベンチマークで分かるのは、ランナーがどれほど忙しかったかだけです。

テスト

36ファイルにわたる501件のテストケースに加えて、実際の VS Code 拡張機能ホストで実行される統合テストスイートと、ビルド済みの .vsix をクリーンなプロファイルにインストールするエンドツーエンドテストがあります。

実際の実行結果 — coverage/coverage-summary.json と coverage/test-results.json — から scripts/coverage-readme.js によって生成されます。このセクションにずれがあると CI は失敗します。bun run test:coverage で再現でき、ケース数は vitest が出力する値です。

LE ファミリーのその他のツール

あらゆるモデルが直面する作業に対応する、単機能ツールが16個あります。それぞれに Rust CLI と MCP サーバーが付属します。詳細はこちら：letools.dev

取り出す

• String-LE — コードベース内のすべての文字列を抽出し、人が読めるようにします
• Numbers-LE — コードベース内のすべてのハードコードされた数値を抽出し、人が確認できるようにします
• Units-LE — 単位付きの数量をすべて抽出して正規化し、曖昧なものは名前を示して対象外にします
• Dates-LE — すべての日付とタイムスタンプ、およびそれぞれが解決される正確な時点を抽出します
• IDs-LE — UUID、ULID、NanoID、ObjectId、Snowflakeをすべて抽出し、内部に含まれる時刻をデコードします
• IPs-LE — IPアドレス、CIDRブロック、MACアドレスをすべて抽出し、正規化してスコープ別に分類します
• URLs-LE — コードベース内のすべてのURLを、プロトコルと正確な位置情報とともに抽出します
• Paths-LE — コードベース内のすべてのファイルパスを抽出し、現在も何かを指しているかどうかを示します
• Colors-LE — コードベース内のすべての色を抽出し、パレットにない色を示します

チェックする

• Regex-LE — コードベース内のすべての正規表現を検出し、壊滅的なバックトラッキングを引き起こす可能性があるものを報告します
• Versions-LE — リポジトリ内のマニフェスト間で、同じ依存関係のバージョン制約が異なる箇所を検出します
• i18n-LE — プロジェクトで使用している i18n ライブラリを特定し、そのライブラリのルールに基づいてカタログを監査します
• Scrape-LE — スクレイパーを書く前にページをスクレイピングできるか確認し、判定できない場合はその旨を示します

保護する

• Secrets-LE — コードベース内のハードコードされた認証情報を検出し、レポートに表示することはありません
• EnvSync-LE — ディレクトリツリー内の dotenv ファイルを比較し、どのファイルにどのキーがないかを示します
• Unicode-LE — 意味を隠す Unicode を検出します。双方向制御文字、不可視文字、ホモグリフ、混在スクリプトが対象です

それぞれが独立しています。共有クレートも、公開されたコアもありません。2つのツールが同じ答えにたどり着くとすれば、それはその答えが2度正しかったからです。

お問い合わせ — nolindnaidoo.com · GitHub · LinkedIn

nolindnaidoo によるその他のプロジェクト

Rust — pixelcoords と pixelactions は一連のループを構成します。pixelcoords が 場所 に答え、pixelactions がそこで 操作 します。それぞれ独自のツールと独自の方針を持ち、LE ファミリーには属しません。

• pixelcoords — 画面を固定し、領域を指定して、ピクセル単位で正確な座標と切り抜きを取得します pixelcoords.dev · crates.io · docs.rs
• pixelactions — 人が検証した座標を受け取り、操作を実行して、反映されたことを確認します pixelactions.dev · crates.io · docs.rs

ライセンス

MIT © nolindnaidoo