vscode-better-color-highlight

Highlight and preview colors in multiple formats across code, comments, and strings.

VS Code Web

This extension supports browser-based VS Code environments, including vscode.dev and github.dev. Runtime file access uses the VS Code Workspace FS API, so SCSS dependency resolution can work with web and virtual workspace file systems when those files are readable by VS Code.

Commands

Configs

Supported color formats

• [x] Hex：#RGB #RRGGBB #RGBA #RRGGBBAA 0xRRGGBB 0xRRGGBBAA
• [x] rgb() / rgba()（whitespace, comma and slash alpha）
• [x] hsl() / hsla()（percentage, angle and slash alpha）
• [x] hwb()
• [x] lab() / lch()
• [x] oklab() / oklch()
• [x] color()：srgb srgb-linear display-p3 a98-rgb prophoto-rgb rec2020 xyz
• [x] Named color（red rebeccapurple）
• [x] CSS / SCSS / Less / Stylus variables
• [x] Extra expressions：bare RGB / HSL triplets、--color-rgb: 255 0 0 shorthands
• [x] Flutter/Dart：Color(0xffRRGGBB)、Color.fromARGB(a, r, g, b)
• [x] Hyprland：rgba(rrggbb)、rgba(rrggbbaa)
• [ ] Design tokens：Tailwind、tokens（JSON/YAML）

Credits

This extension is implemented based on naumovs/vscode-ext-color-highlight. Thanks to the original project and its contributors for the foundation of the VS Code color highlighting experience.

What is different

Compared with the original Color Highlight extension, this project keeps the familiar color-highlight.* settings namespace while expanding parser coverage, reducing false positives, and modernizing the extension internals.

• Modern TypeScript/ESM implementation with reactive-vscode, tsdown, vitest, oxlint, and oxfmt.
• Explicit enable/disable commands: color-highlight.enable and color-highlight.disable.
• More CSS Color 4 coverage, including whitespace syntax, slash alpha, hwb(), lab(), lch(), oklab(), oklch(), and color().
• More accurate slash-alpha handling for rgb() / rgba() / hsl() / hsla() and shorthand color expressions.
• Safer hex detection: #RGB / #RGBA remain supported, while short numeric 0xabc / 0xabcd values are ignored to avoid number-literal false positives.
• Dart/Flutter colors: Color(0xffRRGGBB) and Color.fromARGB(a, r, g, b).
• Hyprland rgba(rrggbb) and rgba(rrggbbaa) syntax.
• Transparent colors stay visible by rendering markers with an opaque display color while preserving the represented color value.
• Named CSS color matching is more configurable through color-highlight.namedColorMatchMode.
• Optional SCSS cross-file variable resolution through local @use, @forward, @import, directory indexes, nearest node_modules, and configured Sass load paths.
• VS Code Workspace FS based dependency reads, avoiding Node fs APIs in extension runtime.
• Broader test coverage, including parser regression tests and playground snapshots.

Migration from Color Highlight

Most settings from naumovs.color-highlight can be kept as-is because this extension intentionally keeps the same color-highlight.* configuration namespace for compatible options.

Suggested migration example:

{
  "color-highlight.languages": ["*", "!markdown"],
  "color-highlight.markerType": "background",
  "color-highlight.matchWords": false,
  "color-highlight.namedColorMatchMode": "context",
  "color-highlight.resolveScssVariablesAcrossFiles": false,
  "color-highlight.scssLoadPaths": [],
}

If you want behavior closer to the original broad named-color matching, use:

{
  "color-highlight.matchWords": true,
  "color-highlight.namedColorMatchMode": "always",
}

License

MIT License © 2026-PRESENT ntnyq