Highlight CSS color

Color Highlight Extension

Instantly highlight CSS and web color codes in your files.
Makes color management much easier right within your editor.

How to install:
Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P) in VS Code,
type "ext install", then search for "Color Highlight" and install it from the marketplace.

Questions or feedback? Please help improve the extension!
Feedback form

Commands

The extension provides the following commands and features for your convenience:

• Color Highlight: Enable/Disable
  Enables or disables color highlighting globally. You can quickly toggle the extension from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) by searching for "Color Highlight: Enable" or "Color Highlight: Disable".
• Color Highlight: Reload
  Forces a reload of the extension, allowing you to apply configuration changes instantly.
• Color Highlight: Pick Color
  Opens the color picker for the color code under the cursor, if your environment supports it.
• Color Highlight: Change Marker Style
  Quickly switch between different marker/highlighting styles via a command in the Command Palette.

Features

• Highlights HEX, RGB, RGBA, HSL, HSLA, HWB, LAB, LCH, OKLCH and CSS named color formats.
• Automatically highlights color variables (including those imported from SASS/SCSS, LESS, etc.).
• Floating point values supported in HSL and RGB for Tailwind users.
• Support for modern CSS color functions, including LCH and OKLCH.
• Change highlighting style: underline, border, background, dot - customizable via settings and quick command.
• Recognizes color values without a function wrapper, e.g., 255 0 90.
• Easy enable/disable option to temporarily suspend color highlighting.

Settings

You can configure the extension in Settings > Extensions > Color Highlight, or by editing your settings.json:

• color-highlight.enable: Enable/disable the extension (default: true)
• color-highlight.languages: List of languages to activate highlighting for (default: ["*"])
• color-highlight.markRuler: Enable marking colors in the ruler (default: false)
• color-highlight.markerType: Choose highlighting style: underline, box, background, dot (default: background)
• color-highlight.useARGB: Use ARGB instead of RGBA for hexadecimal colors (default: false)
• ...and more! See extension settings for all options.

Official VS Code extension for effortless color highlighting.