Which CSS color format is rendering faster?

Question

I'm assuming that a browser, internally, has a method to create it's default color format from user css file input, that it can interpret. If I write the following css rules, I think they will point to the same format.

<style>
.style {
    color: red;
}
.style {
    color: #f00;
}
.style {
    color: #F00;
}
.style {
    color: rgb(255,0,0);
}
</style>

will result in

<style>
.style {
    color: #FF0000;
}
</style>

The question might be a little off, but shouldn't the browser render a webpage faster if the color style is it's default format?

Also this website has very cool comparison charts against each browser..jsperf.com/css-color-names-vs-hex-codes/18 — planet260
– planet260, Commented Mar 6, 2015 at 13:04
@planet260: thanks for the link. it seems it's very hard to test the theory. — machineaddict
– machineaddict, Commented Mar 6, 2015 at 13:18
Did you try editing the test.. You can run test on different browsers to see if there is any difference... I just ran it for my Browser Chrome.. You can see the results here.. jsperf.com/css-color-names-vs-hex-codes/20 — planet260
– planet260, Commented Mar 6, 2015 at 13:20
Possible duplicate of Performance differences between color declarations? — ADJenks
– ADJenks, Commented Jul 23, 2019 at 17:33

nu everest · Accepted Answer · 2017-03-28 16:05:12Z

3

Here are the results including color names, short hex, hex, rgb, rgba, hsl, and hsla. You can run the test yourself here.

answered Mar 28, 2017 at 16:05

nu everest

10.4k12 gold badges76 silver badges94 bronze badges

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

Collectives™ on Stack Overflow

Which CSS color format is rendering faster?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related