loading...
Cover image for Introduction to Color theory

Introduction to Color theory

ziizium profile image Habdul Hazeez ・5 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Cover image by Sharon Pittaway on Unsplash

Colors are everywhere, you'll find them naturally occurring in nature, on the streets, in our homes just to name a few. Color is a visual experience that cannot be verified by other senses.

The study of colors dates back centuries ago, the likes of Plato and Aristotle, Newton, Goethe, and Schopenhauer wrote about color. Towards the end of the seventeenth and eighteenth centuries, there were writings on the subject of colors and the influence of these writings persists to this present day.

The writings focused on two things — the search for a perfect color-order system and the search for laws of harmony in color combination — these have converged in the field of study known as color theory.

Now you might ask: What is color theory?

Let's find out.


When you are browsing the internet there is a high probability you'll land on a website that will leave you stunned by its beauty and awesomeness, if this is the case, the designers did their homework on the use and combination of colors.

Have you ever wondered why you found the said website appealing? that's because colors have a great impact on our mood and behavior. Most users decide if they like a product or website based on the color if the color is off, the users are off.

The theoretical approach on how to mix color to achieve a visually appealing effect has its roots in color theory. Interaction Design Foundation defines color theory as:

a term used to describe the collection of rules and guidelines regarding the use of color in art and design, as developed since their early days.

To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. We'll begin with the color wheel.

Color Wheel

The color wheel helps you understand how different colors relate to each other and how they can be combined. It is made up of:

  • Primary colors (red, green and blue)
  • Secondary colors (created by mixing two primary colors)
  • Tertiary colors (created by mixing primary and secondary colors)

Color wheel
Color wheel © Tubik studio

The history of the color wheel dates back to 1666 by Sir Issac Newton over the years it has evolved but still remains the main tool for color combinations.

Now, the question is: How do you mix colors? The answer lies in color models.

Color models

A good understanding of color models is required before mixing colors. The color models are:

  • Additive color model
  • Subtractive color model

Additive color model

The additive color model considers red, blue, and green as primary colors so it’s also known as the RGB color system. As a designer, you should know this model is the basis of all colors used on the screen.

Substractive color model

As the name implies this model obtains colors by the subtraction of light. It consists of two color systems they are:

  • RYB (Red, Yellow, blue); this is also known as artistic system
  • CMYK (Cyan, Magenta, yellow and black); this is used in printing

The major difference between these two systems: additive is for digital screens and subtractive for print media. When you are designing a website that's meant to be printed, remember the color you see on the screen will look different when printed.

In CSS you can target print media with the following media query:

@media print {
   /* Code for print media here */
}

After combining colors using the color models, you have to arrange them to achieve harmony in your designs. Harmony in this context means "orderly" and "pleasing". The form of arrangements is categorized into five color schemes. They are:

  • Analogous
  • Complimentary
  • Split-complimentary
  • Triadic
  • Tetradic

Analogous

This is based on three colors located next to each other on the color wheel. This type of color scheme is used for the background of web pages.

Analogous color combinations
Analogous color combinations

Complementary

This can be a single color or one or more pairs of colors that produce high contrast when combined. They are placed in front of each other on the color wheel.

Complementary color combinations
Complementary color combinations

Split-complementary

It involves the use of more colors as it combines analogous and complementary schemes.

Split-complementary color combinations
Split-complementary color combinations

Triadic

This involves the use of three colors that have equal distance between them on the color wheel. The need for this color scheme always arises when the design requires more color.

Triadic color combinations
Triadic color combinations

Tetradic

The use of this color scheme involves the use of two sets of complementary colors.

Tetradic color combinations
Tetradic color combinations

Another consideration when using color in design is color temperature i.e how to know the difference between warm, cool and neutral colors.

Cool colors contain blue or green and steps between them. Warm colors are reds, oranges, yellows, and steps between them. Neutral colors include brown, gray, black, and white.

These color groupings can evoke emotional responses in people based on their gender, experiences, cultural associations or other personal factors.

Researching the traits and expectations of a target audience is vital for not only fine-tuning the positive impact of color used in design but also preventing design failure (source).

Color theory is a science on its own and it takes more than one blog post to learn. However, it's best to understand the basics so that you can create an effective design.

Further reading

Here is a list of recommended readings on this subject:


We've come a long way in this series. Up next we'll give some reference materials and we'll proceed to our Final Project.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide