CSS color names vs hex codes (v19)

Revision 19 of this benchmark created by Juliano Moraes on

Preparation HTML

<div style="background-color: red">
    <div id="one">d1</div>
</div>
<div style="background-color: green">
    <div id="two">d2</div>
</div>
<div style="background-color: blue">
     <div id="three">d3</div>
</div>

Setup

var d1 = document.getElementById('one').style;
    var d2 = document.getElementById('two').style;
    var d3 = document.getElementById('three').style;

Test runner

Ready to run.

Testing in
TestOps/sec
color names
d1.backgroundColor = 'red';
d2.backgroundColor = 'green';
d3.backgroundColor = 'blue';
ready
short hex codes
d1.backgroundColor = '#F00';
d2.backgroundColor = '#0F0';
d3.backgroundColor = '#00F';
ready
long hex codes
d1.backgroundColor = '#FF0000';
d2.backgroundColor = '#00FF00';
d3.backgroundColor = '#0000FF';
ready
rgb codes
d1.backgroundColor = 'rgb(255,0,0)';
d2.backgroundColor = 'rgb(0,255,0)';
d3.backgroundColor = 'rgb(0,0,255)';
ready
rgba
d1.backgroundColor = 'rgba(255,0,0,1)';
d2.backgroundColor = 'rgba(0,255,0,1)';
d3.backgroundColor = 'rgba(0,0,255,1)';
ready
hide width
d1.width = '0';
d2.width = '0';
d3.width = '0';
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.