New bookmarklet: !usedcolors (drag to Links-bar)
This opens a new window with a listing of all hex colour values specified in the current webpage's source and in its stylesheets. Internet Explorer-only at the moment.
Remaining bugs:
- doesn't read stylesheets linked with "@import";
- mistakes entities like { for colour values;
- doesn't detect colour values specified in words or in rgb() syntax;
- thinks #ffffff and #FFFFFF are two different colours.
Here's the hacked-together source code:
javascript:void(S=document.body.innerHTML.replace(/href="[^"]*"/g,'').replace(/&#[0-9]{3,6};/g,''),sS=document.styleSheets,w='<tt>',L=new Array());for(i=0;i<sS.length;i++){void(S+=sS[i].cssText);}if(K=S.match(/#[0-9a-f]{3,6}/gi)){for(k=0;k<K.length;k++){if(!L[K[k]]){w+=L[K[k]]='<body bgcolor=#c0c0c0><div style="border-left:20px solid '+K[k]+';color:'+K[k]+'"> '+K[k]+'</div>'}}void(window.open().document.write(w));}else{void(alert('No colours found.'))}
Basic procedure:- collect innerHTML of body and cssText of each stylesheet in one big string var;
- extract all hex values from that string;
- add each hex value to generated html page as a div using that colour (but only if not already added);
- open new window and fill it with generated html page.
document.styleSheets[i].cssRules[j].cssText instead of document.styleSheets[i].cssText, which returns 'undefined'.
Update:
I made a separate Mozilla-compatible version that also catches rgb() values. This one doesn't work in IE6 for some reason even though it should, perhaps it exceeds a bookmarklet/url-length limit. It does work in IE5.5 however:
!usedcolors_moz (drag to Links-bar)
Also, Mozilla seems to turn hex values into rgb() values.