Differences between white, #fff, #ffffff, rgb(255,255,255) and rgba(255,255,255,1) for "color" property

[CosticaPuntaru]

i'm actually curios if there is a difference in performance between them, or other differences :+1:

[iliutastoica]

white, black is faster

well, jsperf says otherwise https://jsperf.com/css-color-names-vs-hex-codes

[CosticaPuntaru]

any reason why? i don't get whie color: white vs color #fff is better and is there a difference between color: #fff and color: #ffffff? or rgb(255,255,255)

[morarasu-alexandru]

rgba(255,255,255,1) should be slower since it also has opacity .... or not. We will see

[CosticaPuntaru]

rgba is clearly the slowest of them but it has alpha, if you need it you don't have other choice, or? is background: white; opacity: 0.5 better then background: rgba(255,255,255,0.5)?

[iliutastoica]

http://stackoverflow.com/questions/11620719/efficiency-of-color-selection-in-html-rgb-vs-hex-vs-name

[iliutastoica]

when I used grunt with csscompress, all the colors were changed to name colors (arounf the time I was working on jetbull ufe) and there was an article back then, but now it appears hex is faster.

[CosticaPuntaru]

first of all, lets make it clear, the differences are extremely small, so small that can be totally ignored in a real project, but for fun i want to know. plus like iliuta says, we have build tools that does the conversion for us

[morarasu-alexandru]

From stack overflow about this subject from someone who indeed tested:

[morarasu-alexandru]

"Using names, the page rendered in an average of 41.6ms; using hex values: 14.5ms. Given how simple the test page is, with only two colors, I feel that's a pretty significant difference."

[CosticaPuntaru]

are there any tests for hex vs rgb?

[CosticaPuntaru]

from a small research looks like hex> rgb, colors in computers are stored in hex values, the rgb needs to be converted from DEC to HEX, its a small overhead but hex is better :P

[StefanVlad]

:+1:

[CosticaPuntaru]

ill close this issue as the debate was already made, should be clear, tl;dr: hex is better then others from the performance point of view

[cppatel07]

diffrence btwn #fff vs #fffff ?

[ViorelMocanu]

diffrence btwn #fff vs #fffff ?

#fffff is going to throw an error. Notice there are 5 symbols after # - not 6. #fff is the shorthand of #ffffff where each value is doubled, so #123 is the equivalent of #112233

[CosticaPuntaru]

diffrence btwn #fff vs #fffff ?

if you use any type of post processing like sass.scss it will pick the best output, ignoring the way you write it, if you don't use any. there is no difference for browser between #fff and#fffff, the only difference is that fff contains 3 letters and ffffff 6 letters, adding 3 more unneeded characters to the downloaded css file