Extract Colors from CSS Code
Getting the colors right in CSS can be a bit of a pain without the right tools. An interesting tool I came across extracted the colors from a published site.
But I needed something (easy) to use in development. So I wrote a little tool I’d like to share with you!
So I present to you the CSS Color Extractor, where you can copy and paste CSS code, and it will visually display to you the results of the colors. For this 0.1 release, it’s pretty simplistic – it simply finds #[0-9a-zA-Z] in a closure ({}), and it’s all written in Javascript.
I hope it’s helpful to you as you do development – where my pages wouldn’t have to be published. I’d love feedback, too.
Particularly, if anybody has good ideas of a better way to sort hex values to get the colors in a more useful order, let me know!
October 1, 2007 at 5:39 pm
Great stuff! I’ve always wanted a tool to do this, and hadn’t seen the redalt tool before either.
October 1, 2007 at 7:05 pm
Extract Colors from CSS Code
Copy and paste CSS code, and it will visually display to you the results of the colors inside it. Great for visualizing color schemes or finding mysterious colors in long css pages.
October 2, 2007 at 12:04 pm
If you run Firefox, install the webdeveloper extension, click the Information menu and select View Color Information. That does the same thing based on whatever page you have displayed in the browser. -Rich
October 2, 2007 at 1:10 pm
I came up with some code that sorts it in a much better way, however it’s a bit of a mess right now and can be refactored, so I’ll tidy it tonight and post it for you tomorrow. I like what you did though!
October 15, 2007 at 11:50 am
[...] Anuncio de la herramienta: http://hackd.wordpress.com/2007/10/01/extract-colors-from-css-code/ [...]
October 17, 2007 at 3:40 am
[...] Anuncio de la herramienta: http://hackd.wordpress.com/2007/10/01/extract-colors-from-css-code/ [...]
May 9, 2008 at 7:39 pm
[...] De las decenas de herramientas que he visto para extraer los css que utilizas en una página, esta es quizás la más simple, pero también la mas practica: CSS Color Extractor… El post del autor. [...]
July 30, 2008 at 4:01 am
Very impressive, especially on pages with multiple sheets and buried colours – exactly what I was looking for.
I gave up trying to use CSSVista.
You may also be impressed with a classic site http://www.colorblender.com and a new one I am raving about as it makes a palette from a picture, very handy and very accurate!
http://www.pic2color.com
Thanks and happy coding