Menu Search
Jump to the content X X
Smashing Conf New York

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. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

A Simple Web Developer’s Guide To Color

I’ve never been a fan of color theory. 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.

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 colors1 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 Dribbble292 and Designspiration303 and click on the “Colors” link in both.

These should present you with similar screens:

Screenshot of Dribbble and Designspiration color pickers4
Use inspiration websites to find the right color for your design. (View large version5)

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.6
Different shades of blue have different characteristics. Choose wisely! (View large version7)

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

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

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 COLOURlovers11
The kinds of palettes you’re probably used to seeing. (Image credit: ColourLovers12 palettes by manekineko13 and sugar!14 ) (View large version15)

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 palettes16
Like Thoughtbot17 and TedTodd18, you don’t need a complex color scheme to have a great-looking website. (View large version19)

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 Paletton20 and type your HEX code into the color box:

Screenshot of Paletton setting base color21
Enter your base color code on Paletton. (View large version22)

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 Paletton23
Paletton automatically generates a good accent color for you. (View large version24)

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 Paletton25
Click through to find a color scheme you like. (View large version26)

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.27
Our color palette so far — already, it’s shaping up. (View large version28)

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 Dribbble292 and Designspiration303 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 technique31 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 grays32
Picking grays that harmonize with the base color is a small detail that makes a big difference. (View large version33)

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 gray34
Our wonderful color scheme, ready to be applied. (View large version35)

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 layout36 in grayscale first. Figure out the hierarchy, and then experiment with the color later.

Grayscale image of website layout37
Laying out your website in grayscale will help you apply the color scheme. (View large version38)
Color palette applied to a website layout39
Our color scheme in action. (View large version40)

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 Guidelines41. Two popular ones are the WebAim Color Contrast Checker42 and Contrast Ratio43 by Lea Verou44.

A 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 palette45
Using the techniques above, you can extend your color palette to hold more colors as and when you need them. (View large version46)

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 theory47, without the theory!

(rb, jb, ml, al)

Footnotes Link

  1. 1 http://www.rit-mcsl.org/fairchild/WhyIsColor/files/ExamplePage.pdf
  2. 2 https://dribbble.com/colors/
  3. 3 http://designspiration.net/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/03/01-dribble-designspiration-screenshot-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/03/01-dribble-designspiration-screenshot-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/03/02-color-characteristics-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/03/02-color-characteristics-opt.jpg
  8. 8 https://css-tricks.com/grabbing-hex-codes-for-colors/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/03/03-dribbble-color-results-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/03/03-dribbble-color-results-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/03/04-colour-lovers-palettes-opt.jpg
  12. 12 http://www.colourlovers.com/
  13. 13 http://www.colourlovers.com/lover/manekineko/loveNote
  14. 14 http://www.colourlovers.com/lover/sugar!/loveNote
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/03/04-colour-lovers-palettes-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/03/05-simple-color-schemes-opt.jpg
  17. 17 https://thoughtbot.com/
  18. 18 http://tedtoddinsurance.com/
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/03/05-simple-color-schemes-opt.jpg
  20. 20 http://paletton.com/
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/03/06-base-rgb-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/03/06-base-rgb-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/03/07-complimentary-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/03/07-complimentary-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/03/08-triad-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/03/08-triad-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/03/09-color-scheme-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/03/09-color-scheme-opt.jpg
  29. 29 https://dribbble.com/colors/
  30. 30 http://designspiration.net/
  31. 31 http://methodandcraft.com/videos/creating-harmonious-color-schemes
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/03/10-greys-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/03/10-greys-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/03/11-color-palette-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/03/11-color-palette-opt.jpg
  36. 36 https://www.smashingmagazine.com/2015/12/website-layout-tools-compared-flexbox-vs-susy/
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/03/12-colour-in-practice-greyscale-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/03/12-colour-in-practice-greyscale-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/03/13-color-in-practice-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/03/13-color-in-practice-opt.jpg
  41. 41 http://webaim.org/blog/wcag-2-0-and-link-colors/
  42. 42 http://webaim.org/resources/contrastchecker/
  43. 43 http://leaverou.github.io/contrast-ratio/
  44. 44 http://lea.verou.me/
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/03/14-color-palette-extended-opt.jpg
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/03/14-color-palette-extended-opt.jpg
  47. 47 https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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 (http://www.lauraelizabeth.co/).

  1. 1

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

    21
  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.

    9
    • 4

      MacCruiskeen

      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.

      6
    • 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.

      0
    • 6

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

      2
  3. 7

    But no mention of Adobe Color?

    https://color.adobe.com

    -3
  4. 9

    Keshav Naidu

    April 5, 2016 10:08 am

    I found the simplest site which helped me a lot on every design.
    http://www.schemecolor.com

    Cheers.

    -4
  5. 11

    Amber Jabeen

    April 5, 2016 10:15 am

    Brilliant article. A great help.

    2
  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 color.adobe.com is also a nice tool to use.

    6
  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?

    5
  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 https://coolors.co/ for ref to come back to.

    5
  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

    1
  10. 19

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

    2
  11. 20

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

    1
  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.

    0
  13. 22

    Excellent

    0
  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!

    0
  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.

    Thanks!

    Joe Suchy

    3
  16. 25

    Simple web designers every where thank you.

    1
  17. 26

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

    -22
  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.

    0
  19. 28

    Thanks for a well written, colourful article.

    0
  20. 29

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

    Thanks

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that all fields are mandatory, comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top