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 SCSS map
It shapes your swatches into a Sass map you can loop over, the idiomatic way to store a palette. Generated in your browser, nothing uploaded.
Frequently asked questions
What does the swatch to SCSS map converter do?
It formats pasted hex colors as a Sass map variable.
What does the Sass map look like?
A $colors map with keys "color-1", "color-2", and so on, each set to a lowercased hex value, ready to paste into a .scss file.
How do I use a color from the map?
With map.get($colors, "color-1") after @use "sass:map", or with the older map-get($colors, "color-1") syntax.
Can I loop over the map to make classes?
Yes. @each $name, $value in $colors lets you generate utility classes like .bg-color-1 for every swatch in one block.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.