Use the same shade of red everywhere

[ccordoba12]

The current color for icons, buttons, etc is a shade of orange that I think we took from the hugo-icon theme. However, this color is different from the snake color in the Spyder logo.

So the idea is to use the same shade of red everywhere (logo, icons, buttons, etc). Let's go with @jnsebgosselin's suggestion of

rgb(255, 33, 33).

@dalthviz, please work on this one.

[ccordoba12]

@CAM-Gerlach, please also help us to update the banner with that color. @dalthviz will take care of the rest.

[CAM-Gerlach]

@ccordoba12 In work now...will also push to the readmes after getting it done for the site itself.

[jnsebgosselin]

I may be just a typo on @ccordoba12 part, but my suggestion was not rgb(255, 33, 33), but rgb(225, 33, 33).

[jnsebgosselin]

The Open Collective banner is rgb(210, 40, 40) btw.

[ccordoba12]

Sorry, it was my mistake. I didn't copy the value from your comment correctly.

However, after seeing your three screenshots above, I think I like 255, 33, 33 better than 225, 33, 33. The first one looks more vibrant.

@CAM-Gerlach, what do you think?

[ccordoba12]

The Open Collective banner is rgb(210, 40, 40) btw.

We'll change that to use the same shade of red too.

[ccordoba12]

I tried 255, 33, 33 in several places in the website and it doesn't look good. I mean, it's too close to the Youtube icon color.

So I think we should go with @jnsebgosselin suggestion of 225, 33, 33. @CAM-Gerlach, sorry for making you waste your time with this one.

[jnsebgosselin]

@ccordoba12 you are right. In retrospec, I also think that the rgb(225, 33, 33) looks too flat and I also agree that rgb(255, 33, 33) looks more vibrant.

Here is another test also with rgb(238, 28, 36).

[jnsebgosselin]

I tried 255, 33, 33 in several places in the website and it doesn't look good. I mean, it's too close to the Youtube icon color.

Ok, I understand. So it looks good when used only for the snake, but when there is too much of it, it is too flashy?

I've updated the image in my comment above to show better the various options we discussed so far.

[ccordoba12]

but when there is too much of it, it is too flashy?

Yes. it's too flashy.

I'll try 238, 28, 36 and let you know.

[ccordoba12]

238, 28, 36:

225, 33, 33:

---

I think 238, 28, 36 looks better. @jnsebgosselin, what do you say? We need to decide this now because we need to make these changes today (please see Gitter about the reason).

[jnsebgosselin]

I think that both options look great. I'm undecided really...

My colleague who is doing a lot of web design said to me that the colors are not that important. It is the contrast between the different colors that is.

So I did some test here: https://contrastchecker.com/ to check the contrast between different shades of red and the gray color of the spyder web in the logo and here are the results:

rgb(238, 0, 0) vs rgb(48, 48, 48) : 2.91
rgb(255, 33, 33) vs rgb(48, 48, 48) : 3.45
rgb(238, 28, 36) vs rgb(48, 48, 48) : 3.03
rgb(225, 33, 33) vs rgb(48, 48, 48) : 2.79

So I vote for rgb(238, 28, 36) because it makes the contrast of colors better in the logo, while not being too far away from the original design.

[jnsebgosselin]

These are additional tools that maybe can help you to choose... or not...

https://color.adobe.com
http://paletton.com

[ccordoba12]

Ok, thanks @jnsebgosselin! Then 238, 28, 36 it is.

@dalthviz, please use that color for our icons and links.

[CAM-Gerlach]

Sorry, just got to this after getting home form work; I was going to suggest something along these lines. I can't really tell the difference between the colors even right next to each other, but it makes the snake in the logo look much sharper. I'll implement momentarily and push all the changes again.

[CAM-Gerlach]

I take it we'll also be updating our logo itself in all the various places to match?

[ccordoba12]

Yes, we need to do that too.

[CAM-Gerlach]

I did it for the docs, and if you want I can do it for the banner image as well; I have both the logo and the text already for the former so I'd just need to reposition it for the latter. I could also ensure it was small caps like the banner for the reasons outlined in spyder-ide/spyder-docs#19 .