Color System: Knowing the Basics

Here is the basics of Color System. It is extremely important when you want to get your basic aesthetics clear.

Image for post
Image for post

Topics covered are:
1. Introduction to Color wheel
2. Balance & Harmony in Color
3. Knowing the terms — RGB, CMYK, & HSB

Making of Color wheel

Primary Colors
Primary Colors
Primary Colors (Red, Blue, Yellow)

Primary Colors are Natural Colors. They are also know as pure color.
Red, Blue & Yellow are placed in a triangular format on a wheel.

Secondary Colors (Orange, Purple, Green)
Secondary Colors (Orange, Purple, Green)
Secondary Colors (Orange, Purple, Green)

On mixing 2 Primary color, 1 secondary color is created.
Red+Yellow = Orange
Yellow+Blue = Green
Blue+Red = Purple

Tertiary Colors (Teal, Magenta, Chartreuse)
Tertiary Colors (Teal, Magenta, Chartreuse)
Tertiary Colors (Teal, Magenta, Chartreuse)

On mixing 1 Primary color & 1 secondary color, you get Tertiary color
Red+Orange = Vermilion
Orange+Yellow = Amber
Yellow+Green = Chartreuse
Green+Blue = Teal
Blue+Purple = Violet
Purple+Red = Magenta

Balance is the key to Harmony

The below color combinations can make your design color palette very appealing.

Image for post
Image for post
Image for post
Image for post
Complimentary & Split-Complimentary colors

Complimentary Colors are the opposite colors that you find on a color wheel
(eg. Red & Green)

In Split-Complimentary Colors, the two colors placed symmetricly
around one of the complimentary color
on the color wheel
(eg. Red, Chartreuse & Teal)

Image for post
Image for post
Image for post
Image for post
Analogous colors & Square colors

Analogous colors are groups of three colors that are next to each other on the color wheel (eg. Chartreuse, Green & Teal)

Square colors are a combination of four colors equally spaced around the color wheel. (eg. Orange, Chartreuse, Magenta & Blue)

Image for post
Image for post
Image for post
Image for post
Triadic colors & Tetradic colors

Triadic colors comprised of three colors evenly spaced on the color wheel
(eg. Chartreuse, Violet & Vermilion)

Tetradic colors are formed using any 2 complimentary colors scheme from the color wheel. (Vermilion, Magenta, Teal & Chartreuse)

Let’s see 3 Components of Colors

HUE, SATURATION & VALUE

Hue Colors
Hue Colors
Image for post
Image for post
Value
Value
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Colors must fit together as pieces in a puzzle or cogs in a wheel
- Hans Hofmann

Check out the Article on: UI — Color Palette — Knowing the terms & creating them

Written by

I am always wired to my tiny sketchbook where shapes flow into design, and sometimes my creativity overflows onto the page in the form of design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store