VoilaColor: Pro Color Picker

Stop juggling five browser tabs to do what one tool should handle. VoilaColor is a 3-in-1 color tool, design inspector, and brand studio — built for designers and developers who need precision, speed, and depth in a single Chrome extension. ── VOILACOLOR TAB: THE COLOUR TOOLKIT YOU'VE BEEN WAITING FOR ── Pick any colour on screen with the pixel-perfect eyedropper, then instantly convert it to every format you need: HEX, RGB, HSL, CMYK, LAB, and LCH. No copy-pasting between converters. No mental maths. Your full colour history is saved automatically, so nothing slips through the cracks. From there, VoilaColor gives you a complete creative workbench: • Contrast Checker — WCAG AA and AAA compliance at a glance. Know instantly whether your text is accessible before a line of code is written. • Colour Temperature — understand the warmth or coolness of any colour to keep your palette visually coherent. • Colour Mixer — blend two colours and explore the spectrum between them. • Gradient Builder — create smooth CSS gradients and export the code directly. • Shade Generator — generate a full tonal scale from any base colour, perfect for design systems and component libraries. • AI Palette Generator — describe a mood, brand, or concept and let Claude generate a harmonious colour palette in seconds. Bring your own Anthropic API key. • CSS Snippet Export — copy production-ready CSS with one click. • Design Token Export — export your colours as CSS custom properties, a Tailwind config, Figma Variables JSON, or a Style Dictionary object. One palette, every format. And for Tailwind CSS developers: every colour you pick shows its nearest Tailwind class in a badge, so you always know whether to reach for a framework token or a custom value. ── VOILACAPTURE TAB: EXTRACT COLOUR FROM EVERYWHERE ── Great design inspiration is everywhere — in screenshots, brand assets, competitor sites, and live pages. VoilaCapture turns any of them into an actionable palette: • Palette from Image — upload any image and extract its dominant colours automatically. • CSS Variable Scanner — scan the current page and pull every CSS custom property and colour value defined in its stylesheet. A goldmine for auditing or reusing existing design systems. • Colour Blindness Simulator — preview how your palette looks to users with deuteranopia, protanopia, tritanopia, and achromatopsia. Design inclusively from the start. • Page Palette Extractor — capture the full colour palette of any live webpage with a single click. Perfect for competitive research or building on an existing visual language. ── BRAND STUDIO: FROM COLOUR TO COMPLETE STYLE GUIDE ── VoilaColor goes beyond picking colours — it helps you build and communicate an entire visual identity. • Style Guide Generator — compile your palettes, typography choices, and brand rules into a shareable style guide with a public link, and export it as a polished PDF or standalone HTML file. • AI Brand Consultant — powered by Claude, this feature analyses your brand colours, asks the right questions, and gives you expert-level guidance on palette refinement, accessibility, and visual consistency. Like having a senior brand designer on call. • Figma Variables Export — push your colour tokens directly into Figma as a Variables JSON import. Keep your design tool and your code perfectly in sync. • Tailwind Config Export — generate a complete tailwind.config.js colour section from your brand palette. Drop it straight into your project. ── BUILT FOR DEVELOPERS ── VoilaColor speaks your language. Every colour comes with CSS custom property output, Tailwind nearest-class suggestions, and Figma Variables JSON — so the gap between design and code gets smaller with every pick. ── PRICING ── VoilaColor is free to install and use. The core eyedropper, colour history, format conversion, contrast checker, shade generator, and CSS snippets are available at no cost. VoilaColor Pro — $9.99/month — unlocks the full toolkit: ✦ VoilaCapture tab (palette from image, CSS scanner, blindness simulator, page palette) ✦ Brand Studio (style guide generator, AI brand consultant, Figma + Tailwind exports) ✦ AI Palette Generator and AI Brand Consultant (bring your own Anthropic API key) ✦ Design token export in all formats (Figma Variables, Style Dictionary, Tailwind config) Payments are handled securely by LemonSqueezy. Cancel any time. ── YOUR DATA STAYS YOURS ── VoilaColor stores everything locally using the Chrome Storage API. No account required. No analytics. No tracking. If you use AI features, your Anthropic API key is stored only on your device and sent directly to Anthropic — we never see it. Read our full privacy policy in the extension. Whether you're building a SaaS product, crafting a client brand, auditing a design system, or just trying to match a colour from a website — VoilaColor gives you the precision tools to do it faster and with more confidence. Install free. Upgrade when you're ready.