YivColor 1.6.0

A Visual Studio Code extension that displays color previews in any file type.

Get Started VS Code Marketplace
YivColor Banner

Add to VS Code

ext install Yivani.yivcolor

Rich Color Format Support

Display color previews for hex, RGB, HSL and many more formats

Works in Any File Type

Preview colors in specific file types and even unsaved files

Real-Time Updates

Automatically updates as you type for a seamless experience

Highly Customizable

Personalize appearance options to fit your workflow

Multiple File Support

Works with numerous file types including programming, markup, and data files

🔌 Installation

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for YivColor
  4. Click Install
  5. Reload VS Code when prompted

Alternatively, you can install it directly from the VS Code Marketplace:

YivColor on VS Code Marketplace

🌈 Supported Color Formats & File Types

YivColor works with a wide range of color formats and file types:

Supported Color Formats

  • Hex colors: #ffffff, #fff
  • RGB: rgb(255, 255, 255)
  • RGBA: rgba(255, 255, 255, 0.5)
  • HSL: hsl(360, 100%, 100%)
  • HSV: hsv(360, 100%, 100%)
  • HSB: hsb(360, 100%, 100%)
  • CMYK: cmyk(0%, 100%, 100%, 0%)
  • LAB: lab(75%, 20, -10)
  • LCH: lch(75%, 30, 270)
  • YUV: yuv(50%, -30, 20)
  • YCbCr: ycbcr(235, 128, 128)
  • Named CSS colors: red, blue, coral, etc.

Supported File Types (by default)

  • 🐍 Python (.py)
  • ☕ Java (.java)
  • </> C (.c), C++ (.cpp), C/C++ Headers (.h)
  • 🐹 Go (.go)
  • ⚙️ Rust (.rs)
  • 🐘 PHP (.php)
  • 🐚 Shell Scripts (.sh)
  • 📋 YAML (.yaml, .yml)
  • 📰 XML (.xml)
  • 💾 SQL (.sql)
  • 📝 TOML (.toml)
  • 📊 JSON (.json)
  • 📜 JavaScript (.js)
  • 📘 TypeScript (.ts)
  • 📝 Markdown (.md)
  • 📄 Text files (.txt)
  • 📚 LaTeX (.tex)
  • 🔖 INI (.ini)
  • 📑 CSV (.csv), TSV (.tsv)
  • 📓 Log files (.log)

⚙️ Configuration Options

YivColor offers numerous configuration options to customize its behavior:

Setting Description Default
yivcolor.enable Turn the extension on or off globally true
yivcolor.appearance.previewSize Size of the color preview square in pixels 14
yivcolor.appearance.previewBorder Show a border around color previews true
yivcolor.appearance.previewPosition Where the color preview appears (before/after) before
yivcolor.experimental.enableUntitledFiles Enable color previews in unsaved files true

🆕 Latest Changes

Stay up-to-date with the latest improvements to YivColor:

Version 1.6.0

  • Added Color History
    • Tracks recently detected colors across your workspace
    • New Activity Bar "Color History" view with copy and clear actions
    • New command: "YivColor: Clear Color History"
    • New setting: yivcolor.history.maxItems
  • Additional performance and stability improvements
  • Internal refactor: modularized color logic under src/color/

Version 1.7.0 (Coming Soon)

  • Pinned/favorite colors in the History view
  • Export/Import color history (JSON)
  • Incremental parsing: update only changed regions for even better performance on large files
  • Optional global history shared across workspaces
View Full Changelog

🎨 About YivColor

YivColor enhances your coding experience by displaying vibrant color previews directly in your code editor. Whether you're working on a web project, design system, or any type of coding that involves color values, YivColor brings your colors to life.

Supporting a wide range of color formats and file types, YivColor makes working with colors more intuitive and efficient.

Add some color to your code! 🌈