CSS Colors

cssColors.js

(function () {

	var colorRegex = new RegExp([
		'#[A-F0-9]{6}\\b', // #666666
		'#[A-F0-9]{3}\\b', // #333
		'rgb\\s*\\((?:(?:\\d{1,3}\\b\\s*,\\s*){2})\\d{1,3}\\s*\\)', // rgb(1, 2, 3)
		'rgba\\s*\\((?:(?:\\d{1,3}\\b\\s*,\\s*){3}(?:\\d|\\d?\\.\\d+))\\)' // rgba(4, 3, 2, 1.0)
	].join('|'), 'i');
	
	var toHex = function (num) {
		var hex = parseInt(num).toString(16);
		return hex.length === 1 ? '0'+hex : hex;
	};
	
	var isBlack = function (hex) {
		var r = parseInt(hex.substr(1, 3), 16),
			g = parseInt(hex.substr(3, 5), 16),
			b = parseInt(hex.substr(5, 7), 16);
		return 255 - (r * .299 + g * .587 + b * .114) < 105;
	};
	
	var normalizeColor = function (color) {
		var parts;
		if(color.charAt(0) !== '#') {
			parts = /rgba?\s*\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*/i.exec(color);
			color = '#'+toHex(parts[1])+toHex(parts[2])+toHex(parts[3]);
		}
		else if(color.length === 4) {
			parts = color.substr(1).split('');
			color = '#'+parts[0]+parts[0]+parts[1]+parts[1]+parts[2]+parts[2];
		}
		return color;
	};
	
	var getColors = function (rule) {
		var str = rule.cssText;
		var parts = str.split(colorRegex);
		var color, part, next, idx;
		
		for(var i = 0, len = parts.length; i < len; i++) {
			color = '';
			part = parts[i];
			next = parts[i+1];
			if(next) {
				str = str.substr(part.length);
				idx = -1;
				while(true) {
					idx = str.indexOf(next, idx+1);
					if(idx !== -1) {
						color = str.substr(0, idx);
						if(colorRegex.test(color)) {
							colors.push(normalizeColor(color));
							str = str.substr(color.length);
							break;
						}
					}
					else break;
				}
			}
		}
	}
	
	var traverseRules = function (rules) {
		for(var i = 0, rule; rule = rules[i]; i++) {
			if(rule.styleSheet) {
				traverseRules(rule.styleSheet.cssRules);
			}
			else {
				getColors(rule);
			}
		}
	};
	
	var colors = [], i, len, sheet, c;
	for(i = 0; sheet = document.styleSheets[i]; i++) {
		traverseRules(sheet.cssRules);
	}
	
	var counts = {}, count;
	for(i = 0; c = colors[i]; i++) {
		count = counts[c];
		counts[c] = count ? count + 1 : 1;
	}
	
	colors = [];
	for(c in counts) {
		if(counts.hasOwnProperty(c)) {
			colors.push({
				count: counts[c],
				color: c
			});
		}
	}
	
	colors.sort(function (a, b) {
		return b.count - a.count;
	});
	
	sheet = document.createElement('div');
	for(i = 0; c = colors[i]; i++) {
		sheet.innerHTML += '<div style="padding: 4px; background: '+c.color+'; color: '+(isBlack(c.color) ? '#000' : '#fff')+'">'+c.color+': '+c.count+'</div>';
	}
	sheet.onclick = function () { sheet.parentNode.removeChild(sheet); };
	sheet.style.cssText = 'position: absolute; top: 8px; right: 8px; background: #fff; border-radius: 8px; border: 2px solid #000; padding: 8px; font: 14px/18px monospace; cursor: pointer;';
	document.body.appendChild(sheet);
	
})();