 
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 and navigate fast just like you are used to. Helps with theming or to manage cumbersome refactoring and accessability concerns. Finds defifnitions from CSS variables, Tailwind classes, and CSS class names with color properties.
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
Install from VS Code Marketplace
Open VSCode and type ctrl+p, then type: ext install PAUlander.colorbuddy.
Install from vsix binary
- Download latest vsix binary or run
npm run package-vsix 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-*.*.*.vsix.
License
MIT
| |
