YivColor
Universal color previews for VS Code.
Features • Installation • Usage • Settings
Features
- Universal — Works in any file type (Python, JavaScript, SQL, Markdown, etc.)
- 12+ Color Formats — HEX, RGB, RGBA, HSL, HSV, HSB, CMYK, and CSS named colors
- Color History — Track and reuse colors from your workspace
- Performance — Optimized for large files with throttling and caching
- Customizable — Adjust preview size, position, and appearance
Installation
Install from the VS Code Marketplace or search YivColor in the Extensions panel.
Usage
Open any file with color codes. Previews appear automatically.
Supported formats:
#3498db HEX
rgb(52, 152, 219) RGB
rgba(0, 0, 0, 0.5) RGBA
hsl(204, 70%, 53%) HSL
hsv(204, 78%, 86%) HSV
hsb(204, 78%, 86%) HSB
cmyk(79%, 22%, 0%, 14%) CMYK
coral Named colors
Commands:
| Command |
Description |
YivColor: Toggle Extension |
Enable/disable previews |
YivColor: Clear Color History |
Reset workspace color history |
YivColor: Refresh Settings |
Reload configuration |
Settings
| Setting |
Default |
Description |
yivcolor.enable |
true |
Enable/disable extension |
yivcolor.appearance.previewSize |
14 |
Preview size in pixels (8-32) |
yivcolor.appearance.previewBorder |
true |
Show border around previews |
yivcolor.appearance.previewPosition |
before |
Position: before/after color |
yivcolor.colorFormats |
All |
Enabled color formats |
yivcolor.supportedFileTypes |
40+ types |
File extensions to enable |
yivcolor.history.maxItems |
100 |
Max colors in history |
Color History
The Activity Bar panel tracks colors used across your workspace. Click any color to copy it to your clipboard.
Why YivColor?
VS Code has built-in color previews — but only in CSS-like files. YivColor works everywhere: config files, documentation, code comments, logs, and more.
Links
License
GPL-3.0 © Yivani
