 
ColorBuddy - Your VS Code Color Companion
Adds color indicators and mouseover information anywhere a common color code is found in text or code. Find color definitions fast just like you are used to, and manage refactoring and accessability with ease.
Features
- Inline color indicator right beside each detected color value
- Mouseover preview that shows the selected color and instructions
- Native VS Code color picker available on click for supported values
- Configurable language support via the
colorbuddy.languages setting
- Tailwind compact HSL support in addition to hex, rgb/rgba, and hsl/hsla
Usage
- Open any file in a language covered by
colorbuddy.languages (defaults include CSS, HTML, JS/TS, Markdown, and more)
- Look for the inline color indicator next to recognized color codes
- Click the color value (or use the hover link) to launch VS Code's color picker
- Choose a new color; ColorBuddy keeps the original format when possible
- Hex:
#f00, #ff0000, #ff0000cc
- RGB / RGBA:
rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
- HSL / HSLA:
hsl(0 100% 50%), hsla(0 100% 50% / 0.5)
- Tailwind compact HSL:
0 100% 50%, 0 100% 50% / 0.5
Configuration
colorbuddy.languages: array of VS Code language identifiers that ColorBuddy should scan. Edit it from the Settings UI or add to your settings.json:
"colorbuddy.languages": [
"css",
"scss",
"sass",
"html",
"markdown"
]
Default languages include:
- CSS/Styling:
css, scss, sass, less, stylus, postcss
- Markup:
html, xml, svg
- JavaScript/TypeScript:
javascript, javascriptreact, typescript, typescriptreact
- Modern Frameworks:
vue, svelte, astro
- Data/Config:
json, jsonc, yaml, toml
- Markdown:
markdown, mdx
- Programming Languages:
python, ruby, php, perl, go, rust, java, kotlin, swift, csharp, cpp, c, objective-c, dart, lua
- Scripting:
shellscript, powershell
- Query Languages:
sql, graphql
- Other:
plaintext
Add or remove identifiers to fit your workspace. Use "*" to enable color detection in all file types. Changes apply immediately.
Installation
This extension is a work in progress, and it is not yet on the VS Code Marketplace.
To install it manually:
- Download color-buddy-0.0.1.vsix or run
npm run package to generate your own.
- In VS Code press
Ctrl+Shift+P (Cmd+Shift+P on macOS) and choose Extensions: Install from VSIX....
- Pick the downloaded/generated
.vsix file and reload the editor when prompted.
- Alternatively, install via CLI with
code --install-extension color-buddy-0.0.1.vsix.
Requirements
VS Code 1.106.1 or higher
License
MIT
| |
