Pulling colors out of a CSS file using Javascript

Question

I'm uploading a css file from which I hope to log every color that is referenced.

So if the css file has {background-color:#ffffff; color:#000000;} , I hope to be able to create a list consisting of: #ffffff, #000000.

What would be the best way of doing this?
The project I am working on is on GitHub if you would like some reference: https://github.com/yeremenko/farbe

Thank you in advance for any help you might provide!

function getFileContents () {
    var reader = new FileReader();

    reader.onload = function(contents) {
        var fileContents = contents.target.result;  //Stores file contents
        var singleColor  = /*magic*/;

    };

    reader.readAsText(selectedFile);            //Gets file contents into string

};

getFileContents();

Dropout · Accepted Answer · 2014-02-26 08:47:09Z

1

I'm not sure if this answers your question completely, but if you have the CSS file and you can read it's content, then you can simply parse out the colors. Just keep in mind that there are more types of color specifications inside CSS.

Examples:

#FFFFFF or #FFF as hexadecimal specification;

regexes: #[0-9aA-fF]{3} and #[0-9aA-fF]{6}

(255,255,255) or (255,255,255,1) as RGB or RGBA specification

regex: \([0-9]{1,3}( *, *)[0-9]{1,3}( *, *)[0-9]{1,3}( *, *[0-1]{1}(\.[0-9]*)?)\)

white as a color name specification

This might be a bit difficult - finding these would be probably easiest by forming a list of the available color names in CSS and looking for them separately.

With this in mind you can for example execute

var cssContent = cssFile.readContent(); // get the file into a String
firstPattern = "/`#[0-9aA-fF]{3}/g";
var matches = firstPattern.exec(cssContent);
while(matches!=null){
    // append to your output
}
//and so on for other patterns

Hope it helps at least a bit!

answered Feb 26, 2014 at 8:47

Dropout

14k10 gold badges59 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dropout Over a year ago

@Sergey were you asking also about acquiring of the CSS file and reading?

Sergey Over a year ago

Hey @dropout Thanks a lot for the help! I will try it out and get back to you but it looks great. I am able to read the file using reader.readAsText(selectedFile);

Sergey Over a year ago

the regexes #[0-9aA-fF]{3} and #[0-9aA-fF]{6} seem to also be matching with #footer and #result. Any idea why this would happen?

Dropout Over a year ago

@Sergey this shouldn't happen, there's no reason to match them. Try changing it to #[0-9aA-fF]{3}( *)?; and #[0-9aA-fF]{6}( *)?; that will also check if there's a semicolon after the color - IDs never have a semicolon behind them.

Collectives™ on Stack Overflow

Pulling colors out of a CSS file using Javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related