Important colour theory terms and concepts

Primary colours

In web design we often use the additive RGB colour scheme where by the primary or main colours that can make up every other colour are Red Green Blue hence the name RGB. 

Primary colors form the basis for all other shades. Every other colour we use in web design consists of a combination of these three colours in varying amounts, brightnesses, tints, and shades.

RGB decimal and hex

On the web, we use RGB (red-green-blue) and hex values to represent colours.

The RGB color system defines all colors as a combination of three different values: a particular shade of red, another of green, and another of blue. So:

– rgb(85, 15, 157) is cadburys purple in decimal colour notation

– rgb(0, 0, 0) is black  in decimal colour notation

– rgb(255, 255, 255) is white  in decimal colour notation

The hex color system converts each value to a hexadecimal (base 16) representation, like so:

– #550f9d is cadbury purple in the hex colour notation

– #000000 is black in the hex colour notation

– #ffffff is white in the hex colour notation

The color wheel

A basic colour wheel contains the 12 standard colors used to create color schemes. Each section represents colours that can be achieved with different saturations, hues, tints, shades, and mixes of neighbouring colours.

The color wheel can be used to define how the balance and what makes  color schemes work.

4 simple examples of colour schemes

Colour schemes generally work best when one of the following patterns is used.

1. Monochrome

A monochrome color scheme consists of various tints, shades, and saturations of a single base colour. They’re very cohesive.

 2. Complementary

Complementary schemes are based on two colors from opposite sides of the color wheel. Because the two colour are vastly different, such schemes can be very dramatic and stunning.

3. Analogous

Analogous schemes feature  colours that sit next to each other on the color wheel. Because of the tonal similarities, these schemes can create a very cohesive, unified feel.

4. Triadic

To  triadic colour scheme is based on the three colors at the points of an equilateral triangle. This creates a diverse, yet balanced, scheme.

There are other colour scheme types but those 4 are a good place to start.

Hue, Saturation and Lightness

Hue defines the degree to which a color can be described as similar to or different from red, orange, yellow, green, blue, indigo, and violet (the colors of the rainbow). So when you describe a color as “greenish blue,” you’re defining it in terms of two hues.

Color saturation (also know as chroma and intensity)  refers to the intensity of colour in an image. In technical terms, it is the expression of the bandwidth of light from a source.  When colour is fully saturated, the colour is considered in purest (truest) version. Primary colors red, blue and yellow are considered truest version color as they are fully saturated.
As the saturation increases, the colors appear to be more pure. As the saturation decreases, the colors appear to be more washed-out or pale.
definition src: https://www.techopedia.com/definition/1968/color-saturation

Lightness, also known as value or tone, defines the perceived brightness of a color compared to pure white.

Color resources

If are not naturally gifted in the area of colour selection then there are lots of resources for you to use on the web. Below are just a couple to get you started.

Adobe Color CC, This is great tool from Adobe which allows you to specifc a starting colour and then choose the colour scheme you want and it will give the colour codes you need. You can adjust your clour selection live on the site

Colour Calculator This is also a great resource for choosing colours and has some great info on colour theory

Color Scheme Designer 3 (Paletton) Color Scheme Designer is very easy to use and its choice of colour principles present a variety of options. While it doesn’t teach its users why the colors work well together (Kuler’s dynamic color wheel is much more effective in that regard), its results are great as a starting point.