Introducing Spongy: A Solution to Your Color Matching Woes
Bridging the gap between developers and designers isn’t always easy, most of the time we’re speaking a completely different language. So in order to work efficiently throughout the release cycle and ship products that consistently represent the companies we work for, we rely on a central authority, a set of guidelines called a design language.
Here at IBM, designers, engineers and managers turn to the official IBM Design Language for guidance around typography, icons, interaction, animations, color palettes and more. This set of tools helps us stay focused, communicate efficiently, and iterate quickly.
But this language doesn’t always translate to the tools front end developers turn to when it’s time to break apart design files to get information relevant to layouts, typography, colors, spacing, etc. Tools like Sketch and InVision are simply unaware of a company’s unique design language, especially when it comes to colors.
Here’s a scenario I’m sure you can relate to:
You are using a common palette of design language colors for all of your projects and a CSS preprocessor, like Sass, to get the intended color value of any given color in the palette like this:
Any eye dropper can give you the hex color value of something you click on in a design. However, translating this hex value to a design language color for your Sass file can involve manual hacks and cheat sheets.
To help solve this problem, and work even faster, I created Spongy.
Spongy is an eye dropper tool for design language colors on Google Chrome. This general purpose eye dropper allows developers to inspect the colors of a design and get the respective color from their design language color palette to use in their code.
Before Spongy, my personal process would look like this:
1) Use other eye dropper tool.
2) Copy hex color value.
3) Browse to IBM Design Language resources page.
4) Do a find search on colors page.
5) Copy design language color name and grade.
6) Paste into Sass file.
7) Format text for color function… Geez!
Now, I can do the same thing in 3 quick steps using Spongy, I copy returned IBM Design Language color name and grade, paste into Sass file, and profit.
Spongy is a working prototype and currently only works with IBM Design Language colors, but soon you’ll be able to import any color palette. Get it from the Google Chrome Web Store while it’s hot! Or check it out on Github and let us know what you think. All feedback welcome.
Diego Hernandez is a Front End Developer at IBM based in Austin. The proceeding article is personal and does not necessarily represent IBM’s positions, strategies or opinions. Follow Design at IBM and IBM Design on Twitter and Facebook.
