Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Preview comma separated css variablesNew to Visual Studio Code? Get it now.
Preview comma separated css variables

Preview comma separated css variables

magnusg93

|
46 installs
| (0) | Free
Preview color of comma separated css variables as RGB.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

CSS Variable Color Preview and Edit

This VSCode extension provides a live color preview for CSS variables that represent RGB values in your stylesheet. It automatically displays the preview of colors defined with comma-separated RGB values in your CSS files.

Features

  • Color Preview and Edit for CSS Variables: It detects and shows a color preview for CSS variables defined as RGB values (e.g., --my-color: 255, 0, 0;).
  • Real-time Updates: The color preview is automatically updated as you modify the CSS variable's RGB values.
  • Intuitive & Simple: The extension makes it easy to visualize your CSS colors directly in the editor without the need to open external tools or check the browser.

Supported Syntax

The extension supports CSS variables in the following format:

--variable-name: r, g, b;

Color preview RGB comma separated css variables. Color edit RGB comma separated css variables.

It will automatically show a color preview, that can be edited for each defined variable.

Installation

  1. Open Visual Studio Code.
  2. Go to the Extensions Marketplace (Ctrl+Shift+X or Cmd+Shift+X on macOS).
  3. Search for CSS Variable Color Preview.
  4. Click Install to add the extension to your VSCode.

Requirements

vscode 1.95.0 or greater.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft