Hex TS

Colour swatches and a colour picker for hex colours in TypeScript — the same thing VS Code already does for CSS, now for .ts and .tsx.

What it does

Puts a colour swatch beside every hex colour in a string, template literal or comment: #RGB, #RGBA, #RRGGBB, #RRGGBBAA.
Click the swatch to open VS Code's built-in colour picker. Pick a colour and the literal is rewritten in place.
Rewrites keep the shape you wrote: #f80 stays short while it still can, #FF8800 stays long and upper case, and alpha appears only when it drops below 1.
Leaves alone what merely looks like a colour — private class fields (this.#abc), regex bodies (/#[0-9a-f]{6}/), numbers (0xff0000).

No configuration, no runtime dependencies, nothing to turn on.

VS Code — search for Hex TS in the Extensions view, or install from the Marketplace.
VSCodium, Cursor, Windsurf, Theia — Open VSX.

To install a build directly, download the .vsix from the releases page and run:

code --install-extension hex-ts-<version>.vsix

VS Code draws the swatches, so two of its own settings govern them:

Setting	Default	Effect
`editor.colorDecorators`	`true`	Draws swatches at all. No swatches anywhere? Check this first.
`editor.colorDecoratorsLimit`	`500`	How many are drawn per file.

Files over 2 MB are skipped deliberately.

JSX text counts as code, so <Text>#ff0000</Text> gets no swatch. Colours in JSX attributes (color="#ff0000") do.
Hex only. rgb() and hsl() would each need their own parsing and formatting.

MIT licensed.