Inline swatches, hover WCAG contrast, prompt-to-palette, and one-shot OKLCH conversion - without leaving the editor.
Every hex, rgb(), and hsl() in your file gets a clickable swatch via the standard VSCode color picker. Works in any language.
Hover any hex - see the contrast ratio against your editor background, plus AAA / AA / AA Large / Fail grade. Computed locally, zero latency.
Type "fintech mobile dashboard" and insert an OKLCH-balanced palette as CSS variables, Tailwind config, JSON, or a share URL.
Right-click any color token. Pick HEX, RGB, HSL, OKLCH, or LAB. Copy result. Two keystrokes total.
Local features (swatches, hover) never touch the network. API features only call colorui.io when you trigger them. No tokens, no cookies, no SDKs.
Backed by the public ColorUI API on Vercel Edge. Or point colorui.apiBase at your own deployment.
We are submitting to the VSCode Marketplace. While the listing is in review, you can sideload in 30 seconds.
vscode-extension/ foldernpx degit colorui/colorui/vscode-extension vscode-extensionvscode-extension/ folder using any option above (the "Download .zip" button gives you only this folder).npx @vscode/vsce package inside it to produce a .vsix.Ctrl/Cmd+Shift+P) and type ColorUI.Yes. Free forever. No account, no API key, no usage cap beyond a fair-use 60 requests per minute on the public API.
Any language. The color provider is regex-based - it matches hex, rgb(), rgba(), hsl(), and hsla() tokens in CSS, SCSS, JS/TS, JSON, YAML, Python, Go, Rust, Markdown, and anywhere else colors live.
A single configurable origin: colorui.apiBase (default https://colorui.io). Set it to your self-hosted deployment, or to an empty string to disable network features entirely.
Yes - both are toggleable via colorui.enableHoverContrast and colorui.enableInlineSwatches in your VSCode settings.
Inline swatches and hover contrast work fully offline (computed locally). Generate, Convert, and Contrast commands need network access to colorui.io.
The extension lives in the open in the colorui.io repo at /vscode-extension. Pure JS - manifest, extension.js, README. Audit it before installing.