Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

A Simple Web Developer’s Color Guide

I’ve never been a fan of color theory1. I think it’s because I’ve always been a bit hopeless at it. I’d love to be able to sit there, color wheel in hand, and pick out complementary, split-complementary and triad color schemes, impressing all of my friends, family and clients in the process.

But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use color in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using color, the better I become in the theory behind it.

Further Reading on SmashingMag: Link

Of course, that doesn’t really help when you’re just starting out, does it? That’s why, in this article, you won’t see a single color wheel. Instead I’m going to show you a simple color workflow that you can use in your next web project.

You will, of course, subconsciously be learning the theory along the way. So, just for funsies (yes, I said “funsies”), I recommend coming back in a few months time and giving the theory another go.

Everything will make so much more sense then, I swear.

Choosing A Base Color Link

We can see something ridiculous like 10 million colors6 at any given time. Think about that for a second. 10 million.

And out of those, we need to choose one — just one color — to be the base of our website, for our brand.

Everything will stem from this one color, so it’s kind of important. But don’t worry: You can’t go wrong.

How to Choose a Starting Color Link

Now, picking a color out of the blue (pun intentional) would be quite easy, but we’re not going to do that. For any project in which you’re dealing with clients, you should really try to justify as many of your choices as you can. If you don’t, it’ll be a case of your favorite color versus their favorite color. They’re the client. They’re paying you. They will win.

Don’t overthink it. Just make sure you have some kind of reasoning behind your color choice (and every choice, for that matter). It’ll make you look good.

Tips on Choosing a Starting Color Link

  • Use what you have.
    If the client has a logo with an established color, that will usually be your starting color.
  • Eliminate your competitors’ colors.
    If one of your main competitors has a strong brand color, don’t copy it if you can help it. Find your competitors’ colors to eliminate them from your own color schemes.
  • Think about your target audience.
    The colors of a website for a funeral home would likely be very different from the colors for a kids club. Think about who will be using the website and how you want them to feel (excited, serious, taken care of, etc.).
  • But don’t default to stereotypes.
    If you’re designing a website for young girls, you don’t have to use pink. Avoid clichés to gain credibility.
  • Play a word game.
    If you’re struggling, write down any words that you associate with the client’s business. This list should give you some ideas for colors. If you’re really struggling, hop on any website about color meanings and see which fits best.

You should now have a base color in mind for the design. It should be something simple like red, green, blue, yellow or pink. We’ll get to the exact shade next.

Let’s say you choose blue. (Great choice, by the way!)

Choosing A (Nice) Base Color Link

Instead of messing about with Photoshop’s color-picker to find a nice shade of blue, we’re going to steal like an artist and use other people’s design choices to help us out.

First, go to Dribbble347 and Designspiration358 and click on the “Colors” link in both.

These should present you with similar screens:

Color Guide: Dribbble and Designspiration color pickers9
Use inspiration websites to find the right color for your design. (View large version10)

You can use this as the next step to find the right shade of blue.

For a fresh and energetic brand, go for one of the lighter, brighter blues (one of the top five options). For something a bit more corporate and serious, the bottom five should be a better fit.

Lighter blues for an energetic feel, darker for a corporate feel.11
Different shades of blue have different characteristics. Choose wisely! (View large version12)

Choose a shade from each website to see actual designs that use that color. You can then use any of CSS-Tricks’ color-picking techniques13 to grab the exact colors right in the browser.

Color Guide results from Dribbble14
So much blue! Your job is to pick the one you think would best fit your brand. Easy peasy! (View large version15)

Not only will you see different versions of your base color, but you will easily see colors that match.

Creating A Cohesive Color Palette Link

All right, you should now have a HEX value for your color. Mine is #30c9e8. Now we’re going to make a palette out of that color. And it’s easier than you think.

When you think of the process of creating a color scheme, you might picture things like this:

Palettes from COLOURlovers16
The kinds of palettes you’re probably used to seeing. (Image credit: ColourLovers17 palettes by manekineko18 and sugar!19 ) (View large version20)

The problem with this kind of color palette is that applying it to a real design isn’t very practical. Most palettes have way more colors than you’d ever need, especially considering that we need to add an average of three neutral colors to every scheme:

  • white,
  • dark gray,
  • light gray (optional).

If you tried to add five or six colors to the neutrals, it would be a mess. All you really need are two colors:

  • a base color (in our case, #30c9e8),
  • an accent color (we’ll get to this in a jiffy).

If you can create a website using only these five colors, you’ll get a much better result than if you were to go overboard with complementaries, split-complementaries, triads and the rest.

TedTodd and ThoughtBox’s websites have very simple color palettes21
Like Thoughtbot22 and TedTodd23, you don’t need a complex color scheme to have a great-looking website. (View large version24)

Finding Your Accent Link

Your accent color will be used in very small amounts on your website, usually as a call to action. So, it needs to stand out.

Your next step is to go to Paletton25 and type your HEX code into the color box:

Screenshot of Paletton setting base color26
Enter your base color code on Paletton. (View large version27)

From here, you can find your accent in one of two ways.

First, you could click the “Add Complementary” button and wham! That orange there? That’s your accent.

Screenshot of complementary color in Paletton28
Paletton automatically generates a good accent color for you. (View large version29)

Alternatively, if you don’t like the color it has generated, you can click around the icons at the top to find something more suitable.

Screenshot of color schemes in Paletton30
Click through to find a color scheme you like. (View large version31)

Personally, I quite like the red that comes up under the triad icon, so I’m going to use that for our scheme. There is, of course, science and stuff behind what Paletton is doing; but, for now, let’s put a pin on it. You’ll learn the theory a bit later, and all will become clear.

So, below is our color scheme as it is now. We’ve got a nice base color and a shot of an accent. Let’s add white to the mix, because white is always good.

Our color palette so far. Blue, red and white.32
Our color palette so far — already, it’s shaping up. (View large version33)

All that’s missing now are some grays.

Adding the Gray Link

For most of my web projects, I find having two shades of gray to be infinitely useful — one dark, one light. You’ll use them a lot.

The dark is usually used for text, and the light for when you need subtle differentiation against all that white (usually for backgrounds).

You can choose your grays in one of two ways:

  • You could use Dribbble347 and Designspiration358 again to find a nice gray from your previous results that matches your base color. But usually it’s easier to type blue website in the search bar, which will show more grays in the results.
  • If you have Photoshop or the like, you could use Erica Schoonmaker’s technique36 to harmonize your grays with the base color.

Creating Harmonious Grays Link

To get our shiny new harmonious grays using Erica’s method, we’ll start by picking two default grays out of a hat. Then, follow these steps:

  1. Create two shapes and fill them with #424242 and #fafafa.
  2. Insert a color fill layer above your two shapes.
  3. Change that fill to your base color (#30c9e8).
  4. Set the blending mode to overlay, and bring the opacity right down to between 5 and 40% (in the example below, it’s set at 40%).
  5. Use the color picker and copy your new values.

I should point out that this method works exceptionally well when your overlay color is blue. For any other color, you will want to either bring the opacity right down to 5 to 10% or stick with your original grays.

Before and after of more harmonious grays37
Picking grays that harmonize with the base color is a small detail that makes a big difference. (View large version38)

Voila! We Did It! Link

Our color scheme is complete. I hope you feel proud, because I sure do. Here it is, in all its glory:

Finished 5-color palette: blue, red, white, dark gray, light gray39
Our wonderful color scheme, ready to be applied. (View large version40)

Applying Your Color Scheme Link

Now that we’ve got our color scheme, it’s time to apply it. This is a whole other article unto itself. But to give you an idea, here’s a mockup of a page design in grayscale and with the colors applied.

Tip: If you struggle with color, a good trick is to create your website layout41 in grayscale first. Figure out the hierarchy, and then experiment with the color later.

Grayscale image of website layout42
Laying out your website in grayscale will help you apply the color scheme. (View large version43)
Color palette applied to a website layout44
Our color scheme in action. (View large version45)

As you can see, blue is the featured color here. It’s used on large areas and in the icons, too.

Our accent, red, stands out beautifully against the base color. This is used in very small areas, for buttons and in the icons. The less you use this color, the more it will stand out.

The dark gray is used for the text, logo and icon outlines. (Don’t skip putting the colors in your icons. It’s a small detail but makes a big difference.)

The white and light gray form the background. The light gray doesn’t have to be here at all, but I find it is another small detail that really makes a website look polished.

It is important to note than when using color and text you need to ensure that there is sufficient contrast between the background and the copy. This will help people with color blindness or low vision read the text on your website. There are many tools you can use to find colors that comply with the WCAG Guidelines46. Two popular ones are the WebAim Color Contrast Checker47 and Contrast Ratio48 by Lea Verou49.

Color Guide Final Note Link

As you can see, we really don’t need much more than the palette we’ve created today. But that doesn’t mean you are limited to these colors, oh no!

Extended version of our color palette50
Using the techniques above, you can extend your color palette to hold more colors as and when you need them. (View large version51)

As you’re designing, you might decide it’s appropriate to introduce some more colors to your palette. That’s totally fine! As long as you’re attentive, you can use the steps above to find more colors that work with your scheme.

The beauty of this is that the more you do it, the better you’ll become at choosing colors. You’ll get to know what works together and what doesn’t. Sometimes, the method above will yield results that are less than desirable, so feel free to tweak things. Play around and have fun learning color theory52, without the theory!

(rb, jb, ml, al)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19!/loveNote
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52

↑ Back to top Tweet itShare on Facebook

Laura Elizabeth is an independant designer with a hankering for cross stitch and rockets. She also runs Design Academy which aims to help developers conquer their fear of design (

  1. 1

    That was a really useful article for me.
    Thank you!

  2. 3

    Your red colour almost blends in with the blue in the greyscale view, which means colourblind people won’t see it pop at all. In my opinion it’s contrasting poorly in colour view as well because the brightness of the two colours is too similar, would probably work better with a darker red that better contrasted the bright blue.

    Other than that it’s a nice guide.

    • 4


      April 5, 2016 7:00 pm

      That depends–I have red-green colorblindness, and can distinguish the red from the light blue easily. If the background was dark blue or black, it would be much more difficult. Green for me tends to disappear into yellow or orange or brown, depending.

      For a project I’m working on now, I used Palleton to pick colors. I started with a color I could see and let it automatically generate some matching colors, which is less bad than having me do it by eye.

    • 5

      Yes, hue alone is not enough to provide good contrast and harmony. There’s also value and saturation to consider. That’s why, for me anyway, these online color tools just don’t work. Palletton I still found somewhat usefull because it provides different shades…but I dont use it, so…meh.

    • 6

      Good point, I’ve added a couple of contrast checker tools in the article. Thanks for pointing this out.

  3. 7

    But no mention of Adobe Color?

  4. 9

    Keshav Naidu

    April 5, 2016 10:08 am

    I found the simplest site which helped me a lot on every design.


  5. 11

    Amber Jabeen

    April 5, 2016 10:15 am

    Brilliant article. A great help.

  6. 13

    “That’s why, in this article, you won’t see a single color wheel.”
    This was a lie, great article though!

    I think is also a nice tool to use.

  7. 16

    Jes Constantine

    April 5, 2016 12:16 pm

    Thank you for a fantastic, tangible color workflow! I wonder if you would consider adding or referencing a color contrast checker for making color schemes accessible?

  8. 17

    Vali Hutchison

    April 5, 2016 12:54 pm

    Great article – like the emphasis on the base colour and keeping the rest simple. Also handy tips on getting complimentary greys.

    Once I’ve created a colour scheme I like saving them as a palette in for ref to come back to.

  9. 18

    Superb article, there should be more like this! Simple and straight to the point with action points you can instantly put into practice!

    Thank you

  10. 19

    Oh, very useful! I’m going to definitely give this a spin on my next project.

  11. 20

    What a great read… you make it sound so simple.

  12. 21

    Nice article. That overlay method for creating harmonious greys is particularly helpful!
    I’d love to know the ‘science’ behind Paletton’s complimentary color tools.

  13. 22


  14. 23

    Rahul Hareendran

    April 5, 2016 6:35 pm

    This is a fantastic article. A well written, methodic and scientific approach to creating beautiful designs. Thank you!

  15. 24

    Solid article Laura! Those of us who are more “developer” than “designer” can really struggle with this. I often can see it in my head but have a hard to turning that into a design where I don’t have the same issue with coding. I will definitely check out the related links in your article.


    Joe Suchy

  16. 25

    Simple web designers every where thank you.

  17. 26

    A site that looks like this should not be making any guides on anything web-related.

  18. 27

    Josh Adkins

    April 6, 2016 3:31 am

    Very useful article! I’m always finding it difficult to find a process for choosing my color palette.

  19. 28

    Thanks for a well written, colourful article.

  20. 29

    Love this! Definitely going to use it in my next project! :)


  21. 30

    On this topic, I’ve got a beta of a little tool up that may be useful for others – it does stuff that I don’t see other palette tools doing (notably export to adobe swatch exchange, JSON, codepen, and using triangles for exploring color spaces) – – feedback super welcome!

  22. 31

    “We can see something ridiculous like 10 million colors at any given time.”

    I’m afraid that’s just not true.

  23. 33

    The Creative Commons licenses for the two ColourLovers palettes you used require attribution, including a link to the license. See

  24. 35

    Thanks for a great article. Many times I was beginning to read about color schemes and only your article puts the dot for me in the question of choosing colors for website.

  25. 36

    Armando Reixa

    April 7, 2016 12:20 am

    pitty you didnt credit some images you used. Colour lovers is a great resource and clarly deserves it

  26. 38

    Fantastic!! The process you explained is simple. Great article

  27. 39

    very usefull and Interesting stuff for web designers and developers.

  28. 40

    Vikrant Negi

    April 8, 2016 6:14 am

    I’ve looking for tutorials like this and haven’t found a good one, until now. Good job. Loved it. Thanks.

  29. 41

    Mikael Andersson

    April 8, 2016 6:44 am

    What a great article, very useful…comes to help me a lot

  30. 42

    There is a reason for studying colour theory and unfortunately sometimes you can make things too simple. There’s nothing wrong in principle with having a bright, highly saturated colour for your brand, but using it as a background for a large area of web page is risky..!

  31. 43


    It can be done with javascript ? (mostly for grey colors)

  32. 46

    Great article ! I loved it, thanks

  33. 47

    Murali Nunna

    April 12, 2016 4:38 am

    This is excellent stuff. Thanks for sharing this. This is like a caffeine shot to me in the mornings. :)

  34. 48

    Praveen Puglia

    April 12, 2016 5:45 am

    I am gonna use this for my all upcoming projects. Thanks so much for the lovely post. I was really stuck with choosing grays and complimentary colors.

  35. 49

    I can never decide on a colour scheme when I design new websites. I always find myself changing it because I see a nice colour somewhere else, but this is a great guide and I’ll be sticking to my colour palettes from now on.

  36. 50

    Emile Jobity

    April 12, 2016 9:43 pm

    thank you very useful

  37. 51

    Was useful for me. This article helps explaining my color choice to clients and organize my color workflow. On point! Thank you!

  38. 52

    Great article! The more you know…

  39. 53

    Great article! Very informative and practical. I learnt a lot.

  40. 54

    Nicholas Dobie

    April 15, 2016 4:04 am

    Loved this article! Learned a lot of tricks to designing palettes that I never would have thought about. If anyone is interested, I was inspired by the mockup section of this article to create a tool to make it really easy to test your palette out.

  41. 55

    what a great post in the real sense of the words, that is what i have been searching for years…

    Thanks a ton…

  42. 56

    Probably just me but that red is just to strong for that blue.

    Eye strain rape

  43. 57

    Great article but terrible grammar in that headline.

    Is this a guide for “simple” developers? Maybe it’s a guide to “simple color” for web developers. Or maybe it’s .. nevermind.

  44. 58

    nice article! I made a Simplified Chinese version for this.

  45. 59

    Dennis Nilsen

    April 19, 2016 1:28 pm

    That’s why, in this article, you won’t see a single color wheel.

    Fairly sure those screengrabs of the Paletton website = Colour wheel

  46. 60

    Hi, thanks. Your article is very useful for helping me to design.

  47. 61

    Andrey WordPress developer

    April 29, 2016 9:04 am

    After two days of googling for articles on color theory this is the first articles that i found to have substance and easy to follow tecniques to produce something useful. Tutplus articles were the worst, all fluff. Thanks Laura <3

  48. 62

    The color contrast accessibility requirements should be at the very top! No sense in picking colors only to realize you have to change them later. I’m a big fan of this tool which allows you to see the thresholds you have to work with:

  49. 63

    I built a little tool based on this awesome article.
    It’s here:

    So you define a primary colour. It generates secondary colours based on complementary, adjacent, triad and tetrad algorithms. Then you can pick up to 3 secondary colours.
    The palette includes 4 shades of grey, tinted with the primary colour, you can adjust the level of tinting.
    It then generates a colours palette with dark and light variations for primary and secondary colours.
    You can copy the hexadecimal codes from the SCSS thing at the bottom of the page.

    It can be improved, by adding fine tuning for every colour. But it’s a quick shot that does its job.

  50. 64

    Frankly, i have never found it useful when trying to use colors in my projects. somewhere all of us believe that the better we get choosing and using colors, the better we understood the theory behind it….


↑ Back to top