CSS colors to SVG palette about
Extract every color from any CSS file or plain text and get a clean, ready-to-use SVG palette — in one click.
Supports all CSS color formats: hex, rgb(), hsl(), hwb(), lab(), lch(), oklch(), and color(display-p3).
Import directly into Adobe Illustrator (as swatches) or Figma (via the Styler plugin).
Free, no sign-up, no data collection.
📘 How to use this tool
- 1. Paste your CSS code in the left textarea (or drag & drop a
.cssfile). - 2. Click the “Extract colors to SVG!” button.
- 3. The tool will:
- Remove all comments (
/* ... */and// ...). - Extract every color value (hex, rgb, hsl, lab, oklch, etc.).
- Convert them to hex using your browser + Color.js as a fallback.
- Remove all comments (
- 4. You'll be taken to the “Export SVG” tab, where you'll see a preview of the palette and its code.
- 5. From there you can: ⬇️ Download the SVG file 📋 Copy the SVG code to clipboard
⚡ Pro tip: Once you have the SVG, open it in Illustrator. Select all, then go to Swatches panel → New Color Group → From Selected Artwork. Your palette (with hex names) will be ready!
🖼️ SVG Preview
📄 SVG Code
About CSS colors to SVG palette
A tool I made for myself. It might be useful to you. Who knows? It's free!
I quickly built this because I needed to extract all the colors specified in a CSS file and use them as a Color Group in Adobe Illustrator.
Of course, even vibe coding this took me 10 times longer than just doing it manually. But rejoice! Now that you've stumbled upon this, you can benefit from my lack of foresight and actually save some time of your own.
Want to thank me? Cool! I happen to be a professional unicorn (product strategy, UX, UI, and code). With over 30 years in the industry, I can definitely add value to you and your product. Let's talk business.
What does this do? What's the input? What's the output?
Are you a designer? Or aspiring to be one? Or maybe you're just tinkering with a design tool? Well, creating a color palette from a list of hex values (like "#ff0000, #ff00ff", etc.) is a chore. Now, it's just a couple of clicks! Isn't life wonderful? No? Well, whatever.
CSS colors to SVG palette lets you effortlessly extract every color value from any CSS code or plain text list and convert them into a ridiculously useful SVG color palette. You can then import it into any vector design application—Adobe Illustrator, Inkscape, Figma (yes, really), or whatever floats your creative boat.
Simply paste your CSS, upload a .css file, or dump a list of colors (hex, rgb, hsl, oklch, you name it) in any format — one per line, separated by spaces, commas, or even lost in the middle of a novel. The tool scans for all valid CSS color formats and generates a clean, ready-to-use SVG.
Once you have the SVG, open it in Illustrator, select all (Ctrl+A / Cmd+A), go to the Swatches panel → New Color Group → From Selected Artwork. Boom. Your palette, with hex labels, is now ready to be used across your entire project.
Why is the design so ugly? Aren't you a professional designer?
You're right! I didn't actually design the UI details: the AI did. This generic, ugly, boring user interface was the first thing the AI came up with after my prompt detailing the information architecture and interaction design: that you should have a textarea where you can paste your CSS or text with the color codes, that you should have some instructions on the side, that you should have a button to process the colors, and that the final SVG and code should be shown afterwards in a different tab, ready for downloading or copying.
So, I did design this. In the broad sense of designing: projecting something. UX is about that. It's not just about pixels. The pixel-polishing part, honestly? I didn't get around to it. I had other things to do. Like taking the CSS colors from a project I was actually getting paid for and bringing them into my design. Being a professional means someone pays you. And every second I spent on this tool was a second I wasn't spending on my actual professional work.
But I can be professional for you. Are you interested? Sure you are. That's why you're still reading this.
So, what can I do for you? Did I mention I have over 30 years of experience as a professional unicorn? Oh, right. I did. Well, I'm also the UX Director of Kambrica, a pioneering strategic UX consultancy in Latin America. Want to see what actual good design looks like? We've got quite a few cases from leading companies and organizations. This little tool? This is just me being lazy and helpful at the same time.
Why would you need this? (SEO-friendly thoughts)
Whether you're a front-end developer cleaning up a legacy CSS file, a designer building a design system, or just someone who needs to quickly convert a list of brand colors into a usable palette, this tool does exactly that. It saves time. It reduces errors. It works with modern CSS color syntax (like oklch() and color(display-p3)) and spits out a clean, well-structured SVG that any vector app can understand.
No sign-ups. No paywalls. No data collection. Just a simple, ugly-beautiful tool that does one thing and does it reasonably well.
Why is this a lifesaver in Adobe Illustrator?
Let's be honest: manually copying hex codes from a CSS file and recreating them as swatches in Illustrator is a soul-crushing waste of time. You know the drill: create a rectangle, open the color picker, paste the hex, repeat 47 times. Then group them, name them, and hope you didn't miss one. That's 10 minutes of your life you'll never get back.
CSS colors to SVG palette turns that boring 10-minute chore into a 10-second no-brainer. Just paste your CSS, click a button, and download a clean SVG. Open that SVG in Illustrator, select all the colored rectangles (Ctrl+A / Cmd+A), and head over to the Swatches panel → New Color Group → From Selected Artwork. Boom. Your entire palette—complete with hex labels—is now ready to use across your whole project.
Whether you're building a brand style guide, updating a design system, or just trying to keep your files consistent, this tool saves you from the monotony of manual swatch creation. And because it supports modern CSS color syntax (oklch, lab, color(display-p3)), you can feed it anything your front-end dev throws at you.
Keywords for the search bots: Adobe Illustrator color swatches, import color palette from CSS, create swatch group from SVG, design workflow automation, save time in Illustrator, hex to swatch, design tool productivity.
And what about Figma? (Spoiler: it's even better)
Figma is awesome, but it has one tiny quirk: you can't just paste a list of hex codes and magically get a color palette. Sure, you can type #ff0000 into the color picker, one by one, like a medieval scribe. But who has time for that?
Here's where this tool shines. Download the SVG from CSS colors to SVG palette and drag it directly into your Figma canvas. You'll see every color as a separate rectangle, with its hex code neatly labeled. Now select all those rectangles (Ctrl+A / Cmd+A) and install the free community plugin Styler. Run it, choose "Generate Styles," and watch Figma create a complete set of Color Styles from your selection. In seconds, your palette is ready to use consistently across your entire UI.
Want to go full design-system nerd? You can later convert those styles into semantic variables (like --primary-color) using plugins like CSSGen. But that's a story for another day. For now, just enjoy the fact that you've bypassed the most tedious part of color management.
Keywords for the search bots: Figma color styles, import colors into Figma, create palette from SVG, Figma plugin Styler, design system workflow, UI design productivity, convert CSS to Figma swatches, color variables Figma.
Built with caffeine, curiosity, and some actual professional criteria by Santiago Bustelo. Open source? Well, it's JavaScript, so you already have the source whether you like it or not. But officially: MIT License. Do whatever you want with it. Fork it. Break it. Improve it. Just don't blame me if your colors end up looking like a clown's wardrobe.