CSS CSS rendering performance: RGBA vs HEX vs OPACITY

A designer always provides CSS using opacity rather than actual color values. Does this affect browser rendering performance?

Which makes it faster, on a white background, where I really don't care about transparency.

<span>Hello</span> 
  • span {color: black; opacity: 0.7;}
  • span {color: rgba(0, 0, 0, 0.7);}
  • span {color: #b3b3b3;}

My gut says that the opacity is slower (despite the fact that it fits in the GPU), as the browser should now consider the background during rendering, so any changes will force it to redraw the object due to this transparency, and a statically colored object will never change .

+5
source share

All Articles