Color Tracr

Highly performant, ultra-lightweight color marking extension for the editor.

This VS Code extension provides color marking for various formats, including CSS variables, Tailwind classes, and wide-gamut colors.
It is built to be fast, lightweight, and resource-efficient, featuring a fully bundled, hyper-optimized architecture, so your editor never slows down.

🎨 To get a better feeling of how the markers look on your code, continue at the previews.

Installation 📦

Search for Color Tracr in the VS Code extensions panel, or install via the command line:

ext install xulbux.color-tracr

Features ⚡

Feature	Description
Standard Colors	HEX, RGB, HSL, HWB, HSV, CMYK, OKLCH, LCH, OKLAB, LAB
Color Spaces	`color(display-p3 …)`, `color(srgb-linear …)`, `a98-rgb`, `rec2020`, `xyz`, etc.
Apple / Swift	`UIColor(red: …)`, `Color(red: …)`
Raw Number Matching	Detects raw CSS channels (e.g., `255, 0, 0` or `60% 0.15 25`) to support opacity modifiers in frameworks like Tailwind CSS.
Named Colors	Standard CSS color keywords (e.g., `red`, `transparent`, …)
Tailwind CSS	Classes like `text-slate-900`, `border-white/20`, `bg-rose-500`, …
Variable Tracing	Cross-file detection and marking of CSS variables (e.g., `var(--primary-color)`)

Configuration ⚙️

Color Tracr is highly customizable. You can adjust the following options in your settings.json (user or workspace):

Setting	Type	Default	Description
`colorTracr.enable`	`array`	`["*"]`	Language IDs where Color Tracr marks colors. Prepend `!` to exclude.
`colorTracr.markerType`	`string`	`"highlight"`	Choose how colors are marked: `"highlight"`, `"dot-before"`, or `"dot-after"`.
`colorTracr.showAlpha`	`boolean`	`true`	Render each marker using the color's parsed transparency.
`colorTracr.markNamedColors`	`boolean`	`true`	Mark standard CSS named colors (like `red`, `tomato`).
`colorTracr.markTailwind`	`array`	`["*"]`	Mark Tailwind CSS utility classes (e.g., `bg-red-400`).
`colorTracr.markVariables`	`array`	`["*"]`	Mark cross-file CSS/SCSS/LESS variables (`var(--name)`).
`colorTracr.useARGB`	`array`	`[]`	Language IDs to parse 4/8-digit hex codes as ARGB instead of RGBA.

(For advanced settings like matching raw RGB/HSL values without functions, check the extension settings inside VS Code!)

Extension Previews ✨

CSS

TypeScript

React

Troubleshooting 🛠️

If Color Tracr isn't marking colors the way you expect (or isn't working at all), check its log output:

Open the Output panel (menu View → Output, or Ctrl(⌘)+Shift+U).
Select Color Tracr from the dropdown in the top-right of the panel. *

Any errors or warnings (e.g., a Tailwind config that failed to load) are reported there.

* If Color Tracr does not appear in the dropdown, that means nothing went wrong;
The channel is only created when there is an error or warning to report.

Enjoying this extension? Have suggestions?

Please consider leaving a review on the Visual Studio Marketplace or giving a ⭐ on GitHub.

Acknowledgments 🤝

This extension was heavily inspired by the excellent color-highlight extension by Sergii Naumov.
Color Tracr aims to build upon that concept with modern web format support and a high-performance, minimal-footprint architecture.

✨ Always creating more cool stuff for you! ✨ —⠀XulbuX