Extract Colors from CSS Code

css-color-extractor_1191268352898.pngGetting 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!

Explore posts in the same categories: CSS, User Interface

9 Comments on “Extract Colors from CSS Code”

  1. Great stuff! I’ve always wanted a tool to do this, and hadn’t seen the redalt tool before either.

  2. 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.

  3. Rich Says:

    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

  4. 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!

  5. […] 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. […]

  6. Smudge Says:

    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!


    Thanks and happy coding 🙂

  7. I love it! Very useful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: