Using Color effectively as a Web Designer

I am an intending web developer so I am currently learning new things here. In my experience, I find out that knowing how to use and combine colors allows developer create professional website.

So how do I go about it?

one fairly systematic approach is that of material design, described here:

There are handy tools like this one:

But since this is art, you could take many approaches and material design is only one. I would encourage you to dig deeper.

A handy tool I like to create color palettes is:

1 Like

Speaking as someone who have studied graphic design, I can definitely say both graphic and web design share the similar principles and theory in design.

However, from what I have been told through friends that they can never find a course or book to study design principles and theory in web or if they do, it is heavily based more in coding (HTML & CSS) and I agree having search for them (unless I did a poor job lol)

The reason I am saying this is even though, I do not know what is the best resource at this moment, search for resources or courses that teach about basic design principle in graphic design because I do know there is many of resources for it, especially books.

If it covers topics in
• colour theory
• grid & layout
• typography
• spacing
• imagery

then that is all you need. You will not need to learn anything that is involved print and physical design like packaging.

If I find do find a resource or course then I will let you know :slight_smile:


Hey @passive, if you want to learn colors I suggest starting with RGB & HSL. Specifically you need to understand:

  • Why RGB?
  • What’s HLS (and why RGB is a poor representation of color)?

Then try locking any 2 parameters of HLS and change the third one to see how it affects color. You can do it here:

Next step, find out what are shades, tones and tints and try monochromatic design :wink:

Good luck!

1 Like

Thanks so much Sir/Ma.

Thank you ma’am. I have always try to learning it by searching for various PDF materials - but I couldn’t find a genuine one, those I find are a little bit deviating.

I will appreciate any materials you recommend - and if you come across one, please feel free to share with me.


Thank you Sir. I will endeavor to check it out.

I’m horrible at designing and I find the following helpful to fill that gap in my colour choosing skill:

RefactoringUI: Building Your Colour Palette

I bought the book and I find it helpful at helping non-designers to learn fundamental concepts for building and designing nice-looking UIs.

1 Like

Just stumbled upon this book recommendation from yesterday’s sitepoint newsletter:


I have to admit that looks good and definitely worth checking out since it covers what a web designer need to know :slight_smile:

1 Like

Sorry for the delay response.

Thanks for assisting me.

I try downloading from the link you posted but it seems to be impossible, so that, I simply name it to Google, hurray!!! I download it.

However, we all have the spirit of marketing (lol).

1 Like

I just checked out the content and it definitely covered wide range of useful topics. @michaelsndr thank you very much for mentioning this book, I shall have a good long read with popcorn and tea tonight :slight_smile:

@passive I hope this will help you very much in your journey. Enjoy it! :slight_smile:

1 Like

Yeah sure, I just skim through most of the content, in fact op is truly bless for sharing this learning material. The content is really worth it.
At a particular page, it mentions the golden ratio (x/1.62) in which I could use in the past.
Now I will install illustrator and photoshop to aid my design.

Thank you Magdalena, it’s nice meeting you.
Mind you, I will update you on my progress in the course of learning.

cheers, :grinning::smiley:

1 Like

This may not be what you are looking for but this is an amazing site to get help on what colors to use on your site based on an image specifically your banner.

Alright thanks, I will check it out

1 Like