Color Previewer

A comprehensive Visual Studio Code extension that provides real-time color visualization for all major color formats with an integrated color picker.

Features

• Universal Color Support: Detects and displays colors in multiple formats:

  • HEX colors (#FF0000, #f00)
  • RGB/RGBA (rgb(255,0,0), rgba(255,0,0,0.5))
  • HSL/HSLA (hsl(0,100%,50%))
  • OKLCH (oklch(62.8% 0.25768 29.2338))
  • Tailwind classes (bg-red-500, text-blue-300)
  • CSS named colors (red, blue, etc.)

• Flexible Display Options:

  • Color swatches (before/after color values)
  • Background highlighting
  • Configurable swatch size and position

• Integrated Color Picker:

  • Click or hover to open color picker
  • Support for all color formats
  • Real-time format conversion
  • Visual color selection interface

• File Type Support:

  • CSS (.css)
  • SCSS/SASS (.scss, .sass)
  • JavaScript/TypeScript (.js, .ts, .jsx, .tsx)
  • HTML (.html)
  • Vue (.vue)

Installation

1. Open Visual Studio Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Color Previewer"
4. Click Install

Usage

Colors are automatically detected and displayed when you open supported files. The extension works out of the box with zero configuration required.

Opening the Color Picker

• Click: Click on any color swatch (default)
• Hover: Hover over color values (configurable)
• Command: Use Ctrl+Shift+P and search for "Open Color Picker"

Supported Color Formats

/* HEX colors */
color: #ff0000;
background: #f00;

/* RGB/RGBA colors */
color: rgb(255, 0, 0);
background: rgba(255, 0, 0, 0.5);

/* HSL/HSLA colors */
color: hsl(0, 100%, 50%);
background: hsla(0, 100%, 50%, 0.5);

/* OKLCH colors */
color: oklch(62.8% 0.25768 29.2338);

/* CSS named colors */
color: red;
background: blue;

Configuration

Access settings through File > Preferences > Settings and search for "Color Previewer"

Development

Building from Source

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Run in development mode
npm run watch

Testing

# Run tests
npm test

# Run linting
npm run lint

License

This project is licensed under the MIT License.

Release Notes

0.0.1

Initial release with core functionality:

• Multi-format color detection (HEX, RGB, HSL, OKLCH, Tailwind, CSS named)
• Configurable display modes (swatches, background highlighting)
• Integrated color picker with format conversion
• Support for CSS, SCSS, JS/TS, HTML, and Vue files