mike chambers | about

I am using a lot of Adobe Kuler Adobe Color themes in one of my projects. However, there is not a quick way to get the color theme information in a format that is easy to use in code (I have been manually copying and pasting each individual color value).

I was going to write a Chrome content script, but then found out it can’t read variables from the page. So, I put together a quick code snippet that you can paste into the Chrome developer console, which will grab the colors and format them so they are easy to use in code.

To use, visit a color theme, open the developer console, and paste in the code below.

var getColorName = function () {
    return CCweb.models.theme.attributes.name;
};

var getColors = function () {
    return CCweb.models.theme.attributes._hexList;
}

var formatColorsIntoCode = function() {
    var colors = getColors();
    var n = getColorName();
    
    var n = n.replace(/ /g,"_");

    var len = colors.length;

    var out = "var " + n.toUpperCase() + " = [\n";
    for(var i = 0; i < len; i++) {
        out += "\t\"#" + colors[i] + "\",\n"
    }

    out = out.slice(0, - 2);

    out += "\n];";
    return out;
};
formatColorsIntoCode();

For example, if you view the svenska theme, open the developer console, and paste in the code, you get the following output:

"var SVENSKA = [
	"#BC2430",
	"#00A47A",
	"#73BE9F",
	"#3E1303",
	"#C1372C"
];"

If you just want to trace the array of colors, then instead of calling “formatColorsIntoCode()”, call “getColors()”;

["BC2430", "00A47A", "73BE9F", "3E1303", "C1372C"]

UPDATE (July 10, 2014) : I have created a simple bookmarklet for Chrome that makes it easier to grab the colors. Just drag this link : Color2Code to your bookmarks bar. Whenever you are viewing an Adobe Color theme, and click the bookmarklet, the colors will be traced to the Chrome developer console. (This probably only works in Google Chrome).

Of course, it would be great if you could just grab the colors in this format from the Kuler page (and Ill suggest that to the team). However, in the meantime, this can make it a lot easier to use the colors in code.

By the way, if you need access to the colors in other formats (such as RGB), take a look at “CCweb.models.theme._swatches.models” which returns an Array with more info about each color.