Member Avatar for NardCake

Hello! Me and a friend are working on a website (We have for months) we have tons of functionality working, it's just we are never happy with the look of the site which is of course one of the most important parts. It seems like everytime we redesign things we always end up with slightly different gray colors everywhere, which is kind of plain and ugly. I was just wondering what some common and nice looking colors were for some eye-candy and just making the site look generally good. Thanks for any suggestions!

  • 4 Contributors
  • 8 Replies
  • 209 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by NardCake

Dani AI

Generated

A common reason greys look "off" is that many slightly different greys are chosen ad hoc for backgrounds, borders, text and UI chrome. Building on 's suggestion to favor light palettes and 's point about palette tools, the most reliable fix is to define a small, documented color system and enforce it in code.

A practical palette strategy: one neutral scale (4–6 stops) for page background, surfaces (cards), borders and text; one primary accent for CTAs and links; optionally one secondary accent for highlights. Example token roles (hex examples shown only as a starting point): page-bg #f8f9fa, surface #ffffff, border #e9ecef, muted #6c757d, text #212529, accent #1E88E5. Keep the neutrals visually distinct: background (very light), surface (white), border (mid-light), text (dark). This prevents the "many greys" problem while keeping a clean, content-forward look appropriate for a social wiki like described.

Enforce it with variables so components never drift:

:root {
  --bg: #f8f9fa;
  --surface: #ffffff;
  --border: #e9ecef;
  --muted: #6c757d;
  --text: #212529;
  --accent: #1E88E5;
}

body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); border: 1px solid var(--border); }
a, .btn-primary { background: var(--accent); color: #fff; }

Operational tips: document the tokens in a living style guide or pattern library and import them into the build (CSS vars, Sass tokens, or design tokens). Check contrast (WCAG ratios) for all text and interactive controls, test a few color-blindness simulations, and reserve accents for actions (post, rate, upload) so user content remains the visual focus. was right to note fit with product/audience—pick accents that reflect the site's personality (energetic teal/orange for creative communities, calmer blue/green for more formal spaces).

Recommended Answers

All 8 Replies

Member Avatar for Member #949455

It seems like everytime we redesign things we always end up with slightly different gray colors everywhere, which is kind of plain and ugly. I was just wondering what some common and nice looking colors were for some eye-candy and just making the site look generally good.

This is a hard question. I be honest with you, it really depends on your client and products to determine the type of colors is suited for the websites. You also have to play around with it too. So there's no straight answer of creating a perfect blend colors.

May I ask what kind of website are you recreating, I mean gray is a nice color.

Member Avatar for NardCake

The best way to describe it is a user interactive social wiki site? Users can post projects of whatever they are creating, users can leave feedback and rate the users in progress project. There will be user interaction as well as some file hosting for projects. Quite large scale in the end thats whay we have messed with the design so many times. Thanks for the response though LastMitch!

Member Avatar for <M/>

Well, the color of your website is going to vary on what your service is. For example, if you are a restaurant, you have to use the color red because the color red makes you feel hungrier (it's a study).

Since you said your site is an interactive social wiki, try using some light colors . I maybe wrong because the color of your site, as LastMitch has said before, will have to be played with. Unless you provide us a link to your site, we can pick colors for you (but you will have to play with them).

Here are some sites that can help you pick on color schemes:
http://www.colorcombos.com

http://inspiredm.com/colour-schemes/

http://designshack.net/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme/

http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/

http://www.onextrapixel.com/2010/11/25/what-does-your-websites-color-scheme-reveal-about-you/

http://speckyboy.com/2012/11/08/50-websites-with-fantastic-color-schemes/

It would be easier if we had the link to your site, but in the mean time, I google'd all this for you... if these don't help, use google!

BTW, sometimes having a black and white site can look extremely cool you know?
http://www.hongkiat.com/blog/showcase-of-beautiful-black-and-white-websites/

Hope my post helped.

Member Avatar for NardCake

Alright thanks for the references! I will surf around a bit, thanks.

Member Avatar for <M/>

No problem, if you want (as i said before), you can show us the link to your website and we can help pick colors if you want...

Member Avatar for pritaeas

Personally, I've had the best results using Adobe Kuler.

Member Avatar for <M/>

wow, nice link pritaeas, it is better than my suggestions :)

Edited by <M/> because: grammar
Member Avatar for NardCake

Thanks for the suggestions! Especially pritaeas found some really good color combonations! Thanks again!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.