Swatch to SCSS Map
Convert palette swatches into a copy-ready Sass color map.
Palette to a Sass map
If your project uses Sass, a color map is the idiomatic way to store a palette and loop over it. This tool converts your hex swatches into a copy-ready Sass $map, so your colors slot straight into a Sass-based design system.
A map keeps colors organized and iterable, which powers utilities and theming. Paste your swatches, get a formatted Sass map, and copy it into your variables partial to drive the rest of your styles.
Copy-ready CSS
The output is generated live in your browser as you type, so there is nothing to install and nothing is uploaded. Copy the result straight into your project when it looks right, and it will behave exactly as it did here — no account, no waiting, no data leaving your device.
Frequently Asked Questions
What does the swatch to SCSS map converter do?
It formats pasted hex colors as a Sass map variable.
Can I use the output in production?
Yes. Review the generated values, then copy the CSS, color list, or text output into your design system or project files.
Does this upload my colors or images?
No. The tool runs in your browser. Uploaded images are read locally and are not sent to a server.
Is this tool free?
Yes. It is free to use and does not require an account.
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.