CSS color methods performance (v24)

Revision 24 of this benchmark created 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
hsla
d1.backgroundColor = 'hsla(0, 100%, 50%, 1)';
d2.backgroundColor = 'hsla(120, 100%, 50%,1)';
d3.backgroundColor = 'hsla(240, 100%, 50%,1)';
ready
hsl / a
d1.backgroundColor = 'hsl(0 100% 50% / 1)';
d2.backgroundColor = 'hsl(120 100% 50% / 1)';
d3.backgroundColor = 'hsl(240 100% 50% / 1)';
ready
long hex codes + alpha
d1.backgroundColor = '#FF0000FF';
d2.backgroundColor = '#00FF00FF';
d3.backgroundColor = '#0000FFFF';
ready

Revisions

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