View, edit, and manage color palettes directly in VS Code. Supports ACO, ASE, JSON, CSS, and Tailwind formats with full import/export, an inline color picker, drag-and-drop reordering, and real-time search.
The extension sits neatly in the left sidebar for easy access when needed. Color swatches allow for you to easily copy the HEX/RGB/HSL/CSS filters value.
Read more below, github link is >here< with download and full info.
[[MORE]]
Features
- Multi-format support — import and export ACO, ASE, JSON, CSS variables, and Tailwind config files
- Sidebar palette manager — dedicated activity bar icon with a browsable palette menu and auto-refreshing file list
- Visual swatch grid — two-column card layout showing every color with its name, hex, and all format values
- Click to copy — click any format row (HEX, RGB, HSL, HEXA, RGBA, HSLA, CSS Filter) to copy it to the clipboard
- Inline color picker — add new colors with a full-featured picker (hue, saturation, brightness, opacity)
- Edit in place — rename colors inline, delete with one click, drag-and-drop to reorder
- Search — real-time filtering by name, hex, RGB, HSL, or group
- Alpha support — full transparency handling with HEXA, RGBA, and HSLA displayed when alpha < 1
- CSS Filter output — a complete filter: chain to reproduce any color from black, useful for SVG icon tinting
- Group labels — ASE groups and JSON group fields are preserved and displayed as section headers
- Spot color indicator — ASE spot colors are marked with a dot on the swatch
- Save to Swatches — persist palettes to ~/.vscode/swatches with automatic filename incrementing
- Palette switcher — jump between saved palettes without leaving the editor view
- Full theme integration — all UI colors follow your VS Code theme
—
🎨 Theme Adaptation & Custom Text Effects
The extension follows your active VS Code color theme automatically. All borders, backgrounds, badges, and buttons pull from your theme’s color tokens so it feels native whether you’re on a light, dark, or high-contrast theme.
Custom fonts and text effects (like the effect seen above with a custom theme of mine) can be applied via the included TEXT_EFFECTS.css file. VS Code’s webview sidebar runs in a sandboxed iframe that blocks external CSS injection from theme extensions — meaning theme-level style overrides like SynthWave ‘84’s neon glow can’t reach inside extension panels automatically. TEXT_EFFECTS.css works around this by loading the effects directly into the webview’s own stylesheet, so you get the full aesthetic without any sandbox violations.
—
AN: This extension was made to cut down on time spent outside of VSC while doing design work. I often found myself individually copying color codes from Photoshop or my files, having to use a website to convert my colors into css filters or having a browser tab always open with some color wheel/palette site. This tool aims to get rid of all of that, or at the very least significantly reduce it.
I made this using Claude and Copilot and it was mostly vibecoded. I’m not uploading this to the VSC extensions store, like I said I mostly used AI, I made it for personal use and uploaded it in case someone just really wants it and is okay with using a tool made with AI.