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.
Install
- 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
Verify a download
Every release's .vsix carries a GitHub artifact
attestation
proving it was built by this repository's Release workflow from the tagged
source, not tampered with in transit. Verify one with the GitHub
CLI:
gh attestation verify hex-ts-<version>.vsix --repo Dillan-03/vscode-hex-ts
Or compare its checksum against the SHA-256 printed in that version's
release notes:
shasum -a 256 hex-ts-<version>.vsix
Settings
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.
Known limits
- 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.
Links
MIT licensed.
