CSS color names vs hex codes (v21)

Revision 21 of this benchmark created by Pierre Reimertz on

Preparation HTML

<div id="one">d1</div>
<div id="two">d2</div>
<div id="three">d3</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
hsl
d1.backgroundColor = 'hsl(0, 100%, 50%);';
d2.backgroundColor = 'hsl(120, 100%, 50%);';
d3.backgroundColor = 'hsl(240, 100%, 50%);';
ready

Revisions

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