IBM-Design / spongy

A Google Chrome extension eye dropper tool for brand colors.

Spongy

A Google Chrome eyedropper for IBM Design Language's colors and grades.

If you're someone who works with brand colors often, you might have a hex to brand color and grade cheatsheet with you at all times. That way when you're working with a design where all you get is hex values, you can determine which Sass or JS value you need to get that same color.

Worry not! This tool will help get your brand specific color information from any website, image, or app in Google Chrome.

This extension was originally made for the colors and grades of IBM Design Language, but we have future dreams:

• Plug-n-Play your brand's palette
• Support operating systems instead of browsers
• Add a keyboard shortcut

Can you help?

Download from the Chrome Web Store

How to test unreleased versions

This tool is still in testing stages and is not yet ready for the Google Chrome Store and it only works with IBM Design colors. However, it doesn't mean you can't get your hands on it and use it. In fact, please do so this tool can evolve quicker and better!

Here is how to add this extension to your Google Chrome browser:

1. Download the dist.crx file.

2. Once downloaded, go to your extensions panel: chrome://extensions/.

3. Drag and drop the downloaded .crx file onto the extension panel.

4. Chrome will ask you if you want to give Spongy permissions to read and modify content you're viewing. Click 'Add extension'. Don't worry, it's not malicious. All Spongy needs this data for is to read the pixel color information on pages you're viewing and display on the extension UI.

5. Enjoy Spongy! If you encounter any problems or bugs please submit an issue and if you would like to contribute read the guide.