DEV Community

Basic Color Theory for Web Developers

Nicole Zonnenberg on January 25, 2019

You would be hard-pressed to find an art class without a color wheel hanging somewhere on its walls. If you’ve ever taken an art class, you might h...
Collapse
 
ben profile image
Ben Halpern

It's amazing how much colors can affect any technical project. No software is ever purely technical with no need for aesthetics.

Collapse
 
nikacodes profile image
Nicole Zonnenberg

Even no formatting is arguably an "aesthetic". Tho you risk alienating potential users.

Collapse
 
colortools profile image
Color Tools 🌈

Color Inspiration<br>

Where does creative inspiration come from? One of my biggest challenges when designing from scratch is coming up with a color palette from which to work. If I haven’t been given direction for employing corporate color schemes or been told the whims of the person who hired me, I usually sit and scratch my head before getting started. Choosing the ideal colour scheme begins by researching colours, styles and patterns that suit you. hexcolor.co is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes. Creating a website color scheme is an important and exciting aspect to web design! hexcolor.co/color-inspiration

Collapse
 
rankseotools profile image
Rank SEO Tools

Thanks, I like this color tool (:

Collapse
 
ferkungamaboobo profile image
Reid Thomas

One tool that I've really used any time I need to do any color work is color.adobe.com

I really liked the "random" feature on Coolers! Helped on a project I've been working on today -- thanks for sharing.

Collapse
 
nikacodes profile image
Nicole Zonnenberg

Do you mind if I link this? (with credit, obviously)

Collapse
 
ferkungamaboobo profile image
Reid Thomas

Oh yeah, feel free - no credit needed :)

One other thing I try to think about for color schemes is accessibility:

webaim.org/resources/contrastchecker/ can help make sure that text is readable over backgrounds

and color-blindness.com/coblis-color-b... can help test screenshots of layout with colorblindness filters to make sure things still "pop"

Thread Thread
 
nikacodes profile image
Nicole Zonnenberg

Oooh, that color-blindness site is clutch!

Collapse
 
jaiko86 profile image
jaiko86

As a coder, I find design more challenging, as there never seems to be the "right" answer.

Collapse
 
nikacodes profile image
Nicole Zonnenberg

It's always changing. Design comes and goes in fads. The most important thing is for the content to be readable and a website/page easy to use. Color at the very least, should make it easy to read and differentiate and emphasize important elements. If you find it difficult, make it as simple as possible. And when in doubt, ask for feedback from someone you trust. :)

Collapse
 
phantomread profile image
phantomread

yeah, readable and easy to understand is the key. completely agree.

Collapse
 
phantomread profile image
phantomread

yup, I feel the same, it's normally easy to tell if a particular code produces the right result or not, but it's sometimes hard to say which design is good as it can be very opinion based - people have different tastes and preferences, what you see is great may look completely craps in others' eyes.
But again, there are some general good design principles which can/should be applied everywhere.

Collapse
 
jaiko86 profile image
jaiko86

Of course of course. But what I mean is like having to pick between two different, but very close shades of gray, or whether to make the menu bar 110px or 120px high or something like that. I don't know how to use Photoshop, so I just make design things on chrome AS I'm developing a website. It's a pain in the ass. When I'm given a wireframe of a static page, I can breeze through it, but making my own is hard because of design

Collapse
 
marissab profile image
Marissa B

Those tools look really interesting - good finds! I agree that colors have a lot more weight than people probably realize. Gone are the days of cyan backgrounds...I hope.

Collapse
 
nikacodes profile image
Nicole Zonnenberg

May Geocities rest in peace.

Collapse
 
slu profile image
Søren Lund

What? No! Here, I fixed it for you: wonder-tonic.com/geocitiesizer/con...

:-) and nice write-up.

Thread Thread
 
nikacodes profile image
Nicole Zonnenberg

HAHAHAHAHA! XD

Collapse
 
rhymes profile image
rhymes

Great post Nicole, thanks for the intro! As a developer it's always useful to have these concepts refreshed :D I've recently found out about lighten and darken which seem very helpful for monochromatic design.

If anyone wants to geek out about one the most fascinating colors in nature I suggest this article: The 6,000-Year History of Blue Pigments in Art

and this video

Collapse
 
muhammad-shumail profile image
Muhammad Shumail

this post is very useful for me thanks for share your kind information with us.

Collapse
 
zfleischmann profile image
Zakk

This is a fantastic introduction to color theory! Thank you so much!

After years of high school art, I never knew or realized this:

An easy way to remember which colors to match is that the secondary color matches with the primary color it does not use. For example: red's complementary color is green, which is made out of blue and yellow.

This is such a great way of finding a complementary color!

Collapse
 
jeffdstephens profile image
Jeff Stephens

So glad you mentioned coolors.co. LOVE that site. It's made for us color-wheel-challenged. I love how you can find one color (or use one you have), lock it in, then just hit the space bar as it does all the magic for you.

Collapse
 
liana profile image
Liana Felt (she/her)

I have always feel slightly intimidated by color. My go to is the Adobe Color Wheel which I really like. Especially because it allows you to save color themes to your adobe ID and they automatically load in Illustrator (not sure about Photoshop). But will definitely check out these two you suggest. Thank you!

Collapse
 
clippingpathindia profile image
Clipping Path India

That's a great resource I got in recent times on color theory. In my recent research, I made a comprehensive research and prepared a guide to learn color theory in a generic way.
colorexpertsbd.com/blog/color-theory
It may help audience to get an appropriate idea.

Collapse
 
makenoisewacamayo profile image
Rafael Avaria Gutierrez

Thanks for the article since i study math and science i don't have any perspective of color and their importance on a good desing.

Collapse
 
dalscherg2 profile image
Daniella Alscher

Hey, Nicole! Noticed you didn't mention anything about the RGB vs CMYK color wheels... I recently created a resource on that subject:

learn.g2.com/rgb-vs-cmyk

I think it's important for web developers to know which color wheel to refer to! Thoughts?

Collapse
 
yendenikhil profile image
Nik

You have explained the colors so amazingly, now even I feel that I can create my own pallettes to use!

Collapse
 
erclairebaer profile image
Claire McCrea

Thanks for these! Color is definitely scary for me, as I don't have a natural designer "eye." I always appreciate useful color resources.

Collapse
 
lennythedev profile image
Lenmor Ld

Great intro! I learned these in grade school but was really not sure back then how it mattered. Finally something that connected this knowledge to web for me. Thanks!

Collapse
 
max_tulian profile image
Max (he/his)

Wow, I would keep reading about color theory. Thanks for share!

Collapse
 
clippingphoto1 profile image
Clipping Photo India

Wow! this is really amazing technique. As a designer this technique really helpful. Thank you for sharing this blog

Collapse
 
dechamp profile image
DeChamp

Thank you so much. This has always been my biggest struggle.

Collapse
 
hdennen profile image
Harry Dennen

I'm color blind so I always used Paletton when I did web design.

Collapse
 
phantomread profile image
phantomread

Very informative, great article..

Collapse
 
nikacodes profile image
Nicole Zonnenberg

It's my favorite if I'm creating my own pallet!

Collapse
 
rosiewilliams39 profile image
clippingimages

Very informative for Web Developers. great article! I concur that colors carry a lot more significance than most people realize. Thanks for sharing this article.

Collapse
 
rosiewilliams39 profile image
clippingimages

Color Theory information is very helpful for Web Developers. This article is amazing and thanks for sharing.