search

TribalDev / tribal_blog

Tribal dev's blog
tribaldev.io
1 stars 0 forks source link

Color scheme #17

Open salexzee opened 9 years ago

salexzee commented 9 years ago

We have way, way, way too many different colors in the app right now and we also need to consistently use only 1 way to choose colors. We need to make a few choices on how we'll be doing the styling from here on out.

Colors Which way do you all prefer to style colors?

HSLA ex. hsla(0, 100%, 50%, 1.0) RGBA ex. rgba(255, 0, 0, 1.0) HEX ex. #ff0000 *These are all the same shade of red

We currently have a mix of all three plus a few actual color name values (ex. white or black). My vote is that we use HSLA. HSLA is a little bit odd at first, but you get a lot of control over exactly what the color will look like.

Also, we need to come up with a color scheme. We have way too many different colors in the CSS. I'm thinking we need to narrow it down to a Primary(light & dark) and a Complimentary color(light & dark) along with white, black and 2 shades of gray. Currently we have 13 different color values in the CSS and I think bringing it down to 8 specific shades would do us well. The pink we currently have is way too bright and it kind of strains the eyes when on either a dark or light background.

jaeming commented 9 years ago

I've started trying to narrow down the colours and centralising the variables for them. It's not quite there yet but we'll get there. We need to be sparing with the strong colours. The electric pink, which I've now toned down a bit so it's easier on the eyes, is a very strong colour. Aside from out logo, we should use this for links, buttons, any kind of active functions or things we want to get draw attention to.

I have a muted version of this in the variables which is a bit like pink. This can be refined. Our dark color (the nav background and footer) is great for contrast. I've put it in the variables as color-dark.

I've checked the color wheel and the opposite color for pick (if we want to use it) is something like a turquoise shade. Again we don't have to use it and again I think we should do so sparingly if so, so it doesn't over-dominate (it needs to be somewhat balanced with the pink).

I've been looking for pages that use a similar color scheme. Please take a look:

http://www.webdesignserved.com/gallery/Only-Infographics-Web/15653071 http://www.webdesignserved.com/gallery/DELAPUT/23400469 http://www.webdesignserved.com/gallery/Dashboard-UI-Design/24203109 http://www.webdesignserved.com/gallery/Divorce-Expert/22883165

I think we've basically got it right with the pink and the dark. Working in the turquoise would be a bonus but I don't think we need to overcomplicate it.

I want to maybe draw some stuff (with css) for different areas/call to actions in the future possibly.

Several months ago I tried my hand at drawing icons only with css: http://codepen.io/jaeming/pen/Cctav This could be kind of fun to try.

jaeming commented 9 years ago

I threw in some ugly pink on the links as the links in the posts were not very visible. It kind of adds more theme overall on the site but the shade is not quite right maybe.

I mention this in the other comment but please, anyone with a mock-up or theme suggestion, put it forward. We've got a nice vanilla web space going here but I think it definitely needs more of a theme.