English · 简体中文
Highlight, inspect, pick and convert CSS colors in any source file, from hex to oklch(), color-mix() and HDR.
It does what Color Highlight, Color Info and Change Color Format do separately, in one extension that reads CSS Color 3, 4 and 5 plus the CSS Color 6 and HDR drafts in every language. VS Code's built-in swatches recognize classic forms such as hex, rgb() and hsl(), but color(display-p3 …), color-mix(), relative colors and design tokens behind var(--brand) get no swatch. Highlighting, hover, the native picker and conversion share one color engine, so all four agree on the range, the value and whether it can be resolved at all.
Get started
Three steps take you from installing to converting your first color; you need VS Code 1.101 or newer.
- Install from the VS Code Marketplace.
- Open any file with colors in it and hover one: you get a preview, the original text and the value in every enabled format.
- Put the cursor in a color and run W3C Color Toolkit: Convert Color from the Command Palette to rewrite it in another format.
See every color, not just hex and rgb()
Every supported color gets a marker in the editor and a tick in the overview ruler, in CSS and in any other language. Underline is the default marker, and w3cColorToolkit.highlight offers other styles. Colors that depend on context, such as currentColor or a var() with no definition, are never painted with a made-up value. See Highlighting and hover to pick a marker and choose which syntaxes count.
Hovering shows a preview, the source text, one row per format and the specification level the syntax comes from.
Click the swatch in front of any supported color, including oklch(), lab() and color(display-p3 …), to open VS Code's color picker. The text stays as written until you actually change the color, and the new value is written back in the original format whenever that format can express it. Expressions such as color-mix() or a resolved var() get a read-only swatch, so one stray drag cannot flatten them into a literal. Details are in Edit colors with the picker.
Convert colors without silently losing alpha or gamut
Convert Color rewrites the value in place and Copy Color As puts it on the clipboard, in any target from #RRGGBB to color(rec2100-pq). Before writing, it warns about gamut mapping and refuses to drop alpha or none components unless you allow it. See Convert and copy colors for the selection rules and key bindings.
Preview design tokens behind var(), $ and @
var(--brand), $brand and @brand resolve to the color they stand for when the workspace defines them unambiguously, including Tailwind-style channel tokens such as rgb(var(--channels) / 0.4). When a token has several definitions, for example one per theme, the hover lists every candidate instead of guessing. See Resolve variables.
When not to use it
It resolves variables but does not evaluate preprocessor logic: SCSS maps, @each, mixins, functions such as darken(), and Stylus variables are left alone. It does not map Tailwind utility classes such as bg-red-500 to colors; Tailwind CSS IntelliSense covers that.
Learn more
- Documentation index: configuration, supported syntax and troubleshooting.
- Commands and settings are listed on the marketplace page's Feature Contributions tab.
- See the changelog for what changed in each release.
License
MIT. Third-party notices are in NOTICE.md.
