UI Fundamentals: Color Theory
Day 009 of #100DaysOfUX
Learned about colour theory and how we can make informed choices keeping colour harmony in check.
Colours play a very dynamic role in Design and our Life, We call a Rainbow a Rainbow because it contains a particular set of colours: VIBGYOR and not just any 7 colours.
So, How do we know which colours will look good together and which one’s don’t?
The answer is Colour Theory; making informed colour choices on the basis of Colour Theory can help make us feel more confident in situations where we have to choose colours for a Graphic Design, App or Web Design.
Colour theory
The Basics:
The Colours like Red, Yellow and Blue are called Primary colours because these give rise to other secondary and tertiary colours.
for example
Red + Yellow is Orange
Yellow + Blue is Green
Blue + Red is Pink
These resultant colours constitute the Secondary colours ( Orange, Green, Pink ).
And Colours made by mixing either one primary colour with one secondary colour are called Tertiary colours.
for example :
Blue and Green give Teal.
All these colours together form a colour wheel:
Now that we know what a colour wheel is, let’s understand the terms that are used to navigate a colour wheel.
- Hue is basically just another word for Colour or alternatively, it is the primary value of a colour.
- Chroma is the purity of a colour (a high chroma has no added black, white or grey).
- Saturation is a comparative measure for the intensity of a colour compared to the highest purest colour.
4. Value is the lightness or darkness of overall colours schemes.
Additionally, these terms are also worth knowing:
- Tones are created by adding grey to a colour, making it duller than the original.
- Shades are created by adding black to a colour, making it darker than the original.
- Tints are created by adding white to a colour, making it lighter than the original.
In order to make beautiful and Professional looking colour palettes, we put together the Hue, Saturation and Value and make use of the Colour Harmony.
- Monochromatic Colour Harmony
This is the easiest formula as it uses only one colour/hue just pick a spot on the colour wheel and use your knowledge of saturation and value to create variations.
The Best thing about Monochromatic colour schemes is that they are guaranteed to match.
2. Analogous Colour Harmony
Analogous colours are placed adjacent to one another on the colour wheel. Take any three adjacent colours on the colour wheel to try out this scheme.
So, if you choose orange-yellow as the dominant colour, then yellow and orange would together make up the analogous colour scheme.
3. Complementary Colour Harmony:
This scheme is made up of those colours that are opposite to one another on the colour wheel. pick any colour on the colour wheel and trace its exact opposite.
So, if you choose orange-yellow, blue-violet would be its complementary colour.
Pro Tip: To Avoid Complementary colours schemes that look too simplistic, add some variety by introducing shades with different saturation and value ( Lighter and Darker shades).
Now that we know about colour theory and Colour Harmony let’s see how we can incorporate this knowledge with Colour Models:
A colour model is a way to describe the way colours can be represented as tuples of numbers, typically as three or four values or colour components.
- CMYK Colour Model
CMYK Colour Model is made up of Cyan, Magenta, Yellow and Black. The overlap of these colours results in Black.
The CMYK Colour Model uses subtractive colour mixing, subtractive because they are produced by subtracting from the primary colours of light. When red is subtracted from green and blue, it becomes cyan. When we subtract blue from red and green, we get yellow. And when red and blue are joined and green is subtracted, we get magenta.
CMYK colour model is used for prints on papers with printers.
2. RGB Colour Model
RGB Colour Model is made up of Red, Green, Blue. The overlap of these colours results in White.
RGB colour model is an additive colour model as red, green and blue are added in various combinations to produce a wide spectrum of colours. Red and green light combine together to create yellow, blue and green add to produce cyan, and red and blue add together to produce magenta.
RGB colour model is used for web and screen designs.
3. HSB/HSV Colour Model
HSB/HSV Colour Model changes the purity and density of the colour as well as how much light is projected through the colour.
~ Hue as we know is a radial 360 scale of all colours
~ Saturation is how dull or rich the colour looks
~ Brightness/Value controls whether the colour is closer to black to white.
That is all I learned about Colours and I feel even though the colour is subjective, We should make informed choices keeping these learnings in mind.
Colour Harmonies can really help in picking the desired colour palette without much trial and error.
I am sure with practice, choosing colours will become my second nature :)
If you are reading till here, I would like to share a video about colours from my favourite YouTube Creator, You can give it a watch here :
Fin.
